はじめに
- 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スキーマやドキュメントを参照するため、出力の正確性が大きく向上します。
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の開発
以下でそれぞれのスキルについて詳しく解説しています。
参考記事参照記事が見つかりません: /blog/shopify-ai-toolkit-skills
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のエディタ内チャットで使いたい場合は、別途そのエディタ向けのセットアップが必要です。
Polaris web componentsへの移行に対応（2026年6月アップデート）
リリース当初のAI Toolkitは「Shopify開発全般をAIに正確に書かせる」ためのツールでしたが、2026年6月のアップデートで役割がもう一段広がりました。チェックアウトとカスタマーアカウントのUI Extensionを、新しいAPIバージョン（Polaris web components）へ移行する作業を、AIエージェントに任せられるようになっています。
参考記事参照記事が見つかりません: <a href="https://shopify.dev/changelog/shopify-ai-toolkit-for-upgrading-extensions-to-polaris-web-components%7D">https://shopify.dev/changelog/shopify-ai-toolkit-for-upgrading-extensions-to-polaris-web-components
何を自動でやってくれるのか
これまで手作業だった移行ステップを、AI Toolkitが肩代わりします。具体的には次の3つです。
- React から Preact への変換
- 旧来のReactコンポーネントを、対応するPolaris web componentsへ置き換え
- Extension APIの更新（新しいAPIバージョンへの追従）
Polaris web componentsで作られたExtensionは、従来のReact Extensionより明確に描画が速くなります。読み込み時間とパフォーマンスの両方で有利です。
2026年10月1日以降は「移行しないと更新できない」
ここが一番重要です。Shopify CLIは、Extensionが1年以上前のAPIバージョンのままだと、そのアプリの更新自体をブロックします。2026年10月1日以降は、チェックアウト・カスタマーアカウントのUI ExtensionをAPIバージョン2025-07以前のままにしているアプリは、アップデートを公開できなくなります。
参考記事参照記事が見つかりません: <a href="https://shopify.dev/changelog/shopify-ai-toolkit-for-upgrading-extensions-to-polaris-web-components%7D">https://shopify.dev/changelog/shopify-ai-toolkit-for-upgrading-extensions-to-polaris-web-components
APIバージョン2025-10以降はデフォルトでPolaris web componentsを使う仕様です。期限ギリギリで慌てないためにも、対象のExtensionを持っているなら早めに移行しておくのが安全です。
実際の使い方
移行はAIエージェントにスキルを指定して指示するだけです。たとえばClaude Codeなら、次のようなプロンプトを投げます。
Use the shopify polaris customer account extensions skill to migrate the extensions/$extensionFolder extension to version 2026-04自分のアプリでもチェックアウト系・カスタマーアカウント系のExtensionを抱えているため、この移行は他人事ではありません。手作業でコンポーネントを1つずつ置き換えるのは時間がかかるうえ、s-modalやs-text-fieldまわりで挙動の差にハマりやすい部分です。AIに下地を作らせて、自分は差分の確認と動作テストに集中する、という分担にすると現実的な工数で終わります。
公式の移行ガイドも同時に公開されているので、AI Toolkitと併せて参照してください。
参考記事参照記事が見つかりません: <a href="https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components%7D">https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components
さいごに
Shopify AI Toolkitは、AIコーディングツールでShopifyアプリを開発するなら入れておくべきツールです。
特にGraphQL APIやLiquidのバリデーションが効くのは、実務で大きな時間短縮につながります。
サードパーティのスキルやDev MCP Serverを個別に管理していた方は、公式プラグインに一本化することをおすすめします。
自動更新がつくため、Shopifyの四半期ごとのAPIリリースにも自動で追従してくれます。
チェックアウトやカスタマーアカウントのUI Extensionを持っている場合は、2026年10月1日の更新ブロックが来る前に、AI Toolkitを使ったPolaris web componentsへの移行を済ませておくことをおすすめします。
これからShopifyの開発環境を整える方は、ぜひ参考にしてみてください。