Code MCP 설치 및 설정

설정 과정은 크게 세 가지 단계로 구성됩니다 — MCP 서버 설치, 스킬(skill) 설치, 그리고 최초 1회 로그인(Step 2). 다음 두 가지 방법 중 하나를 선택해 보세요.

방법 A — 에이전트에게 자동 설치 맡기기 (가장 추천, 터미널 미사용)

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를 이용해 주세요.

방법 B — 수동으로 직접 설치하기

사용 중인 에이전트를 확인하여 해당 명령어를 실행하거나 설정(config)을 붙여넣은 뒤 로그인(Step 2)을 진행합니다. 서버 정의 규격은 모든 환경에서 동일합니다: command: npx, args: ["-y", "@protopie.io/code-mcp"], key protopie-code-mcp.

• 실행 위치

  • Claude Code / Codex → 터미널

  • Claude Desktop → </> Code 탭 (Chat 모드가 아닌 Code 탭)

  • 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

온프레미스 / 전용 클라우드 (On-premise / dedicated cloud)

기본적으로 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> 추가

Step 2 — 로그인하기 (최초 1회)

두 방법 모두 Step 2로 이어집니다. Code MCP는 ProtoPie Cloud 데이터를 읽어오기 때문에 최초 1회 로그인이 필요합니다.

• 에이전트에 auth_login 도구를 호출하도록 요청하세요. 브라우저 창이 열리며 ProtoPie Cloud OAuth 인증이 진행됩니다.

• 토큰은 사용자의 OS 키체인(macOS Keychain, Windows Credential Manager, Linux libsecret)에 저장되며, 해당 Cloud 호스트 스코프로 지정됩니다.

• 언제든지 auth_status 도구를 호출하여 로그인 상태를 확인할 수 있습니다 (“내 ProtoPie 인증 상태 확인해 줘”).

• 한 번에 하나의 계정만 유지됩니다. 새로 로그인하면 이전 로그인 정보가 덮어씌워지며, 로그아웃 시 삭제됩니다. 에이전트는 사용자의 계정에서 다운로드 가능한 Pie에만 접근할 수 있습니다.

퀵스타트: Dev View에서 코드로 변환하기

1. ProtoPie Cloud에서 Pie의 Dev View를 열고 MCP 탭으로 이동합니다. 원하는 범위(전체 Pie, 씬, 컴포넌트, 혹은 레이어)를 선택한 후 Copy link를 누릅니다. 이 링크는 현재 보고 있는 정확한 리비전(revision)을 고정합니다.

2. 에이전트에 링크를 붙여넣고 프롬프트를 입력하세요. 예를 들어, “이 요소와 인터랙션을 React(또는 사용 중인 기술 스택) 코드로 구현해 줘.”

3. 에이전트는 서버에서 정확히 해당 선택 영역을 읽어와 일치하는 코드를 작성합니다. 브라우저에서 URL을 직접 열지 않습니다.

최상의 결과를 위한 팁

• 범위를 작게 설정하여 단계별로 구현하세요: 전체 Pie를 한 번에 요청하는 것보다 씬(scene)이나 요소(element) 단위 링크를 사용하는 것이 더 빠르고 정확합니다.

• 최신 버전을 위해 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 파일의 본문 내용은 일절 전송되지 않습니다.

T서버에서 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= 옵션을 추가합니다.

• Optional: PROTOPIE_MCP_AMPLITUDE_SERVER_ZONE=EU 환경 변수를 추가하면 텔레메트리 전송 위치가 EU 지역으로 변경됩니다 (기본값: US).

Troubleshooting

• "Authentication required" (인증 필요) 메시지가 떠요. → auth_login 도구를 실행한 후 auth_status로 로그인 상태를 확인해 보세요.

• 도구가 보이지 않아요. → 설치 후 에이전트 세션을 재시작하세요 (Claude Desktop Code 탭의 경우 완전 종료 후 다시 실행). Node 20 이상 버전인지 확인하세요.

• 파일 경로와 함께 spilled: true가 표시돼요. → 결과 데이터가 커서 디스크에 저장된 상태입니다. 에이전트가 해당 경로에서 데이터를 정상적으로 읽어옵니다. 용량이 큰 씬에서는 정상적인 동작입니다.

• Code MCP가 내 Pie를 수정할까 봐 걱정돼요. → 걱정 마세요. Code MCP는 읽기 전용(read-only)으로 동작합니다.

Dev View에 대해 더 알아보기