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?

  • Crear y gestionar mesas de trabajo — agregar, renombrar, redimensionar, organizar y enfocar mesas de trabajo en el archivo Rive actual.
  • Inspeccionar y editar el grafo de escena — consultar jerarquías de objetos, seleccionar elementos, actualizar propiedades, renombrar, duplicar, reordenar, cambiar de padre o eliminar nodos.
  • Construir elementos de diseño — crear formas, trazados, diseños, instancias de componentes, listas de componentes y elementos basados en activos.
  • Crear máquinas de estado y animaciones — editar animaciones lineales, máquinas de estado, estados, transiciones, condiciones, fotogramas clave e interpolación.
  • Configurar enlace de datos — crear modelos de vista, propiedades, instancias, enlaces y grupos de propiedades personalizados.
  • Editar scripts y shaders — gestionar scripts Luau y shaders WGSL, actualizar código fuente, ejecutar diagnósticos, recompilar, probar, buscar código y leer la salida de la consola.

Documentación

Integración de 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> La integración MCP actualmente solo está disponible 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 Modelos de Vista complejos, Máquinas de Estado con cientos de estados/capas, Diseños, Formas y más.

Funciones compatibles

  • Crear y gestionar archivos de Rive — añadir, renombrar, redimensionar, organizar y enfocar mesas de trabajo.
  • Inspeccionar y editar la escena — consultar jerarquías, seleccionar objetos, actualizar propiedades, renombrar, duplicar, reordenar, reasignar padre o eliminar elementos.
  • Construir diseños — crear formas, trazados, diseños, instancias de componentes, listas de componentes y elementos basados en activos.
  • Crear animación e interacción — editar animaciones lineales, máquinas de estado, estados, transiciones, condiciones, fotogramas clave e interpolación.
  • Trabajar con enlace de datos — crear modelos de vista, propiedades, instancias, enlaces y grupos de propiedades personalizados.
  • 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.
Esta lista de funciones evolucionará con el tiempo a medida que se añadan 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 Herramientas y MCPs y haz clic en Añadir 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" />
Guarda el siguiente fragmento JSON en tu ordenador 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" />

<Note>
  Para que el servidor Rive esté disponible, debes tener abierta la aplicación Rive Early Access.
</Note>

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

Usando Claude en la Terminal

Instala y abre la última versión de la [aplicación de escritorio 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 configurado correctamente, es hora de empezar a dar instrucciones a la IA.

Ten un archivo de Rive abierto y una mesa de trabajo creada. Escribe tu instrucción en la interfaz de chat y presiona enter. La IA tardará un momento en procesar la solicitud. 
Ejemplo de instrucción:

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