Adobe Commerce App Builderの AI コーディング開発者ツール

最新の Adobe I/O CLI をグローバルにインストールします。

npm install -g @adobe/aio-cli

次のプラグインをインストールします。

• Adobe I/O CLI Commerce
• Adobe I/O CLI ランタイム ​
• App Builder CLI

aio plugins:install https://github.com/adobe-commerce/aio-cli-plugin-commerce @adobe/aio-cli-plugin-app-dev @adobe/aio-cli-plugin-runtime

次のいずれかのクローンを作成します。

• Commerce​ 統合スターターキット ​ - バックオフィス統合を構築するためのキット。

  code language-bash
  git clone git@github.com:adobe/commerce-integration-starter-kit.git

• Commerce​ チェックアウトスターターキット ​ で、支払い、送料、税金などのチェックアウトエクスペリエンスを構築または拡張します。

  code language-bash
  git clone git@github.com:adobe/commerce-checkout-starter-kit.git

スターターキット ディレクトリに移動します。

cd commerce-integration-starter-kit

インタラクティブなセットアップコマンドを実行して、Commerce AI 拡張ツールをインストールします。

aio commerce extensibility tools-setup

セットアッププロセスにより、設定オプションが求められます。 画面の指示に従って、インストールを完了します。 ツールは選択したディレクトリにインストールされます。

• プロジェクトに使用するスターターキットを選択します。

  code language-shell-session
  ? Which starter kit would you like to use? ❯ Integration starter kit Checkout starter kit

• 好みのコーディングエージェントを選択します。 40 を超えるコーディングエージェントがサポートされていますが、好みのエージェントが表示されない場合は、Other のオプションを使用して、任意のコーディングエージェントのスキルをインストールできます。 スキルを設定する手順については、コーディングエージェントのドキュメントを参照してください。

  code language-shell-session
  ? Which coding agent would you like to install skills for? ❯ Cursor Claude Code GithubCopilot Windsurf Gemini CLI OpenAI Codex Cline ...

• NPM または Yarn がインストールされているかどうかをインストーラが検出し、自動的に適切な選択を行います。 ただし、どちらもインストールされていない場合は、パッケージマネージャーを選択するように求められます。Adobeでは、一貫性を保つため npm を使用することをお勧めします。

  code language-shell-session
  ? Which package manager would you like to use? ❯ npm yarn

コーディングツールを正常にインストールした後、インストールプロセスによって以下が設定されます。

• Adobe Commerce開発用の MCP サーバーの統合
• 開発経験の向上に役立つ ​ エージェントスキル ​
• Commerce固有の開発ツールとワークフロー

これで、スキルと MCP ツールがインストールされました。 スキルと MCP ツールが表示されない場合は、コーディングエージェントを再起動します。

カーソル IDE を再起動して、新しい MCP ツールと設定をロードします。

.cursor/skills/ フォルダーにスキルが存在することを確認して、インストールを検証します。

MCP サーバを有効にします。

• Cmd+Shift+P （macOS）または Ctrl+Shift+P （Windows および Linux）を使用して、Cursor MCP Settings を開きます。
• 表示：MCP 設定を開く と入力します
• リストで commerce-extensibility MCP Server を見つけます
• サーバー オン を切り替えて、コーディングツールを有効にします

サーバーステータスの確認 – Commerce拡張機能 MCP サーバーは次のように表示されます。

Status: Connected/Active
Server: commerce-extensibility
Configuration: Automatically configured via .cursor/mcp.json

次のプロンプトを使用して、エージェントが MCP サーバを使用しているかどうかを確認します。 表示されない場合は、エージェントに対して、使用可能な MCP ツールを使用するように明示的に依頼します。

What are the differences between Adobe Commerce PaaS and Adobe Commerce as a Cloud Service when configuring a webhook that activates an App Builder runtime action?

Visual Studio Code を再起動して、新しい MCP ツールと設定を読み込みます。

copilot-instructions.md ファイルが .github フォルダーに存在することを確認して、インストールを検証します。

MCP サーバを有効にします。

• 左側のサイドバーのアクティビティバーにある 拡張機能 アイコンをクリックするか、Cmd+Shift+X （macOs）または Ctrl+Shift+X （Windows および Linux）を使用して、拡張機能パネルを開きます。
• [MCP SERVERS - INSTALLED] をクリックします。
• commerce-extensibility MCP Server の横にある歯車アイコンをクリックし、サーバーが停止している場合は サーバーを起動 を選択します。
• 歯車アイコンをもう一度クリックし、「出力を表示」を選択します。

サーバーステータスを確認します。 MCP:commerce-extensibility の出力は、次のようになります。

2025-11-13 12:58:50.652 [info] Starting server commerce-extensibility
2025-11-13 12:58:50.652 [info] Connection state: Starting
2025-11-13 12:58:50.652 [info] Starting server from LocalProcess extension host
2025-11-13 12:58:50.657 [info] Connection state: Starting
2025-11-13 12:58:50.657 [info] Connection state: Running

(...)

2025-11-13 12:58:50.753 [info] Discovered 10 tools

次のプロンプトを使用して、エージェントが MCP サーバを使用しているかどうかを確認します。 表示されない場合は、エージェントに対して、使用可能な MCP ツールを使用するように明示的に依頼します。

What are the differences between Adobe Commerce PaaS and SaaS when configuring a webhook that activates an App Builder runtime action?

ローカル開発 サーバの起動：

aio-app-dev

アクションをローカルでテスト：

aio-dev-invoke action-name --parameters '{"test": "data"}'

ランタイムにデプロイ：

aio-app-deploy

デプロイ済みアクションのテスト

Web ブラウザーまたはダイレクト HTTP リクエストの使用

デバッグ用にアクティブ化ログを確認する

エージェントに /feedback と入力し、commerce-extensibility/feedback コマンドを選択します。

IDE の上部に表示される「フィードバック」フィールドにツールのフィードバックを入力し、Enter キーを押します。

{width="600" modal="regular"}

ローカルに保存 フィールドで、yes または no と入力し、Enter キーを押して、ログのローカルコピーを保存するかどうかを指定します。

{width="600" modal="regular"}

はい を選択した場合、フィードバックを送信した後に chats フォルダーのログを確認できます。

commerce-extensibility/feedback コマンドがエージェントのチャット入力フィールドに表示されます。 Enter キーを押すか 送信 をクリックして、フィードバックをAdobeに送信します。