shopify-theme-inspector

Shopify Theme Inspector MCP

Shopify のテーマが遅い理由を AI アシスタントに尋ねると、修正が必要な Liquid ファイルと行を示すレポートが得られます。

Shopify Theme Inspector MCP は、Shopify のサーバーサイド Liquid プロファイラーを、Codex、Claude Desktop、Cursor、Windsurf、VS Code などの AI ツールに接続します。実際のストアフロントを測定して、処理コストの高いテンプレートや繰り返し実行される処理を見つけ、ページを比較し、フレームグラフのデータを読みやすい推奨事項にまとめます。

レポートの作成に、プログラマーである必要はありません。 お使いの AI アプリが MCP に対応していれば、設定は主にコピー、貼り付け、サインイン、質問だけです。

メモ

これは非公式のコミュニティプロジェクトです。Shopify との提携関係はなく、Shopify のサポートも受けていません。

Shopify ストアのオーナーの方はこちら

このツールは、実用的な次の疑問に答えるのに役立ちます。

ページを顧客に送信する前に、Shopify の処理負荷を高めているテーマの箇所はどこですか？

この疑問を、普段使う言葉で尋ねることができます。AI アシスタントが技術的なチェックを実行し、Shopify のプロファイリングデータを読み取り、フレームグラフを理解していなくても調査結果がわかるように説明します。

たとえば、レポートでは次のようなことがわかります。

• ホームページのセクションで、大量のサーバーサイド処理が実行されています。
• 同じ商品、メニュー、価格、画像のコードが何度もレンダリングされています。
• パフォーマンスプロファイルの中で最も遅い部分に、サードパーティ製アプリのブロックが頻繁に現れています。
• あまり重要でないコードより先に、コレクションまたは商品テンプレートを調査する必要があります。
• 最近のテーマの変更によって、Liquid のレンダリング時間が改善したのか、悪化したのか、あるいは大きな変化がなかったのかを確認できます。

結果は、優先順位付きの調査計画として提示されるため、ご自身で理解したり、Shopify 開発者に共有したりできます。「ストアの動作が遅く感じる」という感覚を、調査すべき Liquid ファイル、セクション、スニペット、処理に関する根拠に置き換えるのに役立ちます。

重要

MCP は、テーマの潜在的なボトルネックを診断して説明します。ライブテーマを自動的に編集または公開することはありません。テーマ開発者がコード変更を確認、テストし、安全にデプロイする必要があります。できれば、まずテーマの複製で行ってください。

「MCP」とは何ですか？

MCP は Model Context Protocol の略です。簡単に言うと、AI アシスタントに特定のツールセットへのアクセスを提供する方法です。

この MCP がなければ、通常、AI アシスタントはストアの Shopify Liquid パフォーマンスプロファイルを直接リクエストできません。この MCP を使うと、アシスタントは認証済みの読み取り専用プロファイリングチェックを実行し、結果についてユーザーと話し合えます。

ローカルブリッジとして考えてください。

You ask a question
        ↓
Your AI assistant chooses the right inspection tool
        ↓
Shopify returns Liquid profiling data for the requested page
        ↓
The AI explains the evidence and suggests what to investigate

Shopify ビジネスにどのように役立つか

状況	MCP による支援
ホームページの表示が遅い	サーバー側のレンダリング時間を最も多く消費している Liquid セクション、スニペット、処理を特定します。
カタログの拡大に伴い、コレクションページの表示が遅くなった	ページを比較し、商品、メニュー、フィルター、ループで繰り返し行われている処理を調べます。
アプリをインストールまたは削除した	アプリ関連のテーマブロックが、プロファイル内の処理コストの高い部分に含まれているかを示します。
エージェンシーや開発者がテーマを最適化した	プロファイルの履歴を保存し、作業前後の結果を比較できます。
どこから始めればよいかわからない	ボトルネックの可能性が高い箇所をランク付けするので、チームは影響の大きい箇所から調査できます。
開発者への依頼内容をまとめる必要がある	技術的な根拠と、入手できる場合は関連ファイルの情報を含む、読みやすい Markdown または CSV のレポートを作成します。
ページの種類によって挙動が異なる	ホームページ、コレクション、商品、カートなど、公開ストアフロントの URL を比較します。

