Studio MCPのインストールとセットアップ

MCP Coreで利用可能です。

ステップ 1 — StudioでMCPサーバーをオンにする

1. ProtoPie Studioで、環境設定 → ラボを開きます。

2. MCPサーバーのトグルをオンにします。サーバーはすぐに起動します。保存やアプリの再起動は不要です。

3. トグルの下に、サーバーのステータスとクライアントごとの接続詳細が表示されます。それぞれのコピーボタンを使用して、正確なコマンドまたは設定を取得してください。

🔢 ポートについて — デフォルトのポートは9982ですが、すでに使用されている場合は別のポートが自動的に割り当てられます。常にラボに表示されている実際のコマンド/URLをコピーしてください。

ステップ 2 — AIクライアントから接続する

お使いの環境に合ったクライアントを選択してください。コードやターミナルが面倒に感じる場合は、2-1（Claude Desktopのワンクリック）が最も簡単です。 オプション2-2から2-5はすべて同じアドレスhttp://127.0.0.1:<PORT>/mcpに接続します。ここで、<PORT>はラボに表示されている実際のポート（デフォルトは9982）です。

2-1. Claude Desktop (チャット) — ワンクリック（推奨、最も簡単）

コードや設定ファイルなしで、ボタン一つで接続できます。

1. Studioで、環境設定 → ラボ → MCPサーバーをオンにします。

2. 同じ画面で、Claude Desktopで開くをクリックします。

3. Claude Desktopに、ProtoPie Studio MCP拡張機能 (.mcpb)をインストールするためのプロンプトが自動的に表示されます。インストールしてください。

   1. 拡張機能は現在のStudioのポートを自動検出して接続するため、追加のセットアップは不要です。

   
   

   

4. Claude Desktopのチャットですぐに使用できます。初回使用時は、Studioで表示される許可ダイアログを承認してください。

   
   

   

⚠️ Claude Desktopのチャットモードとコードタブは、別々のMCPリストを保持しています。このワンクリック拡張機能はチャットモード用です。コードタブについては、2-2に従ってください。

• 手動での代替方法（ボタンが利用できない場合）

  チャットモードのclaude_desktop_config.jsonはstdioのみをサポートしているため、HTTPサーバーはmcp-remoteブリッジを経由します（Node.js / npxが必要です）。

  1. 設定 → デベロッパー → 設定の編集からclaude_desktop_config.jsonを開きます：

     • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

     • Windows: %APPDATA%\Claude\claude_desktop_config.json

  2. mcpServersの下に追加します：

     {
       "mcpServers": {
         "protopie-studio-mcp": {
           "command": "npx",
           "args": ["mcp-remote", "http://127.0.0.1:9982/mcp", "--transport", "http-only"]
         }
       }
     }

     {
       "mcpServers": {
         "protopie-studio-mcp": {
           "command": "npx",
           "args": ["mcp-remote", "http://127.0.0.1:9982/mcp", "--transport", "http-only"]
         }
       }
     }

     {
       "mcpServers": {
         "protopie-studio-mcp": {
           "command": "npx",
           "args": ["mcp-remote", "http://127.0.0.1:9982/mcp", "--transport", "http-only"]
         }
       }
     }

     {
       "mcpServers": {
         "protopie-studio-mcp": {
           "command": "npx",
           "args": ["mcp-remote", "http://127.0.0.1:9982/mcp", "--transport", "http-only"]
         }
       }
     }

     {
       "mcpServers": {
         "protopie-studio-mcp": {
           "command": "npx",
           "args": ["mcp-remote", "http://127.0.0.1:9982/mcp", "--transport", "http-only"]
         }
       }
     }

  3. 保存し、Claude Desktopを完全に終了して再起動します。初回使用時に許可を承認してください。

2-2. Claude Code（ターミナルCLI、またはClaude Desktopのコードタブ）

ターミナルまたはClaude Desktopのコードタブ（Claude Code内蔵）から、同じコマンドで接続します。

🗂️ コードタブでの作成 — コードタブでは、最初に作業ディレクトリ（フォルダ）を選択するよう求められます。そのフォルダがワークスペースとなり、MCPサーバーがそこに登録されます（ローカルスコープ）。フォルダを切り替えるとサーバーが表示されない場合があります。どこからでも利用できるようにするには、以下の--scope userを使用してください。

