Shopify AI Toolkitとは？Claude Codeでの導入手順とサードパーティスキルからの移行体験

はじめに

Shopifyアプリを開発していて、こんな経験はないでしょうか。

Claude CodeやCursorにGraphQLクエリを書かせたら、存在しないフィールドを平気で生成された
古いAPIバージョンのコードが出力されて、動かない
コード書き方を聞いたら、微妙に構文が違う

AIコーディングツールはShopify開発を大幅にスピードアップしてくれますが、「推測」で書いたコードが動かないケースは日常的に発生します。

2026年4月、Shopifyが公式にリリースしたAI Toolkitは、まさにこの問題を解決するためのツールです。

この記事では、AI Toolkitの概要と、実際にClaude Codeでセットアップした流れを解説します。サードパーティのスキルから公式プラグインに移行した実体験もあわせて紹介します。

外部記事Shopify AI ToolkitThe AI Toolkit connects your AI tools to Shopify's dev platform and store management capabilities via plugin, skills, or MCP server.shopify.dev

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 IDEsAgent plugins/extensions for CLIs and IDEs. Contribute to Shopify/Shopify-AI-Toolkit development by creating an account on GitHub.github.com

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-ToolkitAgent plugins/extensions for CLIs and IDEs. Contribute to Shopify/Shopify-AI-Toolkit development by creating an account on GitHub.github.com

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の開発環境を整える方は、ぜひ参考にしてみてください。