【緊急】Shopify AI Toolkit — Polaris Web Components への移行ガイド

Shopify dev docs 2026/06/12

Shopify 公式 の案内

Shopify AIツールキットを使用して拡張機能をPolarisウェブコンポーネントにアップグレードします。

どのように対応をしたら良いのかを解説

Shopify AI Toolkit — Polaris Web Components への移行ガイド

Shopifyは2026年6月12日、Shopify AI Toolkit がチェックアウトおよびカスタマーアカウントUI拡張機能を新しいAPIバージョン（Polaris Web Components）へ移行する機能に正式対応したことを発表しました。

この記事では「なぜ移行が必要か」「AIが何を自動化してくれるか」「実際にどう進めるか」を順を追って解説します。

なぜ移行が必要なのか

Shopifyでは、拡張機能が1年以上古いAPIバージョンを使用している場合、Shopify CLIがアプリのアップデートをブロックする仕様になっています。

具体的には以下のとおりです。

• APIバージョン 2025-07 以前を使用している拡張機能が1つでもあると、そのアプリ全体の更新がブロックされます。
• 2026年10月1日を過ぎると、新機能の追加・バグ修正・価格変更など、あらゆるアップデートが不可能になります。
• APIバージョン 2025-10 以降はすべてデフォルトで Polaris Web Components を使用します。

旧バージョンと Polaris Web Components の違い

Shopify AI Toolkit とは

Shopify AI Toolkit は、AIコーディングエージェントをShopifyの開発プラットフォームに接続するツールセットです。対応エージェントは Claude Code・Cursor・Gemini CLI・VS Code などです。

エージェントがShopifyのドキュメント・APIスキーマ・コードバリデーションを直接参照できるようになるため、「推測」ではなく「正確な実装」が可能になります。

AIエージェントが自動化する移行作業

Shopify AI Toolkit と強化された開発者ドキュメントを組み合わせることで、以下の3つの移行ステップをエージェントが自動処理します。

1. React → Preact への変換
   importの書き換えやJSX構文の調整など、React依存部分をPreactへ自動変換します。
2. レガシーコンポーネント → Polaris Web Components への置換
   旧来の独自コンポーネントを対応するPolaris Web Componentsへ自動でマッピング・置換します。プロパティ名やイベント名の変更も含めて対応します。
3. 拡張機能 API の更新
   APIバージョン変更に伴うインターフェース・フックの変更を検出・修正し、最新バージョンに沿った正しいAPI呼び出しへ書き換えます。

インストール方法

方法① プラグイン経由（推奨）

1コマンドでインストールでき、自動アップデートに対応しています。使用しているAIツールに合わせてコマンドを実行してください。

Claude Code

claude plugin install shopify-ai-toolkit@claude-plugins-official

Cursor（Cursor Chat 内で実行）

/add-plugin shopify

Gemini CLI

gemini extensions install https://github.com/Shopify/shopify-ai-toolkit

VS Code（Command Palette から実行）

Chat: Install Plugin From Source
# ソースURL: https://github.com/Shopify/shopify-ai-toolkit

方法② エージェントスキルを手動追加

必要なスキルだけを選んで追加したい場合はこちら。自動更新はされません。

全スキルを一括インストール

npx skills add Shopify/shopify-ai-toolkit

特定スキルのみ（例：GraphQL Admin API）

npx skills add Shopify/shopify-ai-toolkit --skill shopify-admin

方法③ Dev MCP サーバー経由

MCPで接続する方法です。ローカルで動作し、認証は不要です。

Claude Code

claude mcp add --transport stdio shopify-dev-mcp -- npx -y @shopify/dev-mcp@latest

Cursor・VS Code（mcp.json に追加）

{
  "mcpServers": {
    "shopify-dev-mcp": {
      "command": "npx",
      "args": ["-y", "@shopify/dev-mcp@latest"]
    }
  }
}

移行ドキュメント・参考リンク

AI Toolkitインストール後は、拡張機能の種類に応じた移行ドキュメントを参照してAIエージェントを実行してください。

• Checkout UI 拡張機能 移行ドキュメント
• Customer Account UI 拡張機能 移行ドキュメント
• Shopify AI Toolkit 公式ドキュメント
• Shopify Developer Changelog（元記事）

まとめ：今すぐやるべき4つのアクション

1. 期限を確認する：2026年10月1日が絶対期限。カレンダーに入れましょう。
2. 拡張機能を確認する：自分のアプリにチェックアウト・カスタマーアカウントUI拡張機能があるか確認する。
3. AI Toolkit を導入する：使用中のAIツールにプラグインをインストールして移行スキルを有効化する。
4. 移行を実行する：ドキュメントに従いAIエージェントを実行。移行・テスト・デプロイまで完了させる。