Liquid のボトルネックを特定して解消すると、Shopify のサーバー側でのテーマレンダリング処理を減らせる場合があります。ただし、このツールは、特定の Lighthouse スコア、Core Web Vitals の結果、検索順位、売上増加を保証するものではありません。こうした結果は、画像、JavaScript、アプリ、ネットワーク状況、顧客のデバイス、テーマのデザインなど、さまざまな要因にも左右されます。

検査では何が行われますか？

1. ページを選択します。 ホームページ、コレクション、商品などを指定します。
2. Shopify にサインインします。 対象ストアへのアクセスが許可されたアカウントを使用します。
3. MCP が読み取り専用の Liquid プロファイルをリクエストします。
4. Shopify がタイミングデータを返します。 テーマがサーバー上でどのようにレンダリングされたかが示されます。
5. AI アシスタントがプロファイルを説明し、 重要度の高い可能性がある順に調査結果を整理します。
6. 変更内容を決めるのは、あなたまたは開発者です。 MCP がテーマを変更することはありません。
7. 安全にテーマを更新した後、プロファイルを再実行し、 結果が改善したかを確認します。

より信頼性の高い比較を行うには、同じページのプロファイルを複数回実行してください。Shopify のインフラストラクチャやキャッシュの状態によって、実行ごとに通常のばらつきが生じることがあります。

何を検査できますか？

• 検査する権限のある Shopify ストアの任意のページをプロファイルできます。
• 実行速度の遅い Liquid セクション、スニペット、ブロック、タグ、アプリ埋め込みを説明します。
• Shopify が情報を提供する場合、関連するテーマファイルと行番号を示します。
• 2 つのページを比較するか、最大 10 ページを遅い順にランク付けします。
• レンダリングの繰り返し、コストの高い検索処理、重いテンプレートなど、よく見られるパターンを検出します。
• プロファイルの履歴を保存し、テーマの変更が役立ったかどうかを測定できます。
• レポートを Markdown、CSV、または Speedscope JSON としてエクスポートします。
• AI アシスタントを通じて結果を読み取り、説明します。

プロファイリングは読み取り専用です。Shopify にパフォーマンスデータをリクエストしますが、テーマの編集や公開は行いません。

始める前に

以下が必要です。

1. Node.js 18 以降。 インストールされていない場合は、nodejs.org から LTS バージョンをダウンロードしてください。
2. Shopify へのサインインに使用する Google Chrome または Chromium。
3. ローカル MCP サーバーに対応した AI アプリ。
4. プロファイルを取得するストアへのアクセスが許可された Shopify アカウント。

npm パッケージを使用する場合、このリポジトリをダウンロードする必要はありません。

npm パッケージの詳細

MCP は npm で公開パッケージとして配布されているため、対応する AI アプリケーションがダウンロードして起動できます。

詳細	値
パッケージ	shopify-theme-inspector-mcp
現在のリリース	0.5.1
ランタイム	Node.js 18 以降
ライセンス	MIT
ソースコード	GitHub リポジトリ
MCP Registry の識別子	io.github.dragnoir/shopify-theme-inspector
MCP 接続タイプ	ローカル STDIO プロセス

以下の例では npx -y shopify-theme-inspector-mcp@latest を使用します。npx は必要に応じて公開パッケージをダウンロードし、MCP をローカルで起動します。グローバルインストール、リポジトリのクローン、npm アカウントは必要ありません。

公開されている最新バージョンを確認するには、次のコマンドを実行します。

npm view shopify-theme-inspector-mcp version

@latest を使用すると、現在の npm リリースが自動的に選択されます。再現性のある環境が必要なチームは、[email protected] などの固定バージョンに置き換えることができます。

