Rive MCP

oficial

Rive MCP permite que la IA maneje tareas repetitivas, como crear Modelos de Vista complejos, Máquinas de Estado con cientos de estados/capas, Diseños, Formas y más.

Ver en rive.app

¿Qué puedes hacer con Rive MCP?

  • Manage Rive files and artboards — Pídele a tu asistente que agregue, renombre, redimensione, organice o enfoque artboards en un archivo Rive abierto.
  • Inspect and edit scene objects — Consulta jerarquías de objetos, selecciona elementos y actualiza propiedades, renombra, duplica, reordena, reasigna de padre o elimínalos.
  • Build designs programmatically — Crea formas, trazados, diseños, instancias de componentes, listas de componentes y elementos basados en activos directamente en la escena.
  • Create animations and interactions — Edita animaciones lineales, máquinas de estado, estados, transiciones, condiciones, fotogramas clave y valores de interpolación.
  • Set up data binding — Crea modelos de vista, propiedades, instancias, enlaces y grupos de propiedades personalizados para diseños complejos basados en datos.
  • Edit scripts and shaders — Gestiona scripts de Luau y shaders de WGSL, actualiza el código fuente, ejecuta diagnósticos, recompila, prueba, busca código y lee la salida de la consola.

Documentación

Integración de Rive MCP

Nota

La integración MCP está disponible actualmente solo en el Editor de escritorio para Windows y macOS.

Puedes conectar el Editor de Rive a herramientas de IA a través de MCP (Protocolo de Contexto de Modelo). El primer conjunto de herramientas está diseñado para que la IA maneje tareas repetitivas, como crear View Models complejos, State Machines con cientos de estados/capas, Layouts, Shapes y más.

Funciones compatibles

  • Crear y gestionar archivos de Rive — agregar, renombrar, redimensionar, organizar y enfocar artboards.
  • Inspeccionar y editar la escena — consultar jerarquías, seleccionar objetos, actualizar propiedades, renombrar, duplicar, reordenar, cambiar de padre o eliminar elementos.
  • Construir diseños — crear formas, trazados, layouts, instancias de componentes, listas de componentes y elementos basados en assets.
  • Crear animación e interacción — editar animaciones lineales, state machines, estados, transiciones, condiciones, keyframes e interpolación.
  • Trabajar con enlace de datos — crear view models, propiedades, instancias, enlaces y grupos de propiedades personalizadas.
  • Editar scripts y shaders — gestionar scripts de Luau y shaders de WGSL, actualizar código fuente, ejecutar diagnósticos, recompilar, probar, buscar código y leer la salida de la consola.

Información

Esta lista de funciones evolucionará con el tiempo a medida que se agreguen más herramientas.

Instalación

Usando Cursor

Instala y abre la última versión de la aplicación de escritorio [Rive](https://rive.app/downloads) para Mac o Windows. Crea una cuenta de [Cursor](https://www.cursor.com/) e instala la aplicación. Abre Cursor y navega al panel de configuración en la esquina superior derecha. 
<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" />
Abre la pestaña Tools & MCPs y haz clic en 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" />
Guarda el siguiente fragmento JSON en tu computadora como `mcp.json`. 
```json theme={null}
{
  "mcpServers": {
      "rive": {
          "url": "http://127.0.0.1:9791/mcp"
      }
  }
}
```
Activa la conexión MCP `On` Si todo se instaló correctamente, deberías ver Rive como un servidor MCP disponible. 
<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 el servidor de Rive esté disponible, debes tener abierta la aplicación Rive Early Access.

Puedes encontrar información adicional sobre la configuración de MCP aquí.

Usando Claude en Terminal

Instala y abre la última versión de la [aplicación de escritorio de Rive](https://rive.app/downloads) para macOS o Windows. Ejecuta el siguiente comando en tu terminal: 
```shell theme={null}
claude mcp add --transport http rive http://127.0.0.1:9791/mcp
```
Ejecuta Claude y sigue las indicaciones: 
```shell theme={null}
claude
```

¿Qué puede hacer?

Una vez que Cursor esté instalado y todo esté configurado correctamente, es momento de comenzar a dar instrucciones a la IA.

Ten un archivo de Rive abierto y un Artboard creado. Escribe tu instrucción en la interfaz de chat y presiona enter. La IA tomará un momento para procesar la solicitud. 
Ejemplo de instrucción:

```
Create a State Machine about birds with 20 states and 2 layers
```
Una vez que la solicitud haya sido procesada, escribe **End Prompt** para permitir que la IA realice cambios en el archivo de Rive.