Vibr MCP

Vibr MCP는 내 컴퓨터에서 실행하는 작은 서버입니다. Claude Code, Cursor, Claude Desktop 같은 에이전트가 Vibr와 함께 작업할 수 있게 해 줍니다. 프로토타입 나열, 화면 빌드 및 다듬기, Figma 파일 가져오기, 테마를 디자인 토큰으로 읽기, 프로토타입을 프로젝트로 내보내기를 할 수 있습니다.

라이브러리와 키는 브라우저에 있으므로 작업은 연결한 Vibr 탭에서 이루어집니다. 에이전트가 요청하면 탭이 내 디자인 시스템과 모델 키로 작업합니다. 직접 요청을 입력할 때와 같은 방식입니다.

설정하기

Node 20 이상이 필요합니다. Claude Code에서 서버를 한 번 추가하세요.

claude mcp add vibr -- npx -y vibr-mcp

다른 MCP 클라이언트는 설정 파일에 같은 명령을 넣습니다.

{ "mcpServers": { "vibr": { "command": "npx", "args": ["-y", "vibr-mcp"] } } }

탭 연결하기

1. 에이전트에게 Vibr에 연결해 달라고 요청하세요. 서버가 내 컴퓨터에서 보여 주는 페이지의 링크를 알려 줍니다.
2. Vibr를 사용하는 브라우저에서 링크를 열고 Open Vibr를 선택하세요. Vibr가 내 라이브러리와 키를 갖춘 별도의 창으로 열립니다. Vibr에 아직 키가 없다면 그 창에서 추가하세요.
3. Vibr가 이 컴퓨터의 MCP가 그 창에서 작업해도 되는지 묻습니다. 허용을 선택하세요.
4. 창 하단에 MCP 연결됨이 표시됩니다. 언제든 연결 해제를 선택해 연결을 끝낼 수 있습니다.

에이전트가 작업하는 동안 서버의 페이지와 Vibr 창을 열어 두세요. 각 링크는 서버 세션 하나에만 유효합니다. 서버가 다시 시작되면 새 링크를 요청하세요.

할 수 있는 일

• 나열 및 읽기. 저장한 프로토타입, 프로토타입의 코드와 요청, 라이브러리의 멘션, 탭의 설정(공급자, 모델, 디자인 시스템이며 키는 절대 포함되지 않음).
• 빌드. 요청을 계획, 빌드, 확인, 검토, 수정 단계로 실행해 새 프로토타입이나 기존 프로토타입의 새 버전으로 만들고 라이브러리에 저장합니다. 내 키를 사용하므로 Vibr에서 같은 요청을 할 때와 같은 비용이 듭니다.
• Figma에서 가져오기. Send to Vibr 플러그인의 .vibr-figma.json 파일을 가져와 프레임을 연결된 화면으로 빌드합니다. Figma에서 가져오기를 참조하세요.
• 테마 읽기. 테마를 라이트 및 다크 역할과 함께 CSS 사용자 지정 속성이나 디자인 토큰으로 읽습니다.
• 내보내기. 프로토타입을 폴더에 단일 페이지, 연결된 플로, 또는 React 소스로 씁니다. 요청하지 않는 한 파일을 덮어쓰지 않으며, 지정한 폴더 밖에는 절대 쓰지 않습니다.

개인 정보 보호 및 안전

• 키는 탭 밖으로 나가지 않습니다. 서버는 키를 보지 않으며, 요청은 언제나처럼 탭에서 모델 공급자로 전송됩니다.
• 서버는 127.0.0.1에서만 수신합니다. 서버는 브라우저에 띄운 자체 페이지를 통해 Vibr에 작업을 전달하므로, vibr.art가 내 컴퓨터에 연결하는 일은 없습니다.
• Vibr는 자신을 연 페이지에서만, 서버 링크에 담긴 무작위 일회용 코드가 있을 때만, 그리고 허용을 선택한 뒤에만 작업을 받습니다.
• 라이브러리의 콘텐츠는 데이터로 에이전트에 전달됩니다. 에이전트가 그렇게 취급하지 않는 한, 프로토타입의 텍스트나 가져온 파일이 에이전트에게 지시를 내릴 수는 없습니다. 그러니 에이전트가 빌드한 결과는 여느 초안처럼 검토하세요.

자세한 내용은 키, 개인 정보 보호 및 저장소를 참조하세요.

설정

• VIBR_MCP_PORT: 내 컴퓨터의 포트(사용 중이 아니면 4517).
• VIBR_MCP_APP: 링크가 여는 Vibr 페이지(Vibr를 직접 실행하지 않으면 https://vibr.art/).

문제 해결

• Vibr가 연결되지 않습니다. Vibr 창에서 허용을 선택했는지, 서버의 페이지가 아직 열려 있는지 확인하세요. 브라우저가 창을 차단했다면 그 페이지의 팝업을 허용하고 Open Vibr를 다시 선택하세요.
• 에이전트가 연결된 탭이 없다고 합니다. 서버가 다시 시작되었거나 창이 닫혔습니다. 새 링크를 요청해 여세요.
• 빌드가 실패합니다. Vibr 창을 여세요. 직접 요청을 입력할 때처럼 실행의 각 단계가 표시됩니다.