Codex に接続する

ターミナルを開いて、次のコマンドを実行します。

codex mcp add shopify-theme-inspector -- npx -y shopify-theme-inspector-mcp@latest

Codex を再起動します。次のコマンドでサーバーが登録されていることを確認できます。

codex mcp list

次に、次のように依頼します。

shopify-theme-inspector の health_check ツールを使って、結果を表示してください。

Codex はローカル MCP 設定を ~/.codex/config.toml に保存します。同じ Codex ホスト上では、Codex アプリ、CLI、IDE 拡張機能でこの設定が共有されます。対応する Codex インターフェースでは、Settings → MCP servers からサーバーを追加することもできます。現在の設定オプションについては、公式の Codex MCP ドキュメントを参照してください。

Claude Code に接続する

ターミナルを開いて、次のコマンドを実行します。

claude mcp add --transport stdio --scope user shopify-theme-inspector -- npx -y shopify-theme-inspector-mcp@latest

--scope user オプションを指定すると、Claude Code のすべてのプロジェクトで MCP を利用できます。次のコマンドで接続を確認します。

claude mcp list

Claude Code 内で /mcp を実行して、サーバーとそのツールを確認することもできます。次に、次のように依頼します。

shopify-theme-inspector の health_check ツールを使って、結果を説明してください。

スコープ、サーバー管理、トラブルシューティングについては、公式の Claude Code MCP ドキュメントを参照してください。

Claude Desktop に接続する

Claude Desktop は、macOS または Windows でこのパッケージをローカル MCP サーバーとして実行できます。

1. Node.js 18 以降をインストールします。
2. Claude Desktop → Settings → Developer → Edit Config を開きます。
3. mcpServers オブジェクト内に、以下の設定を追加します。
4. ファイルを保存し、Claude Desktop を完全に終了してから再度開きます。

{
  "mcpServers": {
    "shopify-theme-inspector": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "shopify-theme-inspector-mcp@latest"]
    }
  }
}

すでに他の MCP サーバーを設定している場合は、その設定を保持し、shopify-theme-inspector のエントリだけを追加してください。2 つ目の mcpServers オブジェクトは作成しないでください。

再起動後、チャットボックスの + ボタンから Connectors メニューを開き、ツールを利用できることを確認します。次に、Claude に次のように依頼します。

Shopify Theme Inspector の health_check を使って、すべての準備が整っているか説明してください。

設定ファイルは通常、次の場所にあります。

• Windows: %APPDATA%\Claude\claude_desktop_config.json
• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

ローカルサーバーを Claude Desktop に接続する方法については、公式の MCP ガイドを参照してください。

その他の MCP アプリでのセットアップ

AI アプリケーションの設定で MCP Servers、Tools、または Integrations を探し、次の情報でローカル／STDIO サーバーを追加します。

• Name: shopify-theme-inspector
• Command: npx
• Arguments: -y、shopify-theme-inspector-mcp@latest

アプリから JSON の入力を求められた場合は、次の内容を使用します。

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

サーバーを保存した後、AI アプリを再起動します。

最初のホームページレポート

以下のプロンプトを 1 つずつ AI アシスタントにコピーします。例のドメインを自分のストアのドメインに置き換えてください。

1. 接続を確認する

Shopify Theme Inspector の health_check を使って、結果を説明してください。

2. Shopify にサインインする

https://example-store.com/ にはログインツールを使用してください

Chrome／Chromium ウィンドウが開きます。ストアへのアクセス権を持つ Shopify アカウントでサインインしてください。

すでにサインインしている Chrome プロファイルを再利用したい場合は、次のように依頼してください。

既存の Chrome プロファイルを使って、https://example-store.com/ にログインしてください。

AI は login_in_chrome に続けて complete_login_in_chrome を使用できます。ご利用の AI アプリによっては、Chrome のアドレスバーに表示される最後のコールバック URL をコピーするよう求められることがあります。その URL は一時的な非公開ログイン情報として扱い、ログインを開始したローカル MCP ツールにのみ渡してください。

