はじめに
最近、ECサイトの右下にチャットボットをよく見かけるようになりましたよね。
Shopify MCPを使えば、お客さんと自然に会話しながら商品を提案して、そのまま購入まで完了できるAIエージェントが作れちゃうんです。
この記事では、Shopifyが提供するModel Context Protocol（MCP）を活用し、実際に動作するAIショッピングアシスタントを一から構築する手順を紹介します。
この記事で学べること
- ShopifyのAIエージェント開発の基礎知識
- Model Context Protocol（MCP）の理解と活用方法
- Remixフレームワークを使った実装手順
- 本格的なECサイト向けAIチャットボットの構築
完成イメージ
構築するAIエージェントの機能は下記です。
- 自然言語での商品検索: 「赤いワンピースを探している」などの自然な表現で商品を検索
- パーソナライズ商品提案: 顧客の好みに基づいた商品提案
- ストアポリシー回答: 配送・返品規定などの質問に自動回答
- カート操作: 商品の追加・削除・数量変更
- チェックアウト支援: 購入プロセスのガイド
技術スタック
主要技術
- Shopify Storefront API: 商品データとカート操作
- MCP (Model Context Protocol): AIとShopifyの連携プロトコル
- Remix: フルスタックWebフレームワーク
- Claude API: AIエンジン（他のLLMにも変更可能）
- TypeScript:
MCPとは？
Model Context Protocol（MCP）は、AIモデルが外部システムと安全かつ効率的に通信するためのプロトコルです。従来のAPI連携と比べて、以下の利点があります
- コンテキスト保持: 会話の流れを維持しながらデータアクセス
- セキュリティ: 必要最小限の権限でのデータアクセス
- 拡張性: 新しい機能を簡単に追加可能
事前準備
必要なアカウント・ツール
-
Node.js v18.20以上
node --version # バージョン確認 -
Shopifyパートナーアカウント
- shopify.com/partnersでアカウント作成
-
Shopify開発ストア
- パートナーダッシュボードから作成
- 開発ストアを作成する際に「テストデータから開始」にしておくと楽です
-
Claude APIキー
-
Shopify CLI v3.79.0以上
npm install -g @shopify/cli@latest
実装手順
Step 1: プロジェクトセットアップ
まず、Shopify公式のリファレンスアプリをクローンします
git clone https://github.com/Shopify/shop-chat-agent.git
cd shop-chat-agent
npm install
Step 2: 環境変数の設定
.env.exampleを.envにコピーし、必要な環境変数を設定
cp .env.example .env
.envファイルを編集
CLAUDE_API_KEY=your_claude_api_key_here
REDIRECT_URL=https://localhost:3458/auth/callback
SHOPIFY_API_KEY=your_app_client_id
重要: SHOPIFY_API_KEYの値は、shopify app dev実行後に自動生成されるshopify.app.tomlファイルのclient_idフィールドから取得してください。
Step 3: Shopifyアプリの作成
開発サーバーを起動し、アプリ設定を行う
shopify app dev --use-localhost --reset
以下のプロンプトに順番に回答
- 組織選択: Dev Dashboardアクセス権限のある組織を選択
-
新規アプリ作成:
(y) Yes, create it as a new app -
アプリ名:
shop-chat-agent（デフォルトのまま推奨） - 設定ファイル: 空白のまま（Enterキー）
-
既存設定上書き:
No, overwrite my existing configuration file
Step 4: 開発ストアの設定
- ストア選択: 使用する開発ストアを選択
- ストアパスワード: 表示されるURLからパスワードを取得して入力
-
証明書生成:
Yes, use mkcert to generate it -
URL自動更新:
Yes, automatically update
Step 5: アプリのインストールとテスト
ターミナルに表示されるPreview URLをブラウザで開き、アプリをインストール
Preview URL: https://your-store.myshopify.com/...
Step 6: テーマ拡張機能の有効化
- Shopify管理画面で「オンラインストア」→「テーマ」
- 「カスタマイズ」をクリック
- サイドバーの「アプリ埋め込み」アイコンをクリック
- AIショッピングアシスタントのトグルを有効化
- 「保存」をクリック
🎉 完了！ この時点でAIショッピングアシスタントが動作します。
動作テスト
実際にストアフロントでAIエージェントをテストしてみましょう
しっかりチェックアウトまでいけました。
顧客アカウントMCPサーバーは現在早期アクセス段階のため、利用にはShopifyサポートへの申請が必要でした、今回は検証していません。
まとめ
応答スタイルをブランドイメージに合わせたり、特定の商品カテゴリをおすすめしたりカスタマイズの幅は広そうです！チャットだけで商品を購入する時代が来るかも、、
参考リンク
Discussion