Code MCP Installation & Setup

Setup is three things — install the MCP server, install the skill, and sign in once (Step 2). Pick one of two ways.

Method A — Let your agent install it (easiest, no terminal)

Paste this one prompt into any MCP-capable agent. In Claude Desktop, use the </> Code tab, not Chat. It adds the protopie-code-mcp server and installs the skill; then go to 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>

If your agent can't finish a step (e.g. it can't edit a config file), use Method B below.

Method B — Install it yourself

Find your agent, run its commands (or paste its config), then sign in (Step 2). Server definition is the same everywhere: command: npx, args: ["-y", "@protopie.io/code-mcp"], key protopie-code-mcp.

• Where to run

  • Claude Code / Codex → terminal

  • Claude Desktop → the </> Code tab (not Chat)

  • Cursor / VS Code / Antigravity → paste the JSON into the config file, then run the install-skill command in a terminal

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 — add to ~/.cursor/mcp.json (global) or .cursor/mcp.json (project), then install the skill:

{ "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 (needs GitHub Copilot enabled) — ⌘⇧P → MCP: Open User Configuration, add, then Start; then install the skill:

{ "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 — add to ~/.gemini/config/mcp_config.json (or .agents/mcp_config.json for one project), then install the skill:

{ "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

On-premise / dedicated cloud

By default Code MCP connects to https://cloud.protopie.io. For an on-prem or dedicated enterprise cloud, add a PROTOPIE_CLOUD_URL environment variable pointing to your instance — the link you paste and your sign-in must belong to that same host.

• Config-based clients (Cursor / VS Code / Antigravity) — add to the server config:

{ "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 — add -e PROTOPIE_CLOUD_URL=https://<your-host> when registering.

Step 2 — Sign in (once)

Applies to both methods. Code MCP reads ProtoPie Cloud data, so it needs one sign-in.

• Ask your agent to call the auth_login tool. A browser window opens to complete the ProtoPie Cloud OAuth flow.

• Tokens are stored in your OS keychain (macOS Keychain, Windows Credential Manager, or Linux libsecret), scoped to your Cloud host.

• Check anytime with the auth_status tool ("check my ProtoPie auth status").

• One account at a time; a new sign-in overwrites the old one, and signing out clears it. The agent can only reach Pies your account can download.

Quickstart: from Dev View to code

1. In ProtoPie Cloud, open your Pie's Dev View, go to the MCP tab, select what you want (whole Pie, a scene, a component, or a layer), and press Copy link. The link pins the exact revision you're viewing.

2. Paste the link into your agent and prompt it — e.g. "Implement this element and its interactions in React (or your stack)."

3. The agent reads exactly that selection from the server and writes matching code. It never opens the URL in a browser.

Tips for best output

• Select small and implement in passes — scene- or element-scoped links are faster and more reliable than whole-Pie prompts.

• Re-copy from Dev View to target the latest version (links pin a revision).

• Name your layers; generated code mirrors them (cta-button beats Rectangle 41).

• Figma-imported text sometimes arrives as images — if text looks wrong, check whether the layer is actually an image.

Access and permissions

Code MCP works on any Pie you can download.

• The Pie's owner must be on Pro or Enterprise with download enabled, and you must be the owner, a team member, or shared with "can view & download."

• Without download access, Dev View hides the MCP link ("MCP links require Pro or Enterprise plan and Download Access. Ask the Pie owner.").

• Code MCP never opens local .pie files — all data comes through the server with your permissions.

• During the free beta, Dev View and Code MCP are open to all signed-in users for any Pie they can download.

Telemetry & privacy

Code MCP can send anonymous usage telemetry — event counts only, never your prototype content. It records things like which tool ran, success/failure, duration, coarse size buckets, a one-way hashed pie id, a random device id, and your Cloud account id. It never sends layer text, names, pie URLs, or .pie content.

Turn it off by setting PROTOPIE_MCP_AMPLITUDE_KEY to an empty string on the server:

• Config-based clients (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: add -e PROTOPIE_MCP_AMPLITUDE_KEY= when registering.

• Optional: PROTOPIE_MCP_AMPLITUDE_SERVER_ZONE=EU routes telemetry to the EU region (US is default).

Troubleshooting

• "Authentication required" → run the auth_login tool, then check auth_status.

• Tools not appearing → restart your agent session after installing (in the Claude Desktop Code tab, fully quit and reopen). Confirm Node 20+.

• spilled: true with a file path → the result was large and saved to disk; your agent reads it from there. Normal for big scenes.

• Can it change my Pie? → No, it's read-only.

Learn more about Dev View