はじめに
- Claude CodeやCursorにGraphQLクエリを書かせたら、存在しないフィールドを平気で生成された
- 古いAPIバージョンのコードが出力されて、動かない
- コード書き方を聞いたら、微妙に構文が違う
Shopifyアプリやストアを開発していて、こんな経験はないでしょうか。
AIコーディングツールはShopify開発を大幅にスピードアップしてくれますが、「推測」で書いたコードが動かないケースは日常的に発生します。
2026年4月にShopifyが公式にリリースしたAI Toolkitは、まさにこの問題を解決するためのツールです。
この記事では、AI Toolkitの概要と、実際にClaude Codeでセットアップした流れを解説します。
サードパーティのスキルから公式プラグインに移行した実体験もあわせて紹介します。
Shopify AI Toolkitとは
Shopify AI Toolkitは、AIコーディングツールをShopifyプラットフォームに接続する公式パッケージです。
対応しているツールはClaude Code、Cursor、Gemini CLI、VS Code、Codex。
ただしCodexはスキルとMCPのみ対応で、プラグインには非対応です。
プラグインをインストールすると、AIが最新のShopifyドキュメントとAPIスキーマをリアルタイムで参照できるようになります。
これまでのAIは、トレーニングデータに含まれるShopifyの情報をもとに「推測」してコードを書いていました。
AI Toolkitが入ると、推測ではなく実際のAPIスキーマやドキュメントを参照するため、出力の正確性が大きく向上します。
外部記事GitHub - Shopify/Shopify-AI-Toolkit: Agent plugins/extensions for CLIs and IDEs
AI Toolkitに含まれる16のスキル
プラグインをインストールすると、以下の16個のAgent Skillが自動で有効化されます。
- shopify-admin: Admin GraphQL APIの操作全般。商品・注文・顧客データのクエリやミューテーションを正確に生成
- shopify-admin-execution: Shopify CLIを通じた実際のストア操作。開発ストアでのテストに便利
- shopify-dev: Shopify開発全般のドキュメント・リソース参照
- shopify-functions: Shopify Functionsのディスカウント・配送カスタマイズのコード生成
- shopify-liquid: Liquidテンプレートの構文バリデーション
- shopify-hydrogen: Hydrogen（React）でのヘッドレス開発
- shopify-storefront-graphql: Storefront APIでのカスタムショッピング体験構築
- shopify-partner: Partner Dashboardのワークフロー
- shopify-customer: 顧客アカウント管理
- shopify-custom-data: メタフィールドやメタオブジェクトの設計・操作
- shopify-payments-apps: 決済アプリ開発
- shopify-pos-ui: POS UI Extensionの開発
- shopify-polaris-app-home: Polaris UIを使ったアプリホーム画面の構築
- shopify-polaris-checkout-extensions: チェックアウトUI Extensionの開発
- shopify-polaris-admin-extensions: Admin UI Extensionの開発
- shopify-polaris-customer-account-extensions: カスタマーアカウントUI Extensionの開発
外部記事Shopify-AI-Toolkit/skills at main · Shopify/Shopify-AI-Toolkit
以下でそれぞれのスキルについて詳しく解説しています。
3つのインストール方法
AI Toolkitには3つのインストール方法があります。
1. プラグイン（推奨）
プラグインは自動更新がつくため、Shopifyが新機能をリリースしたタイミングで自動的にスキルが更新されます。
Claude Codeの場合は2ステップです。
/plugin marketplace add Shopify/shopify-ai-toolkit
/plugin install shopify-plugin@shopify-ai-toolkit
Cursorならマーケットプレイスから検索してワンクリック。VS Codeの場合はCommand Palette（Cmd+Shift+P）から「Chat: Install Plugin From Source」を実行し、リポジトリURLを入力します。
2. Agent Skills（手動インストール）
特定のスキルだけ入れたい場合や、プラグインに対応していないツールの場合はこちら。
# 全スキルをインストール
npx skills add Shopify/shopify-ai-toolkit
# 特定のスキルだけインストール
npx skills add Shopify/shopify-ai-toolkit --skill shopify-admin
手動インストールは自動更新されないため、定期的にアップデートする必要があります。
3. Dev MCP Server
MCP（Model Context Protocol）を使った接続方式です。ローカルで動作し、認証不要。
claude mcp add --transport stdio shopify-dev-mcp -- npx -y @shopify/dev-mcp@latest
サードパーティスキルから公式プラグインへの移行
実際にこの記事を書いている自分自身が、まさにこの移行を行いました。
これまでの構成
以前はサードパーティのshopify-developmentスキルをClaude Codeにインストールしていました。
コミュニティが作成したSKILL.mdファイルで、GraphQLのサンプルクエリやCLIコマンド、Checkout Extensionの書き方などが静的テキストとして含まれています。
加えて、Shopify Dev MCP Serverも手動で.mcp.jsonに追加して併用していました。
公式プラグインとの違い
サードパーティスキルと公式プラグインの違いは3つあります。
1つ目はデータソース。サードパーティスキルはSKILL.mdに書かれた静的なテキストをコンテキストに注入するだけです。
APIが変更されてもスキルファイルを手動更新しない限り古い情報のままです。
一方、公式プラグインはShopifyのドキュメントとAPIスキーマにリアルタイム接続します。
2つ目はバリデーション機能。公式プラグインはGraphQLクエリやLiquidテンプレートをShopifyのスキーマに対して実際にバリデーションできます。
サードパーティスキルにはこの機能がありません。
3つ目はメンテナンス。公式プラグインはShopifyが管理し自動更新されます。
サードパーティは個人がメンテナンスしているため、APIバージョンの変更に追従する保証がありません。
移行手順
移行は簡単でした。
- 公式プラグインをインストール
/mcpでMCPサーバーの状態を確認し、重複がないかチェック- サードパーティの
shopify-developmentスキルを削除 - 手動追加していたDev MCP Serverのエントリがプラグインと重複していたため削除
全体で10分もかかりません。
実務で感じたポイント
プラグインコマンドの注意点
Claude Codeの/pluginコマンドは比較的新しい機能です。
古いバージョンだと認識されない場合があるため、claude --versionでバージョンを確認し、必要ならclaude updateで最新版にアップデートしてください。
プラグインとDev MCP Serverの重複
以前からDev MCP Serverを手動で追加していた場合、プラグインインストール後に重複する可能性があります。
/mcpで一覧を確認し、Projectスコープに残っている手動追加分は削除しておくのが無難です。
VS Code / Cursor での利用
プラグインはClaude Codeのターミナル上で動作します。
VS CodeやCursorのエディタ内チャットで使いたい場合は、別途そのエディタ向けのセットアップが必要です。
さいごに
Shopify AI Toolkitは、AIコーディングツールでShopifyアプリを開発するなら入れておくべきツールです。
特にGraphQL APIやLiquidのバリデーションが効くのは、実務で大きな時間短縮につながります。
サードパーティのスキルやDev MCP Serverを個別に管理していた方は、公式プラグインに一本化することをおすすめします。
自動更新がつくため、Shopifyの四半期ごとのAPIリリースにも自動で追従してくれます。
これからShopifyの開発環境を整える方は、ぜひ参考にしてみてください。