Claude CodeでShopify AI Toolkitを使う — 入れ方3種と使い分け
Shopify AI ToolkitをClaude Codeに入れる方法は、プラグイン・スキル・Dev MCPの3通りです。違いと選び方、スキルが1本に統合された経緯、テレメトリの止め方をまとめます。
Claude CodeでShopify AI Toolkitを使う — 入れ方3種と使い分け
Claude CodeにShopify AI Toolkitを入れる最短の方法は、ターミナルで claude plugin install shopify-ai-toolkit@claude-plugins-official を実行することです。Shopify AI Toolkitは、AIコーディングツールにShopifyの開発者向けドキュメント、APIスキーマ、コード検証、CLI経由のストア管理をつなぐ仕組みです。
入れ方は3種類あります。プラグイン、エージェントスキル、Dev MCPサーバーです。どれを選んでも、Claude Codeが「Shopifyのどのsurfaceの話か」を判断し、現行のリファレンスを引いてからコードを書く流れは同じです。違うのは、更新の自動化、認証の要否、手元に置かれるものです。
入れ方3種はどう違うのか
要件は共通で、Node.js 18以上と対応するAIツールです。Claude Codeはその対応ツールに含まれます。
| 入れ方 | コマンド | 更新 | 向く人 |
|---|---|---|---|
| プラグイン | コマンドclaude plugin install … | 更新自動 | 向く人まず試す人、手間をかけたくない人 |
| エージェントスキル | コマンドnpx skills add Shopify/shopify-ai-toolkit | 更新手動(npx skills update) | 向く人プラグインを使えないツールも併用する人 |
| Dev MCPサーバー | コマンドclaude mcp add … | 更新@latest 指定で、npx実行時に最新を取得 | 向く人MCP経由に揃えたい人 |
Shopifyのドキュメントがプラグインを推奨している理由は、1回の導入で必要なものがまとまり、新機能も自動で入ることです。スキルは自分で管理する前提で、MCPは「ローカルで動き、認証が要らない」と説明されています。
プラグインで入れる手順
Claude Codeのシェルから、次の1行で入ります。
claude plugin install shopify-ai-toolkit@claude-plugins-officialclaude-plugins-official はAnthropic公式のマーケットプレイスです。対話セッションを一度でも開いたマシンなら登録済みで、まっさらなマシンで設定スクリプトから実行するときは、先に claude plugin marketplace add anthropics/claude-plugins-official が走ります。
インストールしたプラグインは、次回のClaude Code起動時か、開いているセッションでの /reload-plugins で読み込まれます。プラグインがMCPサーバーを同梱する仕組みは、Claude Codeのプラグイン同梱MCPサーバーの解説にあります。
入ったかどうかは、Claude Codeに次のように頼むと確かめられます。
Shopify CLIで新しいShopifyアプリをスキャフォールドしたい。使うべき手順を調べてShopifyのドキュメントは、導入後にClaudeへ頼めることとして、CLIでのアプリ作成、アプリ画面(surface)の選び方の説明、使うAPIの探索、App Store要件に照らしたレビューを挙げています。
スキルは1本に統合された
以前のToolkitは、surfaceごとに shopify-admin や shopify-liquid のような個別スキルを配っていました。現在は shopify という1本のスキルが、GraphQL Admin API、Shopify Functions、Polaris、Liquid、Hydrogen、Shopify CLIまでを受け持ちます。必要になったsurfaceの指示だけをエージェントが読む作りです。
個別スキルは非推奨で、更新も止まっています。古い手順で入れた人は、置き換えが必要です。
# 個別スキルを外す(入れていないものは飛ばされる)
npx skills remove shopify-admin shopify-liquid shopify-functions shopify-hydrogen
# 統合版を入れる
npx skills add Shopify/shopify-ai-toolkit上は削除対象のうち数個だけを書いた省略形です。ドキュメントには shopify-polaris-app-home や shopify-shopifyql など、外す対象の全名が1行で載っています。グローバルに入れた場合は、各コマンドに -g を付けます。
スキル経由はプラグインと違って自動更新されません。最新にしたいときは npx skills update を実行します。
スキルの中身は、surface別の案内表
統合された shopify スキルは、最初にどのトピックの話かを選ばせ、そのトピックの参照ファイルを読み、検索し、生成したコードを検証する、という共通の手順で動きます。トピックごとに検索の対象と検証の方法が決まっています。
| 分類 | トピックの例 |
|---|---|
| API | トピックの例admin、storefront-graphql、customer、partner、payments-apps、shopifyql |
| 拡張・UI | トピックの例functions、polaris-app-home、polaris-admin-extensions、polaris-checkout-extensions、pos-ui |
| ストアフロント | トピックの例hydrogen、liquid |
| 運用・申請 | トピックの例use-shopify-cli、app-pricing、app-store-review |
| 始め方 | トピックの例onboarding-dev、onboarding-merchant |
表は代表例で、全トピックの網羅ではありません。たとえば liquid は、テーマ向けかアプリ向けかを指定して検証できます。app-store-review は、提出前にアプリのコードベースへ準拠チェックをかけるトピックです。
この設計で効いてくるのは、検証が必須になっている点です。スキルの手順書は「生成したコードは検証してから返す」と書いていて、失敗したらエラーが指す項目を検索し、直して再検証するよう指示します。試行は3回までで、それでも通らなければ最善の結果と説明を返す、という決まりです。
Dev MCPサーバーで入れる場合
MCP経由なら、次の1コマンドです。
claude mcp add --transport stdio shopify-dev-mcp -- npx -y @shopify/dev-mcp@latest追加したら、Claude Codeを再起動して設定を読み込ませます。サーバーはローカルで動き、認証は要りません。
MCP経由の場合、Shopifyのドキュメントに載っているのは設定だけで、スキルのsurface別の手順書(SKILL.md)に当たる説明はありません。既にMCPで固めた構成にShopifyを足したいとき以外は、手順書つきのプラグインのほうが素直です。
実際に頼むときのプロンプト例
ドキュメントが具体例として挙げているのは、チェックアウト拡張の移行です。2025-10より前のAPIバージョンにあるチェックアウト拡張とカスタマーアカウント拡張は、新しいバージョンに上げるときにPolaris Web Componentsへ移す必要があります。作業は、shopify.extension.toml のバージョン更新、ReactからPreactへの変換、旧コンポーネントの置き換え、ローカル実行までと細かく、Toolkitがこの下ごしらえを肩代わりします。
extensions/my-checkout-extension を API バージョン 2026-04 に移行してドキュメントも、結果のレビューとテストが不要になるわけではないと明記しています。Claude Code側では、検証の結果を読む習慣を規約に残しておくと安定します。次はCLAUDE.mdに置く断片の例です。
## Shopify開発の規約
- Shopifyのコードを書く前にshopifyスキルで該当トピックを確認する
- 生成したGraphQL・Liquid・拡張コードは、検証コマンドが通るまで直す
- `shopify store execute` など書き込みを伴う操作は、実行前に内容を見せるLiquidのテーマ編集では、検証にShopify CLIの theme check を併用する運用が定番です。手順はClaude CodeでShopifyテーマ開発を進めるに書いています。
ストア操作は「実行する人」が決める
ToolkitのStore managementは、Shopify CLIが持つ認証済みのストア文脈を使い、対応するストア管理タスクを準備して実行する機能です。ドキュメントの言い方は「あなたが実行のタイミングを選ぶ」です。use-shopify-cli のトピックには shopify store auth と shopify store execute が含まれ、明示したストア単位の読み書きを扱います。
Claude Codeでは、書き込みを伴うコマンドを権限プロンプトで止めておくと、準備と実行を分けられます。ここは通常のBashコマンドの許可設定と同じ考え方です。
テレメトリが既定でオンになっている
導入前に知っておきたい点です。GitHubのREADMEによれば、スキルのスクリプト(search_docs.mjs、validate.mjs、log_skill_use.mjs)は、呼ばれるたびに shopify.dev/mcp/usage へ利用イベントを送ります。内容は次のとおりです。
- 検索のクエリ文と、その応答またはエラー文
- 検証したコードそのものと、API名・ファイル名などの文脈
- モデル名、クライアント名、バージョン
- 条件を満たすと、ユーザーの直近のメッセージ全文(2000字まで)
Claude Codeのプラグインは、PostToolUse フックも登録します。Skill ツールがShopifyのスキルを呼ぶと skill_invocation イベントを送り、Claude Codeではさらに直近のプロンプト全文を付けます。ツールの入力やファイルの中身、生成コードは、このフックでは送られないと書かれています。
業務のコードや未公開の施策をプロンプトに書く環境では、オプトアウトを先に済ませます。
mkdir -p ~/.config/shopify-ai-toolkit && touch ~/.config/shopify-ai-toolkit/opt-outこの空ファイルを置く方法は、プロセスが環境変数を引き継がない場合でも効きます。環境変数で止めるなら OPT_OUT_INSTRUMENTATION=true か DO_NOT_TRACK=1 です。どちらか一方で足り、どれか1つでも「止める」と読めれば止まる仕様なので、CI側の設定で戻される心配はありません。オプトアウトするとローカルでのプロンプトの保存もなくなります。
どれを選ぶか
迷ったらプラグインです。自動更新があり、Claude Code向けの誘導も入ります。スキルを選ぶのは、Claude Code以外のツールにもShopifyの知識を配りたいときで、手動更新の手間は引き受けます。Dev MCPを選ぶのは、組織でMCPサーバーの一覧を管理していて、それ以外を増やしたくないときです。
よくあるつまずき
落とし穴
古い個別スキルが残ったまま、新しいスキルも入れた
shopify-admin などの個別スキルは更新が止まっています。残したままだと、古い指示と新しい指示が同居します。npx skills remove で外してから統合版を入れます。
落とし穴
Node.jsが古くてスクリプトが動かない
要件はNode.js 18以上です。スキルの検索・検証スクリプトは .mjs で、Node.jsで動かす前提です。node --version で先に確かめます。
落とし穴
MCPを追加したのに、ツールが出てこない
claude mcp add の後は再起動が必要です。プラグインの場合も、開いたセッションでは /reload-plugins を実行します。
まとめ
Shopify AI Toolkitは、Claude Codeに「どのAPIか、どのフィールドか、どう検証するか」を渡す層です。入れ方は、更新を任せるならプラグイン、自分で管理するならスキル、MCPで揃えるならDev MCPです。
テレメトリは既定でオンなので、扱うコードの性質に応じて先にopt-outの空ファイルを置くかどうかを決めます。ストアへの書き込みは、実行を人が握る前提で使います。