Rive MCP

offiziell

Rive MCP lässt KI sich wiederholende Aufgaben übernehmen, wie das Erstellen komplexer View Models, State Machines mit Hunderten von Zuständen/Ebenen, Layouts, Shapes und mehr.

Auf rive.app ansehen

Was kann man mit Rive MCP machen?

  • Rive-Dateien und Artboards verwalten — Bitten Sie Ihren Assistenten, Artboards in einer geöffneten Rive-Datei hinzuzufügen, umzubenennen, zu skalieren, anzuordnen oder zu fokussieren.
  • Szenenobjekte untersuchen und bearbeiten — Objekthierarchien abfragen, Elemente auswählen und Eigenschaften aktualisieren, umbenennen, duplizieren, neu anordnen, neu zuordnen oder löschen.
  • Designs programmatisch erstellen — Formen, Pfade, Layouts, Komponenteninstanzen, Komponentenlisten und asset-basierte Elemente direkt in der Szene erstellen.
  • Animationen und Interaktionen erstellen — Lineare Animationen, State Machines, Zustände, Übergänge, Bedingungen, Keyframes und Interpolationswerte bearbeiten.
  • Datenbindung einrichten — View Models, Eigenschaften, Instanzen, Bindungen und benutzerdefinierte Eigenschaftsgruppen für komplexe datengetriebene Designs erstellen.
  • Skripte und Shader bearbeiten — Luau-Skripte und WGSL-Shader verwalten, Quellcode aktualisieren, Diagnosen ausführen, neu kompilieren, testen, Code durchsuchen und Konsolenausgabe lesen.

Dokumentation

Rive MCP-Integration

Hinweis

Die MCP-Integration ist derzeit nur im Desktop-Editor für Windows und macOS verfügbar.

Sie können den Rive-Editor über MCP (Model Context Protocol) mit KI-Tools verbinden. Der erste Satz an Tools ist darauf ausgelegt, KI repetitive Aufgaben übernehmen zu lassen, wie das Erstellen komplexer View Models, State Machines mit Hunderten von States/Layern, Layouts, Shapes und mehr.

Unterstützte Funktionen

  • Rive-Dateien erstellen und verwalten – Artboards hinzufügen, umbenennen, skalieren, anordnen und fokussieren.
  • Szene inspizieren und bearbeiten – Hierarchien abfragen, Objekte auswählen, Eigenschaften aktualisieren, Elemente umbenennen, duplizieren, neu anordnen, neu zuordnen oder löschen.
  • Designs erstellen – Shapes, Pfade, Layouts, Komponenteninstanzen, Komponentenlisten und asset-basierte Elemente erstellen.
  • Animation und Interaktion erstellen – lineare Animationen, State Machines, States, Übergänge, Bedingungen, Keyframes und Interpolation bearbeiten.
  • Mit Datenbindung arbeiten – View Models, Eigenschaften, Instanzen, Bindungen und benutzerdefinierte Eigenschaftsgruppen erstellen.
  • Skripte und Shader bearbeiten – Luau-Skripte und WGSL-Shader verwalten, Quellcode aktualisieren, Diagnosen ausführen, neu kompilieren, testen, Code durchsuchen und Konsolenausgabe lesen.

Info

Diese Funktionsliste wird sich im Laufe der Zeit erweitern, da weitere Tools hinzugefügt werden.

Installation

Mit Cursor

Installieren und öffnen Sie die neueste Version der [Rive](https://rive.app/downloads)-Desktop-App für Mac oder Windows. Erstellen Sie ein [Cursor](https://www.cursor.com/)-Konto und installieren Sie die App. Öffnen Sie Cursor und navigieren Sie zum Einstellungsfeld in der oberen rechten Ecke. 
<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" />
Öffnen Sie den Tab „Tools & MCPs“ und klicken Sie auf „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" />
Speichern Sie den folgenden JSON-Ausschnitt auf Ihrem Computer als `mcp.json`. 
```json theme={null}
{
  "mcpServers": {
      "rive": {
          "url": "http://127.0.0.1:9791/mcp"
      }
  }
}
```
Schalten Sie die MCP-Verbindung `On` Wenn alles korrekt installiert wurde, sollten Sie Rive als verfügbaren MCP-Server sehen. 
<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" />

Hinweis

Damit der Rive-Server verfügbar ist, muss die Rive Early Access App geöffnet sein.

Weitere Informationen zur Einrichtung von MCP finden Sie hier.

Mit Claude im Terminal

Installieren und öffnen Sie die neueste Version der [Rive-Desktop-App](https://rive.app/downloads) für macOS oder Windows. Führen Sie den folgenden Befehl in Ihrem Terminal aus: 
```shell theme={null}
claude mcp add --transport http rive http://127.0.0.1:9791/mcp
```
Führen Sie Claude aus und folgen Sie den Eingabeaufforderungen: 
```shell theme={null}
claude
```

Was kann es tun?

Sobald Cursor installiert und alles korrekt eingerichtet ist, können Sie damit beginnen, die KI aufzufordern.

Stellen Sie sicher, dass eine Rive-Datei geöffnet und ein Artboard erstellt ist. Geben Sie Ihre Eingabeaufforderung in die Chat-Oberfläche ein und drücken Sie die Eingabetaste. Die KI benötigt einen Moment, um die Anfrage zu verarbeiten. 
Beispiel-Eingabeaufforderung:

```
Create a State Machine about birds with 20 states and 2 layers
```
Sobald die Anfrage verarbeitet wurde, geben Sie **End Prompt** ein, damit die KI Änderungen an der Rive-Datei vornehmen kann.