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

Step 1 — Studio で MCP Server を有効にする

1. ProtoPie Studio で Preferences → Labs を開きます

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

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

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

Step 2 — AI クライアントから接続する

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

2-1. Claude Desktop (Chat) — ワンクリック（推奨、最も簡単な方法）

コードや設定ファイルを用意することなく、ボタン 1 つで接続できます。

1. Studio で Preferences → Labs → MCP Server をオンにします。

2. 同じ画面で Open in Claude Desktop をクリックします。

3. Claude Desktop に ProtoPie Studio MCP 拡張機能 (.mcpb) のインストールプロンプトが自動的に表示されるので、インストールします。(この操作は初回 1 回のみです。)

   1. 拡張機能が現在の Studio ポートを自動的に検出して接続するため、追加の設定は不要です。

   
   

   

4. Claude Desktop の chat で直ちに使用を開始できます。初回使用時には、Studio に表示される Allow ダイアログを承認してください。

   
   

   

⚠️ Claude Desktop の Chat モード と Code タブ は、別々の MCP リストを保持しています。このワンクリック拡張機能は Chat モード 用です。Code タブをご利用の場合は 2-2 を参照してください。

• 手動設定手順（ボタンが利用できない場合）

  Chat モードの claude_desktop_config.json は stdio のみをサポートしているため、HTTP サーバー接続には mcp-remote ブリッジ（Node.js / npx が必要）を使用します。

  1. Settings → Developer → Edit Config から 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 を完全に終了して再起動します。初回使用時に Allow を承認してください。

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

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

🗂️ Code タブでの作業について — Code タブでは、まず作業ディレクトリ（フォルダ）を選択する必要があります。そのフォルダがワークスペースとなり、MCP サーバーはそこに登録されます (local scope)。フォルダを切り替えるとサーバーが表示されない場合がありますので、すべての環境で利用できるように --scope user オプション（下記参照）を使用することをお勧めします。

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

   claude mcp add --transport

   claude mcp add --transport

   claude mcp add --transport

   claude mcp add --transport

   claude mcp add --transport

   上記コマンドは現在のプロジェクト (local scope) にのみ登録します。すべてのプロジェクトで使用するには --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 に Allow / Deny ダイアログが表示されたら、Allow をクリックします。

   
   

   

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

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 で Allow を承認。

2-5. VS Code (Agent モード)

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

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

3. サーバーを起動し、Agent モードでツールを見つけたら、初回使用時に Allow を承認します。

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

ℹ️ その他の MCP クライアント — Labs の "Other MCP clients" 項目から以下の JSON をコピーして貼り付けます: { "mcpServers": { "protopie-studio-mcp": { "url": "http://127.0.0.1:9982/mcp" } } }

Step 3 — 接続を承認する (Allow / Deny)

• クライアントが初めて接続する際、Studio に Allow / Deny ダイアログが表示されます。Allow をクリックして接続します。

• 承認するまでは接続が一時的に拒否されます — クライアントから再接続 (reconnect / retry) を試みてください。

Step 4 — Studio MCP を使用する

Studio MCP は、Studio で開かれてアクティブになっている (focused) プロトタイプに対して動作します — 貼り付けるリンクは不要です。.pie ファイルを開いた状態で、AI に以下のように指示してみてください:

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

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

• 「タップするとカードが反転する画面を作って」

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

FAQ

• 接続できません。→ Studio で Allow ダイアログを承認したか確認してください。承認前は接続が一時的に拒否されます。クライアントに Authenticate ボタンが表示されても適用されませんので、代わりに Reconnect (retry) を使用してください。

• ツールが表示されない、または接続が切れます。→ Preferences → Labs で MCP Server がオンになっているか、Studio が実行中か、.pie ファイルが開かれているか確認してください。それでも解決しない場合は、Studio とクライアントを再起動します。Claude Code では claude mcp list で登録状態を確認し、claude mcp get protopie-studio-mcp で詳細を確認してください。必要に応じて claude mcp remove protopie-studio-mcp を実行してから再追加します。

• Open in Claude Desktop ボタンが表示されません。→ ProtoPie Studio のバージョンが 10.3.0 以降であることを確認してください（ボタンは 10.3.0 から提供されています）。古いバージョンをご使用の場合はアップデートするか、2-1 の手動設定手順 (mcp-remote) または別のクライアントをご利用ください。

• Claude Desktop に追加しましたが、ツールが表示されません。→ Chat モードと Code タブは別々の MCP リストを保持しています。Chat モードは Open in Claude Desktop 拡張機能 (.mcpb) 経由で追加し、Code タブは claude mcp add コマンドで追加する必要があります。現在使用しているモードに合わせて正常に追加されているか確認してください。

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

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

• 特定のプロジェクトでは動作しますが、他のプロジェクトでは動作しません (Claude Code / Code タブ)。→ ローカルスコープ (Local scope) はコマンドを実行したフォルダにのみ登録されます。すべての場所で使用するには -scope user オプションを使用してください。

Code MCPについて詳しく見る