Rive MCP

Tích hợp 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> Tích hợp MCP hiện chỉ khả dụng trong trình soạn thảo desktop dành cho Windows và macOS.

Bạn có thể kết nối Rive Editor với các công cụ AI thông qua MCP (Model Context Protocol). Bộ công cụ đầu tiên được thiết kế để AI xử lý các tác vụ lặp đi lặp lại, như tạo View Model phức tạp, State Machine với hàng trăm trạng thái/lớp, Layout, Shape và nhiều hơn nữa.

Tính năng được hỗ trợ

• Tạo và quản lý tệp Rive — thêm, đổi tên, thay đổi kích thước, sắp xếp và tập trung vào artboard.
• Kiểm tra và chỉnh sửa cảnh — truy vấn phân cấp, chọn đối tượng, cập nhật thuộc tính, đổi tên, nhân bản, sắp xếp lại, thay đổi cha hoặc xóa phần tử.
• Xây dựng thiết kế — tạo shape, path, layout, instance thành phần, danh sách thành phần và các phần tử dựa trên asset.
• Tạo hoạt ảnh và tương tác — chỉnh sửa hoạt ảnh tuyến tính, state machine, trạng thái, chuyển tiếp, điều kiện, keyframe và nội suy.
• Làm việc với ràng buộc dữ liệu — tạo view model, thuộc tính, instance, ràng buộc và nhóm thuộc tính tùy chỉnh.
• Chỉnh sửa script và shader — quản lý script Luau và shader WGSL, cập nhật mã nguồn, chạy chẩn đoán, biên dịch lại, kiểm thử, tìm kiếm mã và đọc đầu ra console.

Danh sách tính năng này sẽ phát triển theo thời gian khi có thêm nhiều công cụ được bổ sung.

Cài đặt

Sử dụng Cursor

Cài đặt và mở phiên bản mới nhất của ứng dụng desktop [Rive](https://rive.app/downloads) dành cho Mac hoặc Windows. Tạo tài khoản [Cursor](https://www.cursor.com/) và cài đặt ứng dụng. Mở Cursor và điều hướng đến bảng cài đặt ở góc trên bên phải.

<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" />

Mở tab Tools & MCPs và nhấp vào Add Custom 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" />

Lưu đoạn JSON sau vào máy tính của bạn với tên `mcp.json`.

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

Bật kết nối MCP `On` Nếu mọi thứ được cài đặt chính xác, bạn sẽ thấy Rive là một máy chủ MCP khả dụng.

<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>
  Để máy chủ Rive khả dụng, bạn phải mở ứng dụng Rive Early Access.
</Note>

Thông tin bổ sung về cách thiết lập MCP có thể được tìm thấy tại đây.

Sử dụng Claude trong Terminal

Cài đặt và mở phiên bản mới nhất của [ứng dụng desktop Rive](https://rive.app/downloads) dành cho macOS hoặc Windows. Chạy lệnh sau trong terminal của bạn:

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

Chạy Claude và làm theo hướng dẫn:

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

Nó có thể làm gì?

Khi Cursor đã được cài đặt và mọi thứ được thiết lập chính xác, đã đến lúc bắt đầu đưa ra yêu cầu cho AI.

Mở một tệp Rive và tạo một Artboard. Nhập yêu cầu của bạn vào giao diện chat và nhấn enter. AI sẽ mất một chút thời gian để xử lý yêu cầu.

Ví dụ yêu cầu:

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

Khi yêu cầu đã được xử lý, gõ **End Prompt** để cho phép AI thực hiện thay đổi đối với tệp Rive.