はじめに
- Claude CodeやCursorにGraphQLを書かせたら、存在しないフィールドを生成された
- 古いAPIバージョンのコードが出てきて、動かない
- AI Toolkitを入れているが、最近の変更で何が変わったのか分からない
このような方のための記事です。
この記事では、Shopify公式のAI Toolkitの概要と、Claude Codeへの入れ方を解説します。2026年9月にスキルが1つにまとめられた変更と、今どの方法で入れると最新版になるのかも、2026年10月2日時点の情報で整理しました。
Shopify AI Toolkitとは
Shopify AI Toolkitは、AIのコーディングツールをShopifyにつなぐ公式のパッケージで、2026年4月に公開されました。入れると、AIが推測ではなく、Shopifyの最新のドキュメントとAPIの定義を見ながらコードを書くようになります。
できることは次の4つです。
- ドキュメントとAPIの定義を引く：Admin APIのGraphQL、Shopify Functions、Polaris、Liquid、Hydrogen、Shopify CLIなど
- コードを検証する：GraphQLのクエリ、Liquidのテンプレート、UI拡張のコードを、Shopifyの定義と照らし合わせて確かめる
- ストアを操作する：ログインしたShopify CLIを通して、開発ストアの商品や在庫を読み書きする
- App Storeの要件を確かめる：アプリのコードを、App Storeの審査の要件と照らし合わせる
対応しているツールは、Claude Code、Codex、Cursor、VS Code、Antigravity CLIなどです。
2026年9月25日、スキルが1つの shopify にまとまった
これまでのAI Toolkitは、shopify-admin、shopify-functions、shopify-liquidのように、分野ごとのスキルに分かれていました。2026年9月25日の更新で、これらは1つのshopifyスキルにまとめられています。
| 統合前 | 統合後 | |
|---|---|---|
| スキル | 分野ごとに最大21個 | shopify と ucp の2つ |
| 頼み方 | 使うスキルの名前を指定することがあった | 名前を指定しなくてよい |
| Dev MCP | そのまま使える | そのまま使える |
まとめた理由は、スキルが多いとAIがどれを使うか迷ったり、スキルの説明が長くなって途中で切れたりしていたためです。
プラグインで入れている場合、多くのツールでは自動で新しい版に更新されます。npx skillsで入れている場合は、古いスキルを消してから入れ直します。
npx skills remove -y shopify-admin shopify-app-pricing shopify-app-store-review shopify-custom-data shopify-customer shopify-dev shopify-functions shopify-hydrogen shopify-liquid shopify-onboarding-dev shopify-onboarding-merchant shopify-partner shopify-payments-apps shopify-polaris-admin-extensions shopify-polaris-app-home shopify-polaris-checkout-extensions shopify-polaris-customer-account-extensions shopify-pos-ui shopify-shopifyql shopify-storefront-graphql shopify-use-shopify-cli
npx skills add Shopify/shopify-ai-toolkit --skill shopify
全体に入れていた場合は、どちらのコマンドにも -g を付けます。
Claude Codeへの入れ方
Claude Codeには2つの入れ方があり、2026年10月2日時点では、どちらで入れたかで入る版が違います。
Shopifyのマーケットプレイスから入れると最新版
Claude Codeで次の2つを実行します。今の最新版の2.1.0が入り、スキルは統合後のshopifyです。
/plugin marketplace add Shopify/shopify-ai-toolkit
/plugin install shopify-plugin@shopify-ai-toolkit
Claudeの公式マーケットプレイスから入れる方法
Shopifyの公式ドキュメントでは、ターミナルで次のコマンドを実行する方法が案内されています。
claude plugin install shopify-ai-toolkit@claude-plugins-official
ただし、Claudeの公式マーケットプレイスは10月2日時点で、統合前の9月18日の版を指しています。この方法で入れると、分野ごとに分かれた古いスキルが入ります。自分の環境もこの方法で入れていて、まだ統合前のスキルのままでした。
今すぐ統合後の版を使いたい場合は、Shopifyのマーケットプレイスから入れてください。両方から入れると同じ役割のスキルが重なるので、どちらか一方にします。
ほかのツールに入れる場合
- Cursor：チャットで
/add-plugin shopify - Codex：ターミナルで
codex plugin add shopify@openai-curated - VS Code：コマンドパレットで「Chat: Install Plugin From Source」を実行し、
https://github.com/Shopify/shopify-ai-toolkitを入力 - スキルだけ入れる：
npx skills add Shopify/shopify-ai-toolkit - Dev MCPだけ使う：
claude mcp add --transport stdio shopify-dev-mcp -- npx -y @shopify/dev-mcp@latest
送られるデータと、止め方
AI Toolkitのスクリプトは、初期設定のまま使い方のデータをshopify.devに送ります。送られるのは、検索した語句、検証したコード、使っているAIのモデルとツールの名前などです。Claude Codeでは、Shopifyのスキルが動いたときに、直前に入力したプロンプトもそのまま送られます。
送らないようにするには、環境変数 OPT_OUT_INSTRUMENTATION=true を設定するか、空のファイル ~/.config/shopify-ai-toolkit/opt-out を作ります。ツールによっては環境変数がスクリプトまで届かないので、確実に止めるならファイルを作る方法が向いています。
mkdir -p ~/.config/shopify-ai-toolkit && touch ~/.config/shopify-ai-toolkit/opt-out
クライアントの案件で使うなら、プロンプトにお客様の情報を書かないことも含めて、止めておくと安心です。
サードパーティのスキルから移行した体験
以前は、コミュニティが作ったshopify-developmentスキルと、手動で追加したDev MCPを併用していました。公式のプラグインに替えて感じた違いは3つです。
- 情報が新しい：サードパーティのスキルはSKILL.mdに書かれた文章のままで、APIが変わっても手で直さない限り古いままです。公式は最新のドキュメントとAPIの定義を引きます
- 検証できる：GraphQLやLiquidを、Shopifyの定義と照らし合わせて確かめられます
- Shopifyが更新する：個人が保守するスキルと違い、四半期ごとのAPIの更新に追いついてくれます
移行は、公式プラグインを入れ、/mcp で重複がないかを見て、古いスキルと手動で足したDev MCPを消すだけで、10分もかかりませんでした。/plugin が使えないときは、claude --version でバージョンを確かめ、claude update で最新にしてください。
Polaris web componentsへの移行もAIに任せられる
2026年6月の更新で、チェックアウトとアカウントページのUI拡張を、Polaris web componentsを使う新しいAPIバージョンへ移す作業をAIに任せられるようになりました。ReactからPreactへの書き換え、部品の置き換え、拡張のAPIの更新をまとめて進めてくれます。
この移行は、もう先延ばしにできません。Shopifyの告知では、2026年10月1日から、チェックアウトとアカウントページのUI拡張がAPIバージョン2025-07以前のままのアプリは、更新を公開できなくなっています。
統合後の版では、スキルの名前を指定せずに次のように頼みます。
Migrate the extensions/my-extension extension to the latest API version with Polaris web components
自分のアプリでもチェックアウトとアカウントページの拡張を抱えていて、部品を1つずつ置き換える作業は、s-modalやs-text-fieldまわりの細かな違いでつまずきやすい部分です。下地はAIに作らせて、自分は差分の確認と動作のテストに集中する分担にすると、現実的な手間で終わります。
さいごに
AI Toolkitは、AIでShopifyの開発をするなら入れておきたいツールです。9月の統合でスキルが1つになり、AIが迷いにくくなりました。今から入れるなら、統合後の版が入るShopifyのマーケットプレイスからがおすすめです。あわせて、送られるデータの設定も確認しておいてください。
統合前のスキルを1つずつ解説した記事も残しています。
参考記事Shopify AI Toolkitの16スキルを全解説 ― SKILL.mdに書かれた指示書の中身を読む
Shopifyアプリの開発については、お問い合わせからお気軽にご相談ください。