Rive MCP

oficial

O Rive MCP permite que a IA lide com tarefas repetitivas, como criar View Models complexos, State Machines com centenas de estados/camadas, Layouts, Shapes e muito mais.

Ver em rive.app

O que você pode fazer com Rive MCP?

  • Gerenciar arquivos e artboards do Rive — Peça ao seu assistente para adicionar, renomear, redimensionar, organizar ou focar artboards em um arquivo Rive aberto.
  • Inspecionar e editar objetos de cena — Consulte hierarquias de objetos, selecione elementos e atualize propriedades, renomeie, duplique, reordene, reparente ou exclua-os.
  • Criar designs programaticamente — Crie formas, caminhos, layouts, instâncias de componentes, listas de componentes e elementos baseados em assets diretamente na cena.
  • Criar animações e interações — Edite animações lineares, máquinas de estado, estados, transições, condições, keyframes e valores de interpolação.
  • Configurar vinculação de dados — Crie view models, propriedades, instâncias, bindings e grupos de propriedades personalizados para designs complexos orientados por dados.
  • Editar scripts e shaders — Gerencie scripts Luau e shaders WGSL, atualize o código-fonte, execute diagnósticos, recompile, teste, pesquise código e leia a saída do console.

Documentação

Integração Rive MCP

Nota

A integração MCP está disponível atualmente apenas no Editor desktop para Windows e macOS.

Você pode conectar o Editor Rive a ferramentas de IA por meio do MCP (Model Context Protocol). O primeiro conjunto de ferramentas foi projetado para permitir que a IA lide com tarefas repetitivas, como criar View Models complexos, State Machines com centenas de estados/camadas, Layouts, Shapes e muito mais.

Recursos suportados

  • Criar e gerenciar arquivos Rive — adicionar, renomear, redimensionar, organizar e focar artboards.
  • Inspecionar e editar a cena — consultar hierarquias, selecionar objetos, atualizar propriedades, renomear, duplicar, reordenar, reparentar ou excluir elementos.
  • Criar designs — criar formas, caminhos, layouts, instâncias de componentes, listas de componentes e elementos baseados em assets.
  • Criar animação e interação — editar animações lineares, state machines, estados, transições, condições, keyframes e interpolação.
  • Trabalhar com data binding — criar view models, propriedades, instâncias, bindings e grupos de propriedades personalizadas.
  • Editar scripts e shaders — gerenciar scripts Luau e shaders WGSL, atualizar código-fonte, executar diagnósticos, recompilar, testar, pesquisar código e ler a saída do console.

Informação

Esta lista de recursos evoluirá com o tempo à medida que mais ferramentas forem adicionadas.

Instalação

Usando Cursor

Instale e abra a versão mais recente do aplicativo desktop [Rive](https://rive.app/downloads) para Mac ou Windows. Crie uma conta no [Cursor](https://www.cursor.com/) e instale o aplicativo. Abra o Cursor e navegue até o painel de configurações no canto superior direito. 
<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" />
Abra a aba Tools & MCPs e clique em 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" />
Salve o seguinte trecho JSON no seu computador como `mcp.json`. 
```json theme={null}
{
  "mcpServers": {
      "rive": {
          "url": "http://127.0.0.1:9791/mcp"
      }
  }
}
```
Ative a conexão MCP `On` Se tudo foi instalado corretamente, você deve ver o Rive como um servidor MCP disponível. 
<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" />

Nota

Para que o servidor Rive esteja disponível, você deve ter o aplicativo Rive Early Access aberto.

Informações adicionais sobre a configuração do MCP podem ser encontradas aqui.

Usando Claude no Terminal

Instale e abra a versão mais recente do [aplicativo desktop Rive](https://rive.app/downloads) para macOS ou Windows. Execute o seguinte comando no seu terminal: 
```shell theme={null}
claude mcp add --transport http rive http://127.0.0.1:9791/mcp
```
Execute o Claude e siga as instruções: 
```shell theme={null}
claude
```

O que ele pode fazer?

Depois que o Cursor estiver instalado e tudo estiver configurado corretamente, é hora de começar a dar comandos à IA.

Tenha um arquivo Rive aberto e um Artboard criado. Digite seu comando na interface de chat e pressione Enter. A IA levará um momento para processar a solicitação. 
Exemplo de comando:

```
Create a State Machine about birds with 20 states and 2 layers
```
Depois que a solicitação for processada, digite **End Prompt** para permitir que a IA faça alterações no arquivo Rive.