Shopify AI Toolkit入門｜MCP×Claude Code開発

Shopifyの開発者ドキュメントはボリュームが膨大だ。GraphQL Admin API、Hydrogen、Shopify CLIに、Polaris UIキット、テーマ拡張機能……。初めて触るエンジニアがハルシネーションなしのAI補完を使うのは、これまで難しかった。

2026年4月、Shopifyはその問題を正面から解決するツールを出した。Shopify AI Toolkitだ。MITライセンスのオープンソースとして公開されたこのプラグインは、Claude CodeをShopify APIドキュメント・スキーマ・CLIに直接接続する。

実際に触ってみると、インストール1コマンドというのは誇張ではなかった。

---

Shopify AI Toolkitの3つのコア機能

プラグインをインストールすると、Claude Codeに3つの能力が追加される。

機能	何ができるか	特徴
ライブドキュメント参照	ShopifyのAPIドキュメントをリアルタイムで参照	古いドキュメントに基づくハルシネーションを防ぐ
スキーマ検証	GraphQL Admin APIスキーマで生成コードを自動検証	型エラーをコーディング中に検出
CLI操作	Shopify CLIの実際の操作をエージェントから実行	アプリのデプロイや設定変更を自動化できる

MCPがここで活きている。ShopifyのDev MCPサーバーがこれらのリソースをClaude Codeに提供する構造で、2026年時点でMCPはAI開発ツールとShopify APIをつなぐ実質的な標準になっている。

Claude Codeへのインストール手順

Shopifyが推奨するのはプラグイン方式だ。自動更新がかかるため、新しい機能を都度手動で追加しなくていい。

# 動作環境: Claude Code (最新版), Node.js 18以上
# 注意: 本番環境で使用する前に、必ずテスト環境で動作確認してください。

# Claude Codeのチャットウィンドウで以下の2コマンドを実行する

# Step 1: Marketplace からプラグインを追加
/plugin marketplace add Shopify/shopify-ai-toolkit

# Step 2: インストール
/plugin install shopify-plugin@shopify-plugin

これだけだ。Claude Codeを再起動すると、Shopify APIドキュメントへのアクセス、スキーマ検証、CLI操作が使えるようになる。

個別スキルのみをインストールしたい場合

# 全機能ではなく GraphQL Admin API スキルだけを追加
npx skills add Shopify/shopify-ai-toolkit --skill shopify-admin

# 全スキル一括インストール
npx skills add Shopify/shopify-ai-toolkit

Dev MCPサーバー方式（認証不要・ローカル接続）

// Claude Code の設定ファイル（例: claude_desktop_config.json）に追記
// 動作環境: Node.js 18+
{
  "mcpServers": {
    "shopify": {
      "command": "npx",
      "args": ["-y", "@shopify/dev-mcp@latest"],
      "env": {}
    }
  }
}

Dev MCPサーバーはShopifyへの認証なしでローカルから接続でき、ドキュメント参照とスキーマ検証が使える。CI環境や社内ツールに組み込む場合はこちらが便利だ。

実際のEC開発でどう変わるか

インストール後、Claude CodeにGraphQL Admin APIを使うコードを書いてもらうと、ハルシネーションが明らかに減った。以前は「存在しないフィールド名を堂々と使う」問題が頻発していたが、スキーマ検証が走ることでその場で検出される。

// Shopify Storefront API でカート操作をするコード例
// 動作環境: Hydrogen (React), @shopify/storefront-kit-react
// 注意: 本番環境で使用する前に、必ずテスト環境で動作確認してください。

import { useFetcher } from '@remix-run/react';

// AI Toolkit経由でスキーマ検証済みのGraphQLクエリ
const ADD_TO_CART_MUTATION = `
  mutation cartLinesAdd($cartId: ID!, $lines: [CartLineInput!]!) {
    cartLinesAdd(cartId: $cartId, lines: $lines) {
      cart {
        id
        totalQuantity
        cost {
          totalAmount {
            amount
            currencyCode
          }
        }
      }
      userErrors {
        field
        message
      }
    }
  }
`;

