Blog

ブログ

home > ブログ > Shopify AI Toolkit メモ
Shopify

Shopify AI Toolkit メモ

結論

この環境では、Shopify AI Toolkit は使える状態です。

ただし、Claude Code のような /plugin install ... 方式ではありません。Codex では、Shopify 公式ドキュメント上でも skills と MCP のみ対応です。

公式ドキュメント: https://shopify.dev/docs/apps/build/ai-toolkit

何がややこしいのか

Shopify AI Toolkit には導入方法が複数あります。

方法主な対象Codex で使えるか
PluginClaude Code / Cursor / Gemini CLI / VS Code使えない
Agent skillsCodex など使える
Dev MCP serverCodex など使える

つまり、公式ページに出てくるこのコマンドは Claude Code 用です。

/plugin marketplace add Shopify/shopify-ai-toolkit
/plugin install shopify-plugin@shopify-ai-toolkit

Codex には /plugin コマンドがありません。そのため、この通りには実行できません。

Codex での公式手順は、MCP サーバーを設定する方法です。

[mcp_servers.shopify-dev-mcp]
command = "npx"
args = ["-y", "@shopify/dev-mcp@latest"]

現在の状態

このPCでは、Codex の設定ファイルに Shopify Dev MCP がすでに登録されています。

設定ファイル:

~/.codex/config.toml

登録済みの内容:

[mcp_servers.shopify-dev-mcp]
command = "npx"
args = ["-y", "@shopify/dev-mcp@latest"]

要件も満たしています。

  • Node.js: v20.20.0
  • Shopify AI Toolkit の要件: Node.js 18 以上

入っている Shopify skills

Shopify AI Toolkit の skills は、グローバルにインストール済みです。

npx skills add Shopify/shopify-ai-toolkit --yes --global

入っている主な skills:

~/.agents/skills/shopify-admin
~/.agents/skills/shopify-app-store-review
~/.agents/skills/shopify-custom-data
~/.agents/skills/shopify-customer
~/.agents/skills/shopify-dev
~/.agents/skills/shopify-functions
~/.agents/skills/shopify-hydrogen
~/.agents/skills/shopify-liquid
~/.agents/skills/shopify-onboarding-dev
~/.agents/skills/shopify-onboarding-merchant
~/.agents/skills/shopify-partner
~/.agents/skills/shopify-payments-apps
~/.agents/skills/shopify-polaris-admin-extensions
~/.agents/skills/shopify-polaris-app-home
~/.agents/skills/shopify-polaris-checkout-extensions
~/.agents/skills/shopify-polaris-customer-account-extensions
~/.agents/skills/shopify-pos-ui
~/.agents/skills/shopify-storefront-graphql
~/.agents/skills/shopify-use-shopify-cli

このため、Shopify Admin API、Liquid、Hydrogen、Functions、Checkout UI Extensions、Shopify CLI まわりの相談や実装に使えます。

これで何ができるか

Shopify AI Toolkit は、AI コーディングツールに Shopify の公式情報を参照させるための補助ツールです。

できること:

  • Shopify 公式ドキュメントを前提に実装方針を確認する
  • Admin API や Storefront API などの仕様に沿ってコードを書く
  • Liquid の section schema や theme app extension の構成を確認する
  • Shopify Functions や UI Extensions の実装を進める
  • Shopify CLI や store execute を使う作業の手順を整理する
  • 古い知識や推測だけで Shopify 実装を進めるリスクを減らす

これだけではできないこと

Shopify AI Toolkit は、Shopify アプリ本体でもテーマ本体でもありません。

これだけでは次のことは起きません。

  • Shopify ストアへ自動ログインする
  • テーマを自動デプロイする
  • アプリを自動作成する
  • shopify.app.toml や package.json を自動生成する
  • ストアのデータを勝手に変更する

あくまで、Codex が Shopify 開発をするときに公式情報や専用スキルを使えるようにする設定です。

使い方

特別なコマンドを打つというより、普通に Shopify の作業を依頼します。

例:

Shopify Admin API の最新仕様に合わせて product metafield 更新処理を書いて
この Liquid section schema が Shopify のルールに合っているか確認して
Shopify Functions で割引ロジックを作りたい
theme app extension の構成を確認して

Codex 側が必要に応じて Shopify skills や MCP を使います。

再起動について

Codex CLI の再起動は、基本的にこれで合っています。

exit
codex

ただし、既存セッションを resume すると、セッション開始時のツール状態を引きずることがあります。

MCP の見え方を確認したい場合は、exit 後に新しい Codex セッションを開始して、Shopify の質問を投げるのが一番わかりやすいです。

このリポジトリでの注意

このリポジトリには、計画メモ、データ、画像、shopify-theme/ ディレクトリがあります。

一方で、現時点ではリポジトリ直下に Shopify アプリ用の package.json や shopify.app.toml がある構成ではありません。

つまり、このリポジトリは今のところ「Shopify アプリの完成済み scaffold」ではありません。必要になったら、アプリ scaffold や設定ファイルは別途追加します。

Shopify AI Toolkit は、その実装や判断を手伝うための補助設定です。

確認コマンド

Shopify Dev MCP が Codex 設定に入っているか確認するには:

codex mcp list

個別に確認するには:

codex mcp get shopify-dev-mcp

Node.js の確認:

node -v

Shopify MCP パッケージを取得できるか確認:

npx -y @shopify/dev-mcp@latest

このコマンドは、直接実行すると待機状態になることがあります。MCP サーバーとして標準入出力で待つためです。止める場合は Ctrl+C で終了します。

一覧へ戻る