3. 読みやすい監査レポートを依頼する

ホームページの詳細なパフォーマンスレポートを作成してください。調査結果を平易な英語で説明し、影響度の高い順に修正項目を並べ、関連する Liquid ファイルと行を記載してください。

これだけで開始できます。AI がプロファイリングツールを選び、結果をレポートにまとめます。

誰でも使える便利なプロンプト

ホームページの最大の問題を見つける

https://example-store.com/ のホームページをプロファイリングし、最初に修正すべき重要な点を3つ教えてください。

ページを比較する

https://example-store.com/ の / と /collections/all を比較し、一方のページが遅い理由を説明してください。

複数のページを確認する

https://example-store.com/ の /、/collections/all、/products/example、/cart をプロファイリングしてください。遅い順に並べてください。

テーマの最適化を測定する

https://example-store.com/ の / のプロファイル履歴を表示し、パフォーマンスが向上しているか教えてください。

共有可能なレポートを作成する

https://example-store.com/ のホームページのパフォーマンスレポートを Markdown でエクスポートしてください。

開発者または制作会社向けのレポートを作成する

https://example-store.com/ のホームページをプロファイリングしてください。Shopify 開発者に引き継ぐためのレポートを作成してください。ストアオーナー向けの要約、各調査結果の根拠、関連する Liquid ファイルと行、推奨する修正、変更前に確認すべきリスク、変更前後のテスト計画を含めてください。テーマは編集しないでください。

自分のストアをプロファイリングする前に、期待される出力を把握するには、サニタイズ済みのホームページレポート例をご覧ください。架空のストアデータを使用しており、マーチャント情報や認証データは含まれていません。

ビジネス上の判断とコード変更を切り分ける

ホームページのプロファイルを確認し、推奨事項を次のように分けてください。ストアオーナーが判断できること、Shopify 開発者が調査すべきこと、テーマを変更する前にさらなる根拠が必要なこと。

Shopify の開発者は必要ですか？

セットアップを進めたり、プロファイルをリクエストしたり、オーナー向けのレポートを読んだりするために、プログラミングを理解している必要はありません。AI アシスタントは技術用語を説明し、わかりやすい依頼内容をまとめるお手伝いをします。Node.js のインストールやターミナルの使用に不安がある場合は、開発者や技術チームのメンバーに、一度だけ必要なセットアップを依頼してください。

推奨事項を実装する際は、通常、Shopify テーマの開発者に依頼することになります。Liquid のパフォーマンス改善は、商品カード、メニュー、価格設定、ローカライズ、分析、アプリの機能など、ストアフロントの動作に影響する可能性があります。開発者は原因を確認し、テーマの複製で変更を加え、ストアフロントをテストして、変更が安全であると確認できた後にのみ公開できます。

役に立つレポートには、次の内容が含まれている必要があります。

• **オーナー向けの概要：**何を調査したのか、そしてその結果が重要な理由。
• **優先順位を付けた調査結果：**今すぐ対応すべきこと、後で対応すべきこと、またはさらに証拠が出てきた場合にのみ対応すべきこと。
• **根拠：**Shopify から取得できる場合は、処理時間、繰り返し回数、テンプレート名、ファイルや行の情報。
• **推奨アクション：**単に「テーマを最適化してください」と指示するのではなく、開発者が調査すべき内容。
• **リスクとトレードオフ：**引き続き動作させる必要がある機能やビジネス上の動作。
• **検証計画：**変更後にページを再度プロファイルし、テストする方法。

推奨事項は調査の手がかりとして扱い、テーマやアプリのコードを削除する許可と見なさないでください。頻繁にレンダリングされるコンポーネントでも、ショッピング体験に不可欠な場合があります。

AI が調査できる内容

