Rive MCP: Claude Code, Cursor 및 Codex를 Rive에 연결하는 방법
Rive MCP 서버 작동 방식, Claude Code 및 Cursor를 Rive 편집기에 연결하는 방법, AI가 할 수 있는 것과 할 수 없는 것, Rive의 내장 에이전트 및 Rive CLI와 비교하는 방법.
핵심 포인트
Rive MCP 서버는 Mac 및 Windows용 Rive 데스크탑 편집기에 내장되어 있습니다. Rive가 열려 있는 동안 http://127.0.0.1:9791/mcp에서 실행되며 Claude Code 및 Cursor와 같은 AI 코딩 도구를 여기에 연결하여 열린 파일에 아트보드, 모양, 애니메이션, 상태 머신, 뷰 모델 및 스크립트를 생성할 수 있습니다. Claude Code에서 claude mcp add --transport http rive http://127.0.0.1:9791/mcp 명령으로 연결합니다.
이 가이드 정보
ExodeUI는 Rive 또는 Anthropic과 관련이 없습니다. 이 가이드는 2026년 10월 현재 Rive의 자체 문서를 기반으로 작성되었습니다. Rive의 AI 기능은 빠르게 변경되므로 단계가 표시된 것과 일치하지 않는 경우 공식 MCP 페이지를 확인하세요. 자체 MCP 서버를 갖춘 ExodeUI를 만들고 마지막에 둘을 비교합니다.
Rive MCP 서버가 할 수 있는 작업
Rive는 첫 번째 도구가 건물 뷰 모델이나 수백 개의 상태와 레이어가 있는 상태 머신과 같은 반복적인 작업을 목표로 한다고 밝혔습니다. Rive의 문서에 따르면 연결된 AI 도구는 다음을 수행할 수 있습니다.
- 파일 생성 및 관리: 아트보드 추가, 이름 변경, 크기 조정, 정렬 및 초점 맞추기
- 장면 검사 및 편집: 계층 쿼리, 객체 선택, 속성 업데이트, 요소 복제, 재정렬, 상위 재지정 또는 삭제
- 빌드 디자인: 모양, 경로, 레이아웃, 구성 요소 인스턴스 및 목록
- 애니메이션 및 상호 작용 생성: 선형 애니메이션, 상태 머신, 상태, 전환, 조건, 키프레임 및 보간
- 데이터 바인딩 작업: 뷰 모델, 속성, 인스턴스 및 바인딩
- Luau 스크립트 및 WGSL 셰이더 편집: 코드 업데이트, 진단 실행, 재컴파일, 테스트 및 콘솔 출력 읽기
Claude Code로 Rive MCP를 설정하는 방법
MCP는 브라우저 버전이 아닌 데스크톱 편집기에서만 작동합니다. 먼저 Rive를 열고 AI 도구를 연결하세요.
1. Rive 데스크톱 앱을 엽니다.
rive.app/downloads에서 macOS 또는 Windows용 최신 Rive 데스크톱 편집기를 설치하고 작업하려는 파일을 엽니다.
2. MCP 서버 추가
터미널에서 다음을 실행합니다: claude mcp add --transport http rive http://127.0.0.1:9791/mcp
3. Claude Code를 시작하세요
클로드를 실행하십시오. Rive가 열린 후에 시작하면 Rive 도구를 찾을 수 있습니다.
4. 코드가 아닌 기능 프롬프트
보고 싶은 것과 변경해서는 안 되는 것을 설명합니다. 예를 들어 "스프링을 사용하여 1.05로 크기를 조정하는 버튼에 마우스 오버 상태를 추가하고 누른 상태를 그대로 유지합니다."
Cursor 및 Codex를 사용하여 Rive MCP를 설정하는 방법
Cursor에서 설정을 열고 도구 및 MCPs로 이동하여 사용자 정의 MCP 추가를 선택한 다음 URL이 http://127.0.0.1:9791/mcp인 rive라는 서버를 추가한 다음 연결을 켭니다. Rive는 Claude Code 및 Cursor를 문서화합니다. 서버가 로컬 HTTP MCP 서버이기 때문에 Codex 등 HTTP MCP 서버를 지원하는 다른 클라이언트도 동일한 URL로 연결할 수 있습니다.
Rive MCP 대 Rive의 내장 AI 에이전트
Rive에는 편집기 내부에 AI 에이전트도 있습니다. 두 사람 모두 파일을 편집할 수 있습니다. 차이점은 비용을 지불하는 사람과 상담원이 볼 수 있는 다른 내용입니다.
- 내장 에이전트는 Rive의 계획에 따라 실행됩니다. 무료 및 Cadet으로 제한되며 Voyager의 고급 모델, 충전 크레딧 및 자체 API 키가 있습니다.
- MCP를 사용하면 Claude 또는 Cursor와 같이 이미 비용을 지불한 AI 구독을 사용할 수 있습니다.
- 외부 에이전트는 앱 코드, 메모 및 문서를 읽을 수도 있으므로 Rive 파일을 편집하고 동일한 세션에서 앱에 연결할 수 있습니다.
- 내장 에이전트는 설정이 필요 없으며 브라우저 편집기에서 작동합니다.
Rive MCP 대 Rive CLI
Rive의 최신 CLI는 다른 경로입니다. 개방형 편집기를 구동하는 대신 코딩 에이전트는 장면을 Rive RML(마크업 언어)의 텍스트로 작성하고 CLI는 앱용 .riv 파일 또는 편집기에서 열리는 .rev 파일을 빌드합니다. 로컬 미리보기를 표시하고 창 없이 프레임을 렌더링하고 테스트를 실행할 수 있으며 프로젝트를 텍스트 폴더로 유지하므로 버전 제어가 가능합니다. MCP를 사용하여 편집기에서 디자이너와 함께 작업하세요. 에이전트가 코드에서 Rive 그래픽을 빌드하거나 편집할 때 CLI를 사용합니다.
시작하기 전에 알아야 할 제한 사항
Rive의 MCP 통합은 초기 단계이며 몇 가지 실질적인 한계가 있습니다.
- macOS 및 Windows의 데스크톱 편집기만 해당되며 Rive는 파일과 함께 열려 있어야 합니다.
- AI는 열려 있는 파일에 대해 작동하므로 신뢰하기 전에 화면에서 결과를 확인하세요.
- Rive 스플래시 화면 없이 .riv 파일을 게시하려면 Cadet의 유료 요금제(매년 청구되는 월별 시트당 9달러)가 필요합니다.
- 코드를 설명하는 프롬프트보다 원하는 결과를 설명하는 프롬프트가 더 잘 작동합니다.
대안: ExodeUI의 MCP 서버
ExodeUI는 대화형 UI 및 애니메이션을 위한 브라우저 및 데스크톱 도구입니다. 또한 MCP 서버가 있으므로 Claude Code, Cursor 및 기타 AI 코딩 도구가 일반 언어 프롬프트에서 애니메이션을 만들고 편집할 수 있습니다. 그 결과 상태 머신, 스프링 물리학, 코드 제어 입력 및 이벤트가 포함된 하나의 열린 .exode JSON 파일이 생성되며 React, Vue, Svelte, Angular, Solid, React Native, SwiftUI 및 Flutter용 런타임에서 재생됩니다. 캐릭터 애니메이션보다는 인터랙티브한 제품 UI에 더 적합합니다. 이미 Rive에서 작업하고 있다면 MCP 서버를 선택하는 것이 더 간단합니다.
프로덕션 구현 예시
# Rive desktop editor must be open first
claude mcp add --transport http rive http://127.0.0.1:9791/mcp
# then start Claude Code
claude기억할 핵심 원칙
- Rive MCP 서버는 http://127.0.0.1:9791/mcp의 Rive 데스크톱 편집기 내에서 실행됩니다.
- Claude Code는 하나의 명령으로 연결됩니다. Cursor는 도구 및 MCP를 통해 연결됩니다.
- 열린 파일에 모양, 애니메이션, 상태 머신, 뷰 모델 및 Luau 스크립트를 작성할 수 있습니다.
- Rive CLI는 코드에서 Rive 파일을 빌드하는 에이전트를 위한 별도의 텍스트 기반 경로입니다.