Rive MCP

официальный

Rive MCP позволяет ИИ выполнять повторяющиеся задачи, такие как создание сложных View Models, State Machines с сотнями состояний/слоев, Layouts, Shapes и многое другое.

Смотреть на rive.app

Что можно делать с Rive MCP?

  • Create and manage artboards — добавление, переименование, изменение размера, упорядочивание и фокусировка артбордов в текущем файле Rive.
  • Inspect and edit the scene graph — запрос иерархий объектов, выбор элементов, обновление свойств, переименование, дублирование, изменение порядка, смена родителя или удаление узлов.
  • Build design elements — создание фигур, путей, макетов, экземпляров компонентов, списков компонентов и элементов на основе ассетов.
  • Author state machines and animations — редактирование линейных анимаций, конечных автоматов, состояний, переходов, условий, ключевых кадров и интерполяции.
  • Set up data binding — создание моделей представления, свойств, экземпляров, привязок и пользовательских групп свойств.
  • Edit scripts and shaders — управление скриптами 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.

Вы можете подключить Rive Editor к инструментам ИИ через MCP (Model Context Protocol). Первый набор инструментов предназначен для того, чтобы ИИ выполнял повторяющиеся задачи, такие как создание сложных View Models, State Machines с сотнями состояний/слоёв, Layouts, Shapes и многого другого.

Поддерживаемые возможности

  • Создание и управление файлами Rive — добавление, переименование, изменение размера, упорядочивание и фокусировка артбордов.
  • Инспектирование и редактирование сцены — запрос иерархий, выбор объектов, обновление свойств, переименование, дублирование, изменение порядка, смена родителя или удаление элементов.
  • Создание дизайна — создание фигур, путей, макетов, экземпляров компонентов, списков компонентов и элементов на основе ассетов.
  • Создание анимации и взаимодействия — редактирование линейных анимаций, машин состояний, состояний, переходов, условий, ключевых кадров и интерполяции.
  • Работа с привязкой данных — создание моделей представлений, свойств, экземпляров, привязок и пользовательских групп свойств.
  • Редактирование скриптов и шейдеров — управление скриптами Luau и шейдерами WGSL, обновление исходного кода, запуск диагностики, перекомпиляция, тестирование, поиск по коду и чтение вывода консоли.
Этот список возможностей будет со временем расширяться по мере добавления новых инструментов.

Установка

Использование Cursor

Установите и откройте последнюю версию десктопного приложения [Rive](https://rive.app/downloads) для Mac или Windows. Создайте аккаунт [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" />
Откройте вкладку Tools & MCPs и нажмите 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" />
Сохраните следующий фрагмент 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 Early Access.
</Note>

Дополнительную информацию по настройке MCP можно найти здесь.

Использование Claude в терминале

Установите и откройте последнюю версию [десктопного приложения Rive](https://rive.app/downloads) для macOS или Windows. Выполните следующую команду в терминале: 
```shell theme={null}
claude mcp add --transport http rive http://127.0.0.1:9791/mcp
```
Запустите Claude и следуйте подсказкам: 
```shell theme={null}
claude
```

Что он может делать?

Когда Cursor установлен и всё настроено правильно, пора начинать давать запросы ИИ.

Откройте файл Rive и создайте артборд. Введите ваш запрос в интерфейс чата и нажмите Enter. ИИ потребуется некоторое время для обработки запроса. 
Пример запроса:

```
Create a State Machine about birds with 20 states and 2 layers
```
После обработки запроса введите **End Prompt**, чтобы разрешить ИИ вносить изменения в файл Rive.