ツール	機能
health_check	MCP サーバーが動作していることを確認し、その機能を一覧表示します。
get_auth_status	ストアへのログインが有効かどうかを表示します。
login	専用のブラウザーセッションで Shopify Identity のサインインを開きます。
login_in_chrome	既存の Chrome プロファイルでサインインを開始します。
complete_login_in_chrome	既存の Chrome でのサインインフローを安全に完了します。
logout	ストアのローカルに保存された認証情報を削除します。
profile_page	Shopify Liquid のフレームグラフ全体を返します。
get_profile_summary	読みやすい合計値、上位ノード、テンプレート別の内訳を返します。
get_bottlenecks	パフォーマンスのパターンを見つけ、修正方法を提案します。
find_slow_templates	指定したしきい値を超えるセクションとスニペットを一覧表示します。
compare_pages	2 つのページをプロファイルし、違いを表示します。
batch_profile	最大 10 ページをプロファイルし、順位付けします。
get_profile_history	保存された実行結果におけるレンダリング時間の変化を表示します。
export_profile	Markdown、CSV、または Speedscope JSON 形式でエクスポートします。
login_legacy	Admin API によるテーマファイルへのアクセスに必要な、オプションのレガシーセッションを開始します。
analyze_liquid_file	Liquid ファイルを静的にチェックします。レガシーログインが必要です。

ほとんどのユーザーには、login、get_profile_summary、get_bottlenecks、find_slow_templates があれば十分です。

結果の読み方

• Liquid の合計レンダリング時間は、Shopify のサーバー側でのテーマのレンダリング時間であり、ブラウザーでのページ読み込み全体の時間ではありません。
• 自己時間は、子要素を含めずに 1 つの処理が行った作業時間です。
• 合計時間には、ネストされた処理が行った作業時間も含まれます。
• 割合は、そのプロファイルのうちノードまたはテンプレートに割り当てられる割合を示します。
• レンダリング／イベント回数は、ループやネストされたテーマ構造内で繰り返される処理を示します。

親と子の処理時間は重複する場合があるため、各テンプレートの割合を合計して、削減できる時間として見積もらないでください。複数回プロファイルを実行し、常に上位に表示される項目を優先してください。

平易な用語集

用語	意味
テーマ	オンラインストアの見た目や動作を制御するテンプレートとコードです。
Liquid	Shopify のテンプレート言語です。ページが購入者に届く前に、Shopify のサーバー上でページのコンテンツを構築します。
テンプレート	商品ページやコレクションページなど、ページの種類ごとの基本レイアウトです。
セクション	バナー、商品グリッド、おすすめコレクションなど、テーマページの設定可能な部分です。
スニペット	商品カード、価格、アイコンなど、再利用可能な小さな Liquid コードです。
アプリブロックまたは埋め込み	ストアフロントの機能を提供するために、Shopify アプリが追加するテーマコードです。
サーバーサイドのレンダリング時間	Shopify が応答を送信する前に、Liquid テーマの処理に費やす時間です。これは、購入者が体験するページ読み込み時間全体の一部にすぎません。
ボトルネック	調査に値するほど時間を消費する作業、または繰り返し実行される作業です。
フレームグラフ	レンダリング時間の使われ方を示す技術的な可視化データです。MCP はこのデータを要約と推奨事項に変換します。
プロファイル	Shopify が特定のストアフロントページをレンダリングした方法を記録した測定結果です。

検出できる内容

推奨エンジンは、次の項目にフラグを付けます。

• all_products[handle] と、繰り返される商品／リソースの検索。
• content_for_header に関連する負荷の高い処理。
• 深い、または繰り返される Liquid ループ。
• 負荷の高いセクション、スニペット、ブロック、サードパーティ製アプリの埋め込み。
• 商品、メニュー、画像、価格、スキーマ、カートのレンダリングパターン。
• Liquid の処理時間を不釣り合いに多く消費するテンプレート。

推奨事項は出発点であり、機能を削除すべきだという自動的な証明ではありません。ビジネス上の価値とストアフロントの動作も引き続き考慮する必要があります。

プライバシーとローカルデータ

認証情報とプロファイル履歴は、MCP サーバーを実行しているコンピューター内に保存されます。

