Cursor에서 ExodeUI MCP 서버를 설정하는 방법
Cursor(및 Claude Code)의 ExodeUI MCP 서버에 대한 단계별 설정: mcp.json 항목, 도구 확인, 첫 번째 프롬프트 및 안전한 검토.
핵심 포인트
npx로 claude-exode-mcp 패키지를 실행하는 프로젝트의 .cursor/mcp.json에 항목을 추가하고, Cursor를 다시 로드하고, exode 서버와 해당 도구가 Cursor의 MCP 설정에 나타나는지 확인하세요. 그런 다음 Cursor의 에이전트에게 일반 언어로 애니메이션을 생성하거나 편집하도록 요청하고 배송 전에 ExodeUI 편집기에서 결과를 검토하십시오.
필요한 것
편집기에서 결과를 열려면 Cursor, Node.js(npx를 사용할 수 있음) 및 ExodeUI 계정이 필요합니다. ExodeUI MCP 서버는 npm에 claude-exode-mcp로 게시됩니다. npx를 통해 로컬로 실행되므로 직접 설치할 것이 없습니다.
1단계: mcp.json에 서버 추가
Cursor는 mcp.json 파일에서 사용자 정의 MCP 서버를 읽습니다. 프로젝트 수준 파일은 저장소의 .cursor/mcp.json에 있습니다. 로컬 명령줄 서버는 명령 및 인수와 함께 "stdio" 유형을 사용합니다. ExodeUI 항목은 claude-exode-mcp 패키지와 함께 npx를 실행합니다(아래 코드 블록 참조).
2단계: 도구 다시 로드 및 확인
Cursor를 다시 로드하고 MCP 설정을 열고 Exode 서버가 실행 중이고 해당 도구가 나열되어 있는지 확인하세요. 시작되지 않으면 npx가 터미널에서 작동하는지, Node.js 버전이 최신 버전인지 확인하세요.
3단계: 프롬프트
쉬운 언어로 질문하고 상태와 느낌에 대해 구체적으로 설명하세요.
- "켜기 및 끄기 상태와 그 사이에 부드러운 스프링이 있는 토글을 만듭니다."
- "부드럽게 펄스하는 저장 버튼에 로딩 상태를 추가한 다음 성공을 확인합니다."
- "성공 애니메이션을 더 빠르게 만들고 오버슈트를 줄입니다."
대신 Claude Code 사용
Claude Code에서 claude mcp add exode npx -y claude-exode-mcp 명령을 사용하여 동일한 서버를 추가합니다. Claude Code는 .mcp.json 파일에서 프로젝트 수준 구성도 지원합니다.
배송 전 검토
파일을 편집할 수 있는 에이전트도 실수를 할 수 있습니다. .exode 파일을 Git에 보관하여 변경 사항을 비교할 수 있도록 하고 ExodeUI 편집기에서 결과를 열어 타이밍과 모든 상태를 확인하고 모션 감소 동작을 테스트하세요.
프로덕션 구현 예시
// .cursor/mcp.json
{
"mcpServers": {
"exode": {
"type": "stdio",
"command": "npx",
"args": ["-y", "claude-exode-mcp"]
}
}
}
# Claude Code alternative
claude mcp add exode npx -y claude-exode-mcp기억할 핵심 원칙
- 서버는 npx로 실행되는 npm 패키지 clude-exode-mcp입니다.
- Cursor에서 .cursor/mcp.json에 stdio 서버로 추가합니다.
- 도구를 다시 로드하고 MCP 설정에 나타나는지 확인하세요
- 상태와 느낌에 대한 프롬프트; 나중에 번호를 조정해
- Git에 파일을 보관하고 편집기에서 변경 사항을 검토하세요.
자주 묻는 질문
출처
- claude-exode-mcp — npm
- Model Context Protocol (MCP) — Cursor 문서
- Connect Claude Code to tools via MCP — Claude Code 문서