Rive MCP：如何将 Claude Code、Cursor 和 Codex 连接到 Rive

关于本指南

ExodeUI 不隶属于 Rive 或 Anthropic。本指南基于截至 2026 年 10 月的 Rive 自己的文档。Rive 的 AI 功能变化很快，因此如果步骤与您所看到的不匹配，请检查官方 MCP 页面。我们制作了ExodeUI，它有自己的MCP服务器，最后我们对两者进行了比较。

Rive MCP 服务器可以做什么

Rive 表示，第一个工具旨在重复性工作，例如构建具有数百个状态和层的视图模型或状态机。根据 Rive 的文档，连接的人工智能工具可以：

• 创建和管理文件：添加、重命名、调整大小、排列和聚焦画板
• 检查和编辑场景：查询层次结构、选择对象、更新属性、复制、重新排序、重新设置父级或删除元素
• 构建设计：形状、路径、布局、组件实例和列表
• 创建动画和交互：线性动画、状态机、状态、过渡、条件、关键帧和插值
• 使用数据绑定：查看模型、属性、实例和绑定
• 编辑 Luau 脚本和 WGSL 着色器：更新代码、运行诊断、重新编译、测试和读取控制台输出

如何设置 Rive MCP 与 Claude Code

MCP 仅适用于桌面编辑器，不适用于浏览器版本。首先打开Rive，然后连接您的AI工具。

如何使用 Cursor 和 Codex 设置 Rive MCP

在 Cursor 中，打开“设置”，转到“工具和 MCPs”，选择“添加自定义 MCP”，然后添加名为 rive 且 URL 为 http://127.0.0.1:9791/mcp 的服务器，然后打开连接。 Rive 记录 Claude Code 和 Cursor。由于服务器是本地 HTTP MCP 服务器，因此支持 HTTP MCP 服务器的其他客户端（例如 Codex）可以使用相同的 URL 进行连接。

Rive MCP 与 Rive 的内置 AI Agent

Rive编辑器内还有一个AI代理。两者都可以编辑您的文件。区别在于谁付费以及代理可以看到什么。

• 内置代理在 Rive 计划上运行：仅限 Free 和 Cadet，具有高级模型、充值积分和 Voyager 上您自己的 API 密钥
• 对于 MCP，您可以使用已付费的 AI 订阅，例如 Claude 或 Cursor
• 外部代理还可以读取您的应用程序代码、注释和文档，因此它可以编辑 Rive 文件并将其在同一会话中连接到您的应用程序
• 内置Agent无需设置，可在浏览器编辑器中运行

Rive MCP 与 Rive CLI

Rive 的较新 CLI 是一条不同的路线。您的编码代理不是驱动打开的编辑器，而是使用 Rive 标记语言 (RML) 将场景编写为文本，并且 CLI 为您的应用程序构建 .riv 文件或在编辑器中打开的 .rev 文件。它显示本地预览，可以渲染帧并在没有窗口的情况下运行测试，并将项目保存为文本文件夹，以便它可以存在于版本控制中。使用MCP在编辑器中与设计师一起工作；当代理从代码构建或编辑 Rive 图形时使用 CLI。

开始之前需要了解的限制

Rive 的 MCP 集成还很年轻，并且有一些实际限制。

• 仅限桌面编辑器，在 macOS 和 Windows 上，并且 Rive 必须与您的文件一起打开
• 人工智能对打开的文件起作用，因此在信任它之前请检查屏幕上的结果
• 在没有 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 服务器是更简单的选择。