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?

  • Criar e gerenciar pranchetas — adicionar, renomear, redimensionar, organizar e focar pranchetas no arquivo Rive atual.
  • Inspecionar e editar o grafo de cena — consultar hierarquias de objetos, selecionar elementos, atualizar propriedades, renomear, duplicar, reordenar, reparentear ou excluir nós.
  • Construir elementos de design — criar formas, caminhos, layouts, instâncias de componentes, listas de componentes e elementos baseados em assets.
  • Criar máquinas de estado e animações — editar animações lineares, máquinas de estado, estados, transições, condições, quadros-chave e interpolação.
  • Configurar vinculação de dados — criar modelos de visualização, propriedades, instâncias, vinculações 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.

Documentação

Integração 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> 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 através do MCP (Model Context Protocol). O primeiro conjunto de ferramentas foi projetado para permitir que a IA lide com tarefas repetitivas, como criar Modelos de Visualização complexos, Máquinas de Estado com centenas de estados/camadas, Layouts, Formas e muito mais.

Funcionalidades Suportadas

  • Criar e gerenciar arquivos Rive — adicionar, renomear, redimensionar, organizar e focar pranchetas.
  • Inspecionar e editar a cena — consultar hierarquias, selecionar objetos, atualizar propriedades, renomear, duplicar, reordenar, reparentear ou excluir elementos.
  • Construir designs — criar formas, caminhos, layouts, instâncias de componentes, listas de componentes e elementos baseados em ativos.
  • Criar animação e interação — editar animações lineares, máquinas de estado, estados, transições, condições, quadros-chave e interpolação.
  • Trabalhar com vinculação de dados — criar modelos de visualização, propriedades, instâncias, vínculos e grupos de propriedades personalizados.
  • 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.
Esta lista de funcionalidades evoluirá com o tempo, à medida que mais ferramentas forem adicionadas.

Instalação

Usando o 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 Ferramentas e MCPs e clique em Adicionar MCP Personalizado. 
<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ê deverá 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" />

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

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

Usando o 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?

Uma vez que o Cursor esteja instalado e tudo configurado corretamente, é hora de começar a solicitar à IA.

Tenha um arquivo Rive aberto e uma Prancha criada. Digite seu prompt na interface de chat e pressione enter. A IA levará um momento para processar a solicitação. 
Exemplo de prompt:

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