データ	デフォルトの保存場所
OAuth トークン	~/.shopify-theme-inspector/oauth-tokens.json
プロファイル履歴	~/.shopify-theme-inspector/history/

• トークンは Shopify のプロファイリングデータをリクエストするために使用されます。
• このパッケージはプロファイリング結果を別の分析サービスに送信しません。
• ご利用の AI アプリケーションには独自のデータおよびプライバシーポリシーがある場合があります。別途ご確認ください。
• OAuth コールバック URL、アクセストークン、またはローカルのトークンファイルを、課題や公開チャットに投稿しないでください。

保存済みの認証情報を削除するには、対象ストアに対して logout を実行してください。

測定対象外の項目

このパッケージは、Shopify のサーバーサイド Liquid レンダリングに重点を置いています。Lighthouse、WebPageTest、または実ユーザーの Core Web Vitals に代わるものではありません。

次の項目は直接測定しません。

• ブラウザーでの JavaScript 実行。
• 画像の転送サイズや CDN のダウンロード時間。
• フォントやサードパーティ製ブラウザースクリプト。
• CLS、INP、または実ユーザーの LCP。
• モバイルネットワークやデバイスのパフォーマンス。

パフォーマンスを包括的に改善するには、Liquid の作業にはこの MCP を、フロントエンドの作業にはブラウザーのパフォーマンスツールを使用してください。

トラブルシューティング

AI がツールを見つけられない

MCP サーバーを追加した後、AI アプリを再起動してください。Codex では、次を実行します。

codex mcp list

shopify-theme-inspector が有効になっていることを確認してください。

npx が認識されない

nodejs.org から Node.js LTS リリースをインストールし、ターミナルと AI アプリを再度開いてください。

Shopify でストアが認証されていないと表示される

AI に get_auth_status を実行するよう依頼し、その後、同じストアドメインに対してもう一度 login を実行してください。

間違った Chrome プロファイルが開く

使用する Chrome プロファイルを開いた状態にして、AI に login_in_chrome を使うよう依頼してください。それでも Chrome が別のプロファイルを選択する場合は、認証 URL を正しいプロファイルにコピーしてサインインを完了し、最終的なコールバック URL のみを complete_login_in_chrome に渡してください。

実行ごとにレポートが変わる

Shopify のインフラストラクチャやキャッシュの状態により、ある程度のばらつきは正常です。プロファイルを 3～5 回実行し、中央値と最も遅い結果を比較してください。

ブラウザーが開かない場合

Google Chrome または Chromium をインストールしてください。ヘッドレスの Linux マシンでは、Puppeteer でブラウザーのダウンロードも必要になる場合があります。

npx puppeteer browsers install chrome

ソースからインストールして実行する

このセクションは、コントリビューターおよび開発者向けです。

git clone https://github.com/dragnoir/Shopify-Theme-Inspector-MCP.git
cd Shopify-Theme-Inspector-MCP
npm install
npm run build
npm run test:run

ビルドした MCP サーバーを実行します。

node dist/index.js

MCP Inspector を開きます。

npm run inspector

仕組み

1. Shopify Identity OAuth により、認証済みの Shopify アカウントを認証します。
2. サーバーは、そのログインを Storefront Renderer DevTools トークンと交換します。
3. Shopify の Speedscope レスポンスタイプを使用して、ストアフロントをリクエストします。
4. Shopify は通常の HTML ではなく、サーバー側の Liquid フレームグラフを返します。
5. MCP はそのデータを解析、比較、保存、エクスポートし、AI アシスタントに提供します。

コントリビュート

Issue やプルリクエストを歓迎します。以下を含めてください。

• 問題または改善点を平易な言葉で説明したもの。
• 再現手順。
• トークンや非公開のストアデータを含まない、サニタイズ済みの例。
• コード変更のテスト結果。

リポジトリ：github.com/dragnoir/Shopify-Theme-Inspector-MCP

ライセンス

MIT