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?

  • Artboards erstellen und verwalten — hinzufügen, umbenennen, in der Größe ändern, anordnen und fokussieren in der aktuellen Rive-Datei.
  • Szenengraph inspizieren und bearbeiten — Objekthierarchien abfragen, Elemente auswählen, Eigenschaften aktualisieren, Knoten umbenennen, duplizieren, neu anordnen, neu zuordnen oder löschen.
  • Designelemente erstellen — Formen, Pfade, Layouts, Komponenteninstanzen, Komponentenlisten und asset-basierte Elemente erstellen.
  • Zustandsautomaten und Animationen erstellen — lineare Animationen, Zustandsautomaten, Zustände, Übergänge, Bedingungen, Keyframes und Interpolation bearbeiten.
  • Datenbindung einrichten — View-Modelle, 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.

Dokumentation

Rive MCP-Integration

export const YouTube = ({id, timestamp}) => { const videoSrc = timestamp ? https://www.youtube.com/embed/${id}?start=${timestamp} : https://www.youtube.com/embed/${id}; return ; }; <Note> 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. Die ersten Werkzeuge sind darauf ausgelegt, der KI repetitive Aufgaben zu überlassen, wie das Erstellen komplexer View Models, State Machines mit Hunderten von Zuständen/Ebenen, Layouts, Formen und mehr.

Unterstützte Funktionen

  • Rive-Dateien erstellen und verwalten — Zeichenflächen hinzufügen, umbenennen, skalieren, anordnen und fokussieren.
  • Szene inspizieren und bearbeiten — Hierarchien abfragen, Objekte auswählen, Eigenschaften aktualisieren, umbenennen, duplizieren, neu anordnen, neu zuweisen oder Elemente löschen.
  • Designs erstellen — Formen, Pfade, Layouts, Komponenteninstanzen, Komponentenlisten und assetbasierte Elemente erstellen.
  • Animation und Interaktion erstellen — lineare Animationen, Zustandsautomaten, Zustände, Ü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 Konsolenausgaben lesen.
Diese Liste der Funktionen wird sich im Laufe der Zeit weiterentwickeln, wenn weitere Werkzeuge hinzugefügt werden.

Installation

Verwendung 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 Einstellungsbereich 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 als `mcp.json` auf Ihrem Computer. 
```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" />

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

Weitere Informationen zur Einrichtung von MCP finden Sie hier.

Verwendung 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 Anweisungen: 
```shell theme={null}
claude
```

Was kann es?

Sobald Cursor installiert und alles korrekt eingerichtet ist, können Sie mit der Eingabeaufforderung an die KI beginnen.

Stellen Sie sicher, dass eine Rive-Datei geöffnet und eine Zeichenfläche erstellt ist. Geben Sie Ihre Eingabeaufforderung in die Chat-Benutzeroberflä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, um der KI zu erlauben, Änderungen an der Rive-Datei vorzunehmen.