1. プロジェクトフォルダ（作業ディレクトリ）に移動し、以下を実行します：

   claude mcp add --transport

   claude mcp add --transport

   claude mcp add --transport

   claude mcp add --transport

   claude mcp add --transport

   これにより、現在のプロジェクト（ローカルスコープ）にのみ登録されます。すべてのプロジェクトで機能させるには、--scope userを追加します：

   claude mcp add --scope user --transport

   claude mcp add --scope user --transport

   claude mcp add --scope user --transport

   claude mcp add --scope user --transport

   claude mcp add --scope user --transport

2. Claude Codeをリロードし、/mcpを実行して、protopie-studio-mcpを選択します。

3. Studioに許可 / 拒否ダイアログが表示されたら、許可をクリックします。

   
   

   

4. ツールリストでprotopie-studio-mcpが接続済みと表示されれば完了です。

2-3. Codex

ターミナルで実行するか、JSONを設定に貼り付けます：

codex mcp add protopie-studio-mcp --url

codex mcp add protopie-studio-mcp --url

codex mcp add protopie-studio-mcp --url

codex mcp add protopie-studio-mcp --url

codex mcp add protopie-studio-mcp --url

2-4. Cursor

1. Settings → MCP → + Add new MCP server（またはプロジェクトの.cursor/mcp.jsonを直接編集）。

2. JSONを追加します：

   {
     "mcpServers": {
       "protopie-studio-mcp": {
         "url": "http://127.0.0.1:9982/mcp"
       }
     }
   }

   {
     "mcpServers": {
       "protopie-studio-mcp": {
         "url": "http://127.0.0.1:9982/mcp"
       }
     }
   }

   {
     "mcpServers": {
       "protopie-studio-mcp": {
         "url": "http://127.0.0.1:9982/mcp"
       }
     }
   }

   {
     "mcpServers": {
       "protopie-studio-mcp": {
         "url": "http://127.0.0.1:9982/mcp"
       }
     }
   }

   {
     "mcpServers": {
       "protopie-studio-mcp": {
         "url": "http://127.0.0.1:9982/mcp"
       }
     }
   }

3. 保存 → 接続 → 初回使用時にStudioで許可を承認します。

2-5. VS Code (エージェントモード)

1. Cmd/Ctrl + Shift + P → MCP: Add Server → HTTPを選択。

2. URLにhttp://127.0.0.1:9982/mcp、サーバーIDにprotopie-studio-mcpを入力し、スコープを選択します。これにより、mcp.jsonにtype: "http"とurlを含むserversエントリが保存されます。

3. サーバーを起動し、エージェントモードでツールを見つけ、初回使用時に許可を承認します。

ℹ️ VS Codeに関する注意 — MCP / エージェントモードを使用するには、アカウントでGitHub Copilotが有効になっている必要があります。

ℹ️ その他のMCPクライアント — ラボの「その他のMCPクライアント」項目からJSONを貼り付けます：

ステップ 3 — 接続を承認する (許可 / 拒否)

• クライアントが初めて接続するとき、Studioに許可 / 拒否ダイアログが表示されます。許可をクリックして接続します。

• 承認する前は接続が一時的に拒否されるため、クライアントから再接続（再試行）してください。

ステップ 4 — Studio MCPを使用する

Studio MCPは、Studioで開かれフォーカスされているプロトタイプに対して動作します。貼り付けるリンクはありません。.pieファイルを開いた状態で、AIに以下のように依頼します：

• 「現在のプロトタイプのインタラクションを分析して。」

• 「このボタンにタップトリガーを追加して。」

• 「タップするとカードが裏返る画面を作って。」

• 「現在の画面のプレビューをキャプチャして。」

Studio MCPのアップデート後に再接続する

ProtoPie Studioのバージョンをアップデートした後、既存のMCPサーバーを一度削除して再接続し、AIクライアントが最新の接続情報と拡張機能情報を使用できるようにする必要がある場合があります。アップデート後に実際のポートが変更される可能性があるため、再接続する前に必ず環境設定 → ラボで現在のアドレスを確認してください。

Claude Desktop (チャット)

ProtoPie Studio MCP拡張機能 (.mcpb) をアップデートする必要がある場合は、現在のProtoPie Studioアプリに含まれているバージョンから再インストールしてください。

1. Claude Desktopで、既存のProtoPie Studio MCP拡張機能を削除します。

2. ProtoPie Studioで、環境設定 → ラボに移動します。

3. Claude Desktopで開くをクリックし、拡張機能を再度インストールします。

4. アップデートされたツールがすぐに表示されない場合は、Claude Desktopを再起動してください。

5. 再接続後の初回使用時に、Studioで許可ダイアログを承認します。

Studioのアップデートによって、すでにインストールされているClaude Desktop拡張機能が自動的にアップデートされることはありません。