export async function addToCart({ cartId, variantId, quantity }) {
  const response = await fetch('/api/cart', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      query: ADD_TO_CART_MUTATION,
      variables: {
        cartId,
        lines: [{ merchandiseId: variantId, quantity }],
      },
    }),
  });
  return response.json();
}

Claude CodeがAI Toolkitを通じてスキーマを参照しながらこのコードを生成するため、フィールド名の誤りや型の不一致が大幅に減る。

Hydrogenアプリ開発での具体的な使い方

以下のような指示をClaude Codeに出すと、AI Toolkitが裏で動く。

# Claude Codeへの自然言語指示の例
# 「Shopify Storefront APIを使って商品一覧を取得するHydrogenコンポーネントを作って」
# → AI ToolkitがStorefront APIスキーマを参照しながらコードを生成

# 「このGraphQLクエリのフィールドが正しいかチェックして」
# → スキーマ検証を実行して間違いがあればその場で指摘

# 「Shopify CLIでアプリをprodにデプロイして」
# → Shopify CLI操作をエージェントが代行

よくある失敗と回避策

❌ プラグインインストール後にClaude Codeを再起動しない

インストール直後はドキュメント参照機能が有効にならないことがある。

⭕ /plugin install 後は必ずClaude Codeを再起動する。

❌ Node.js 18未満の環境で使う

Dev MCPサーバーはNode.js 18以上が必要。古いNodeだとnpxコマンドでエラーになる。

⭕ node --version で確認し、必要なら nvm install 18 でアップグレード。

❌ スキーマ検証を過信して本番APIに直接リクエストする

スキーマ検証はローカルのスキーマ定義を参照する。実際のShopifyストアの設定（使えるフィールド、アクセス権）とは異なる場合がある。

⭕ 生成されたコードは必ずテストストアで動作確認してから本番に適用する。

❌ MCPサーバーをグローバルにインストールしてバージョン競合

複数のプロジェクトで異なるShopify APIバージョンを使う場合、グローバルインストールのMCPサーバーが古いスキーマを参照することがある。

⭕ npx -y @shopify/dev-mcp@latest のように毎回最新版を指定するか、プロジェクトごとにローカルインストールする。

MCPが「AI×EC開発」の標準になりつつある

Shopify AI ToolkitはMCPを前提に設計されている。これは2026年の流れを反映している。

MCPは「AIとツールをつなぐプロトコル」として、Shopify以外でも採用が広がっている。Claude DesktopからGitHub、Slack、データベースをMCP経由で操作するケースはすでに珍しくない。ShopifyがMCPを採用したことで、「ECの開発環境をAIエージェントが直接扱う」という世界に一歩近づいた。

ただ、まだ成熟しきっていない部分もある。Claude Code上のプラグインエコシステム自体がまだ発展途上で、Shopify AI Toolkitの機能も今後拡張される予定だ。現時点での制限として、Shopify Functionsの開発支援はまだ限定的で、Hydrogenに特化した最適化パターンの参照はカバーしきれていない。

参考・出典

• Shopify AI Toolkit — Shopify Developers — Shopify公式ドキュメント（参照日: 2026-04-09）
• Shopify/Shopify-AI-Toolkit — GitHub — OSSリポジトリ（参照日: 2026-04-09）
• Shopify AI Toolkit Explained: Dev MCP, Cursor, and Claude Code — Weaverse Blog（参照日: 2026-04-09）

---

MCPの全体像はMCP完全ガイドで詳しく解説しています。

あわせて読みたい:

• AIエージェント構築完全ガイド — MCPを含むエージェント設計パターンの全体像
• Claude Code×GitHub Actions｜CI/CD自動化の全手順 — Shopify CLIと組み合わせられるCI/CDパターン

著者

佐藤傑（さとう・すぐる）
株式会社Uravation代表取締役。X（@SuguruKun_ai）フォロワー10万人超。100社以上の企業向けAI研修・導入支援。著書累計3万部突破。SoftBank IT連載7回執筆（NewsPicks最大1,125ピックス）。
ご質問・ご相談はお問い合わせフォームからお気軽にどうぞ。