Rive MCP

공식

Rive MCP는 복잡한 View Model, 수백 개의 상태/레이어를 가진 State Machine, 레이아웃, 셰이프 등을 생성하는 반복적인 작업을 AI가 처리하도록 합니다.

rive.app에서 보기

Rive MCP(으)로 무엇을 할 수 있나요?

아트보드 생성 및 관리 — 현재 Rive 파일에서 아트보드를 추가, 이름 변경, 크기 조정, 정렬 및 포커스합니다.
씬 그래프 검사 및 편집 — 객체 계층 구조를 조회하고, 요소를 선택하며, 속성을 업데이트하고, 노드의 이름 변경, 복제, 순서 변경, 부모 변경 또는 삭제를 수행합니다.
디자인 요소 구축 — 도형, 패스, 레이아웃, 컴포넌트 인스턴스, 컴포넌트 목록 및 에셋 기반 요소를 생성합니다.
상태 머신 및 애니메이션 작성 — 선형 애니메이션, 상태 머신, 상태, 전환, 조건, 키프레임 및 보간을 편집합니다.
데이터 바인딩 설정 — 뷰 모델, 속성, 인스턴스, 바인딩 및 사용자 정의 속성 그룹을 생성합니다.
스크립트 및 셰이더 편집 — Luau 스크립트와 WGSL 셰이더를 관리하고, 소스 코드를 업데이트하며, 진단을 실행하고, 재컴파일, 테스트, 코드 검색 및 콘솔 출력을 읽습니다.

문서

Rive MCP 통합

export const YouTube = ({id, timestamp}) => { const videoSrc = timestamp ? https://www.youtube.com/embed/${id}?start=${timestamp} : https://www.youtube.com/embed/${id}; return ; }; <Note> MCP 통합은 현재 Windows 및 macOS용 데스크톱 에디터에서만 사용할 수 있습니다.

MCP(Model Context Protocol)를 통해 Rive 에디터를 AI 도구에 연결할 수 있습니다. 첫 번째 도구 세트는 복잡한 뷰 모델, 수백 개의 상태/레이어가 있는 상태 머신, 레이아웃, 셰이프 등 반복적인 작업을 AI가 처리할 수 있도록 설계되었습니다.

지원되는 기능

Rive 파일 생성 및 관리 — 아트보드 추가, 이름 변경, 크기 조정, 정렬 및 포커스.
씬 검사 및 편집 — 계층 구조 쿼리, 오브젝트 선택, 속성 업데이트, 이름 변경, 복제, 재정렬, 부모 변경 또는 요소 삭제.
디자인 구축 — 셰이프, 패스, 레이아웃, 컴포넌트 인스턴스, 컴포넌트 목록 및 에셋 기반 요소 생성.
애니메이션 및 상호작용 생성 — 선형 애니메이션, 상태 머신, 상태, 전환, 조건, 키프레임 및 보간 편집.
데이터 바인딩 작업 — 뷰 모델, 속성, 인스턴스, 바인딩 및 사용자 정의 속성 그룹 생성.
스크립트 및 셰이더 편집 — Luau 스크립트 및 WGSL 셰이더 관리, 소스 코드 업데이트, 진단 실행, 재컴파일, 테스트, 코드 검색 및 콘솔 출력 읽기.

이 기능 목록은 더 많은 도구가 추가됨에 따라 시간이 지남에 따라 발전할 것입니다.

설치

Cursor 사용

Mac 또는 Windows용 [Rive](https://rive.app/downloads) 데스크톱 앱의 최신 버전을 설치하고 엽니다. [Cursor](https://www.cursor.com/) 계정을 만들고 앱을 설치합니다. Cursor를 열고 오른쪽 상단 모서리에 있는 설정 패널로 이동합니다.

<img src="https://mintcdn.com/rive/4WyvnoR1218cyi0r/images/editor/cursor-settings-button.png?fit=max&auto=format&n=4WyvnoR1218cyi0r&q=85&s=39bb9802e31872b2317fed055e5cf24b" alt="Open cursor settings" width="1660" height="1090" data-path="images/editor/cursor-settings-button.png" />

도구 및 MCP 탭을 열고 사용자 정의 MCP 추가를 클릭합니다.

<img src="https://mintcdn.com/rive/4WyvnoR1218cyi0r/images/editor/cursor-mcp-settings.png?fit=max&auto=format&n=4WyvnoR1218cyi0r&q=85&s=d82531f4741d02cdd01233d7517a5f25" alt="Open Cursor MCPs tab" width="1658" height="1080" data-path="images/editor/cursor-mcp-settings.png" />

다음 JSON 스니펫을 컴퓨터에 `mcp.json`로 저장합니다.

```json theme={null}
{
  "mcpServers": {
      "rive": {
          "url": "http://127.0.0.1:9791/mcp"
      }
  }
}
```

MCP 연결을 `On`로 전환합니다. 모든 것이 올바르게 설치되었다면 Rive가 사용 가능한 MCP 서버로 표시되어야 합니다.

<img src="https://mintcdn.com/rive/4WyvnoR1218cyi0r/images/editor/cursor-mcp-connection.png?fit=max&auto=format&n=4WyvnoR1218cyi0r&q=85&s=59ca6c71d1cc1317320ab8272eae0e16" alt="Cursor verified" width="1660" height="1104" data-path="images/editor/cursor-mcp-connection.png" />

<Note>
  Rive 서버를 사용하려면 Rive 얼리 액세스 앱이 열려 있어야 합니다.
</Note>

MCP 설정에 대한 추가 정보는 여기에서 확인할 수 있습니다.

터미널에서 Claude 사용

macOS 또는 Windows용 [Rive 데스크톱 앱](https://rive.app/downloads)의 최신 버전을 설치하고 엽니다. 터미널에서 다음 명령을 실행합니다:

```shell theme={null}
claude mcp add --transport http rive http://127.0.0.1:9791/mcp
```

Claude를 실행하고 프롬프트를 따릅니다:

```shell theme={null}
claude
```

무엇을 할 수 있나요?

Cursor가 설치되고 모든 것이 올바르게 설정되면 AI에 프롬프트를 시작할 시간입니다.

Rive 파일을 열고 아트보드를 생성해 둡니다. 채팅 UI에 프롬프트를 입력하고 Enter 키를 누릅니다. AI가 요청을 처리하는 데 잠시 시간이 걸립니다.

프롬프트 예시:

```
Create a State Machine about birds with 20 states and 2 layers
```

요청이 처리되면 **End Prompt**를 입력하여 AI가 Rive 파일을 변경할 수 있도록 합니다.