Claude Code

既存のサーバーを削除し、ラボに表示されている現在のURLを使用して再度追加します。元々特定のプロジェクトに対してサーバーを登録していた場合は、そのプロジェクトフォルダからコマンドを実行してください。

claude mcp remove protopie-studio-mcp
claude mcp add --transport

claude mcp remove protopie-studio-mcp
claude mcp add --transport

claude mcp remove protopie-studio-mcp
claude mcp add --transport

claude mcp remove protopie-studio-mcp
claude mcp add --transport

claude mcp remove protopie-studio-mcp
claude mcp add --transport

以前に--scope userまたは別のスコープを使用していた場合は、サーバーの削除および再追加時にも同じスコープを使用してください。

claude mcp remove --scope user protopie-studio-mcp
claude mcp add --scope user --transport

claude mcp remove --scope user protopie-studio-mcp
claude mcp add --scope user --transport

claude mcp remove --scope user protopie-studio-mcp
claude mcp add --scope user --transport

claude mcp remove --scope user protopie-studio-mcp
claude mcp add --scope user --transport

claude mcp remove --scope user protopie-studio-mcp
claude mcp add --scope user --transport

再接続後、Claude Codeを再起動するかMCP接続をリロードし、プロンプトが表示されたらStudioで許可ダイアログを承認します。

Codex

既存のサーバーを削除し、ラボに表示されている現在のURLを使用して再度追加します。

codex mcp remove protopie-studio-mcp
codex mcp add protopie-studio-mcp --url

codex mcp remove protopie-studio-mcp
codex mcp add protopie-studio-mcp --url

codex mcp remove protopie-studio-mcp
codex mcp add protopie-studio-mcp --url

codex mcp remove protopie-studio-mcp
codex mcp add protopie-studio-mcp --url

codex mcp remove protopie-studio-mcp
codex mcp add protopie-studio-mcp --url

再接続後、Codexを再起動するか、新しいセッションを開始します。

その他のMCPクライアント

既存のprotopie-studio-mcp設定を削除し、お使いのクライアントのセットアップ方法に従って再度追加します。実際のポートが9982ではない場合があるため、環境設定 → ラボから最新のURLまたはJSONをコピーしてください。

Claude Desktop ChatとClaude Codeの両方を使用している場合は、それぞれ個別に再接続してください。Claude Desktop Chat拡張機能とClaude Code MCP登録は、個別に管理されています。

トラブルシューティングとよくある質問（FAQ）

• 接続できません。 → Studioで許可ダイアログを承認したか確認してください。承認前は接続が一時的に拒否されます。クライアントに認証（Authenticate）ボタンが表示されている場合でも、ここでは適用されません。代わりに再接続（再試行）を使用してください。

• ツールが見つからない、または接続が切れます。 → 環境設定 → ラボでMCPサーバーがオンになっていること、Studioが起動していること、および.pieファイルが開いていることを確認してください。ProtoPie StudioまたはStudio MCPのアップデート後にこれが発生した場合は、上記の「Studio MCPのアップデート後に再接続する」に従ってください。

• Claude Desktopで開くボタンが表示されません。 → ProtoPie Studioが10.3.0以降であることを確認してください（このボタンは10.3.0から搭載されています）。古いバージョンの場合は、アップデートするか、2-1に記載されている手動での代替方法（mcp-remote）または別のクライアントを使用してください。

• Claude Desktopに追加したのにツールが表示されません。 → チャットモードとコードタブは、別々のMCPリストを保持しています。チャットモードにはClaude Desktopで開く拡張機能 (.mcpb) を経由して追加し、コードタブにはclaude mcp addコマンドを経由して追加します。使用しているモードに追加されているか確認してください。

• Claude Desktop (チャット) にどの拡張機能 (.mcpb) がインストールされているか確認するにはどうすればよいですか？ → Claude DesktopでCmd + ,を押して環境設定を開き、Extensionsをクリックすると、インストールされている.mcpb拡張機能の一覧が表示されます。

• ポート/アドレスが一致しません。 → ポートは常に9982とは限りません。ラボに表示されている実際のコマンド/URLをコピーしてください。「ポートを使用できません」というメッセージが表示された場合は、そのポートを占有しているアプリを終了し、Studioを再起動してください。

• あるプロジェクトでは動作しますが、別のプロジェクトでは動作しません（Claude Code / コードタブ）。 → ローカルスコープは、コマンドを実行したフォルダにのみ登録されます。どこからでも利用できるようにするには、--scope userを使用してください。

詳細については、Code MCPについてをご覧ください。