セットアップは大きく 3 つのステップで構成されています — MCP サーバーのインストール、スキル (skill) のインストール、そして初回 1 回のみのログイン (Step 2)。以下の 2 つの方法から 1 つを選択してください。
MCP をサポートする AI エージェントに、以下のプロンプトをコピーして貼り付けてください。Claude Desktop をご使用の場合は、Chat ではなく </> Code タブで行ってください。エージェントが protopie-code-mcp サーバーを追加し、スキルを自動的にインストールします。インストール後、Step 2 に進んでください。
Set up "ProtoPie Code MCP" in the environment you are running in. Read the install guide and follow the "Method B — Install it yourself" section for your client: <http://www.protopie.io/learn/docs/mcp-code-mcp-setup>
Set up "ProtoPie Code MCP" in the environment you are running in. Read the install guide and follow the "Method B — Install it yourself" section for your client: <http://www.protopie.io/learn/docs/mcp-code-mcp-setup>
Set up "ProtoPie Code MCP" in the environment you are running in. Read the install guide and follow the "Method B — Install it yourself" section for your client: <http://www.protopie.io/learn/docs/mcp-code-mcp-setup>
Set up "ProtoPie Code MCP" in the environment you are running in. Read the install guide and follow the "Method B — Install it yourself" section for your client: <http://www.protopie.io/learn/docs/mcp-code-mcp-setup>
Set up "ProtoPie Code MCP" in the environment you are running in. Read the install guide and follow the "Method B — Install it yourself" section for your client: <http://www.protopie.io/learn/docs/mcp-code-mcp-setup>
エージェントが設定を完了できない場合（例：設定ファイルを直接編集できない場合など）は、以下の方法 Bをご利用ください。
用するエージェントを確認し、該当するコマンドを実行するか設定 (config) を貼り付けた後、ログイン (Step 2) を進めます。サーバーの定義規格はすべての環境で共通です: command: npx, args: ["-y", "@protopie.io/code-mcp"], key protopie-code-mcp.
Where to run
Claude Code / Codex → ターミナルClaude Desktop → the </> Code タブ（Chat モードではなく）
Cursor / VS Code / Antigravity → 設定ファイル (config) に JSON を貼り付けた後、ターミナルで install-skill コマンドを実行
Claude Code
claude mcp add --scope user protopie-code-mcp -- npx -y @protopie.io/code-mcp && \
npx -y @protopie.io/code-mcp install-skill -a
claude mcp add --scope user protopie-code-mcp -- npx -y @protopie.io/code-mcp && \
npx -y @protopie.io/code-mcp install-skill -a
claude mcp add --scope user protopie-code-mcp -- npx -y @protopie.io/code-mcp && \
npx -y @protopie.io/code-mcp install-skill -a
claude mcp add --scope user protopie-code-mcp -- npx -y @protopie.io/code-mcp && \
npx -y @protopie.io/code-mcp install-skill -a
claude mcp add --scope user protopie-code-mcp -- npx -y @protopie.io/code-mcp && \
npx -y @protopie.io/code-mcp install-skill -a
Codex
codex mcp add protopie-code-mcp -- npx -y @protopie.io/code-mcp && \
npx -y @protopie.io/code-mcp install-skill -a
codex mcp add protopie-code-mcp -- npx -y @protopie.io/code-mcp && \
npx -y @protopie.io/code-mcp install-skill -a
codex mcp add protopie-code-mcp -- npx -y @protopie.io/code-mcp && \
npx -y @protopie.io/code-mcp install-skill -a
codex mcp add protopie-code-mcp -- npx -y @protopie.io/code-mcp && \
npx -y @protopie.io/code-mcp install-skill -a
codex mcp add protopie-code-mcp -- npx -y @protopie.io/code-mcp && \
npx -y @protopie.io/code-mcp install-skill -a
Cursor — ~/.cursor/mcp.json（グローバル）または .cursor/mcp.json（プロジェクト）ファイルに追加した後、スキルをインストールします:
{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }npx -y @protopie.io/code-mcp install-skill -a
npx -y @protopie.io/code-mcp install-skill -a
npx -y @protopie.io/code-mcp install-skill -a
npx -y @protopie.io/code-mcp install-skill -a
npx -y @protopie.io/code-mcp install-skill -a
VS Code（GitHub Copilot の有効化が必要） — ⌘⇧P → MCP: Open User Configuration を選択して内容を追加 → Start を実行 → スキルをインストール:
{ "servers": { "protopie-code-mcp": { "type": "stdio", "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }{ "servers": { "protopie-code-mcp": { "type": "stdio", "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }{ "servers": { "protopie-code-mcp": { "type": "stdio", "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }{ "servers": { "protopie-code-mcp": { "type": "stdio", "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }{ "servers": { "protopie-code-mcp": { "type": "stdio", "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }npx -y @protopie.io/code-mcp install-skill -a
npx -y @protopie.io/code-mcp install-skill -a
npx -y @protopie.io/code-mcp install-skill -a
npx -y @protopie.io/code-mcp install-skill -a
npx -y @protopie.io/code-mcp install-skill -a
Antigravity — ~/.gemini/config/mcp_config.json （または単一プロジェクト用の.agents/mcp_config.json）ファイルに追加した後、スキルをインストールします:
{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }npx -y @protopie.io/code-mcp install-skill -a
npx -y @protopie.io/code-mcp install-skill -a
npx -y @protopie.io/code-mcp install-skill -a
npx -y @protopie.io/code-mcp install-skill -a
npx -y @protopie.io/code-mcp install-skill -a
基本的には、Code MCP は https://cloud.protopie.io に接続します。オンプレミスまたは専用のエンタープライズクラウドをご使用の場合は、使用中のインスタンスを指すように PROTOPIE_CLOUD_URL 環境変数を追加する必要があります。貼り付けるリンクとログインアカウントは、同じホストに属している必要があります。
設定ファイルベースのクライアント (Cursor / VS Code / Antigravity) — サーバー設定に追加:
{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"], "env": { "PROTOPIE_CLOUD_URL": "https://<your-host>" } } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"], "env": { "PROTOPIE_CLOUD_URL": "https://<your-host>" } } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"], "env": { "PROTOPIE_CLOUD_URL": "https://<your-host>" } } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"], "env": { "PROTOPIE_CLOUD_URL": "https://<your-host>" } } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"], "env": { "PROTOPIE_CLOUD_URL": "https://<your-host>" } } } }Claude Code / Codex — 登録時に -e PROTOPIE_CLOUD_URL=https://<your-host> を追加
どちらの方法にも該当します。Code MCP は ProtoPie Cloud のデータを読み取るため、初回 1 回のログインが必要です。
エージェントに auth_login ツールを呼び出すよう指示してください。ブラウザウィンドウが開き、ProtoPie Cloud OAuth 認証が完了します。
トークンは OS のキーチェーン（macOS Keychain、Windows Credential Manager、Linux libsecret）に保存され、該当する Cloud ホストのスコープが指定されます。
いつでも auth_status ツールを呼び出してログイン状態を確認できます（「ProtoPie の認証ステータスを確認して」）。
一度に保持できるアカウントは 1 つのみです。新たにログインすると以前のログイン情報は上書きされ、ログアウト時にクリアされます。エージェントはご自身のアカウントでダウンロード可能な Pie にのみアクセスできます。
ProtoPie Cloud で Pie の Dev View を開き、MCP タブに移動します。希望する範囲（Pie 全体、シーン、コンポーネント、レイヤー）を選択し、Copy link を押します。このリンクは現在表示している正確なリビジョン (revision) を固定します。
エージェントにリンクを貼り付け、プロンプトを入力します — 例：「この要素とインタラクションを React（またはお使いの技術スタック）のコードで実装して。」
エージェントはサーバーから正確にその選択領域を読み取り、一致するコードを作成します。ブラウザで URL を直接開くことはありません。
範囲を小さく設定し、段階的に実装する: Pie 全体を一度にリクエストするよりも、シーンや要素単位のリンクを使用する方が、より高速で信頼性が高くなります。
最新バージョンのために Dev View からリンクを再コピーする: リンクは特定のリビジョンを固定するため、変更があった場合は再コピーしてください。
レイヤー名を明確に指定する: 生成されるコードはレイヤー名を反映します（Rectangle 41 よりも cta-button の方がはるかに有用です）。
Figma からインポートしたテキストは画像として処理される場合があります: テキストの表示がおかしい場合は、該当するレイヤーが実際の画像形式になっていないか確認してください。
Code MCP は、ユーザーがダウンロードできるすべての Pie で動作します。
Pie の所有者は、ダウンロード機能が有効な Pro または Enterprise プランである必要があり、ユーザーは所有者、チームメンバー、または「表示およびダウンロード可能 (can view & download)」権限で共有されている必要があります。
ダウンロード権限がない場合、Dev View で MCP リンクが非表示になります（「MCP リンクを使用するには Pro または Enterprise プランおよびダウンロード権限が必要です。Pie 所有者にお問い合わせください」）。
Code MCP はローカルの .pie ファイルを直接開くことはありません。すべてのデータはユーザーの権限に基づいてサーバー経由で取得されます。
無料ベータ期間中、Dev View および Code MCP はログインしているすべてのユーザーに対して、ダウンロード可能なすべての Pie について解放されています。
Code MCP は匿名使用テレメトリを送信することがあります — イベント数のみが送信され、プロトタイプのコンテンツは絶対に送信されません。 実行されたツールの種類、成功 / 失敗、所要時間、おおよそのサイズ分類、単方向ハッシュ化された Pie ID、ランダムなデバイス ID、および Cloud アカウント ID などの情報のみが記録されます。レイヤーテキスト、名前、Pie URL、.pie ファイルの本文内容は一切送信されません。
サーバーで PROTOPIE_MCP_AMPLITUDE_KEY 環境変数を空の文字列に設定することで、テレメトリをオフにできます:
設定ファイルベースのクライアント (Cursor / VS Code / Antigravity):
{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"], "env": { "PROTOPIE_MCP_AMPLITUDE_KEY": "" } } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"], "env": { "PROTOPIE_MCP_AMPLITUDE_KEY": "" } } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"], "env": { "PROTOPIE_MCP_AMPLITUDE_KEY": "" } } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"], "env": { "PROTOPIE_MCP_AMPLITUDE_KEY": "" } } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"], "env": { "PROTOPIE_MCP_AMPLITUDE_KEY": "" } } } }Claude Code / Codex: 登録時に -e PROTOPIE_MCP_AMPLITUDE_KEY= オプションを追加します。
オプション: PROTOPIE_MCP_AMPLITUDE_SERVER_ZONE=EU 環境変数を追加すると、テレメトリの送信先が EU リージョンに変更されます（デフォルト: US）。
「Authentication required」（認証が必要）と表示されますか？ → auth_login ツールを実行した後、auth_status でログイン状態を確認してください。
ツールが表示されませんか？→ インストール後にエージェントのセッションを再起動してください（Claude Desktop Code タブの場合は完全終了して再実行）。Node 20 以降のバージョンであることを確認してください。
ファイルパスとともに spilled: true が表示されますか？ $\rightarrow$ 結果データが大きく、ディスクに保存された状態です。エージェントが該当パスからデータを正常に読み込みます。容量の大きいシーンでは正常な動作です。
Code MCP が自分の Pie を変更してしまうのではないかと心配ですか？ → Code MCP は読み取り専用 (read-only) で動作するため、元の Pie ファイルや Cloud のデータを絶対に変更・修正することはありません。
Dev View について詳しく見る