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 verwalten — Artboards in einer geöffneten Rive-Datei hinzufügen, umbenennen, in der Größe ändern, anordnen und fokussieren.
  • Die Szene bearbeiten — Hierarchien abfragen, Objekte auswählen, Eigenschaften aktualisieren, Elemente umbenennen, duplizieren, neu anordnen, neu zuordnen oder löschen.
  • Designs erstellen — Formen, Pfade, Layouts, Komponenteninstanzen, Komponentenlisten und assetbasierte Elemente erstellen.
  • Mit Bones riggen — Root-Bones und Bone-Ketten anhand von Länge und Rotation oder anhand von Kopf- und Endpunkten erstellen und sie anschließend binden und gewichten.
  • Animieren und Interaktionen hinzufügen — Lineare Animationen, State Machines, Zustände, Übergänge, Bedingungen, Keyframes und Interpolation bearbeiten.
  • Mit Datenbindung arbeiten — View-Modelle, Eigenschaften, Instanzen, Bindungen und benutzerdefinierte Eigenschaftsgruppen erstellen.

Dokumentation

Rive MCP-Integration

[!NOTE]

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

Du kannst den Rive Editor über MCP (Model Context Protocol) mit KI-Tools verbinden. Die ersten Tools sollen es der KI ermöglichen, repetitive Aufgaben zu übernehmen, etwa komplexe View Models, State Machines mit Hunderten von Zuständen und Ebenen, Layouts, Shapes und mehr zu erstellen.

YouTube video player

Unterstützte Funktionen

  • Rive-Dateien erstellen und verwalten — Artboards hinzufügen, umbenennen, in der Größe ändern, anordnen und fokussieren.
  • Die Szene untersuchen 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 Elemente auf Asset-Basis erstellen.
  • Mit Bones riggen — Root-Bones und Bone-Ketten erstellen, anhand von Länge und Rotation oder anhand von Kopf- und Endpunkten, und sie anschließend binden und gewichten.
  • Animationen und Interaktionen erstellen — lineare Animationen, State Machines, Zustände, Übergänge, Bedingungen, Keyframes und Interpolation bearbeiten.
  • Mit Datenbindung arbeiten — View Models, Eigenschaften, Instanzen, Bindings 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.

[!NOTE]

Diese Funktionsliste wird im Laufe der Zeit erweitert, wenn weitere Tools hinzukommen.

Änderungen, die dazu führen würden, dass Runtimes die Datei ablehnen oder abstürzen, etwa zwei Farben auf einer Füllung oder ein Farbverlauf außerhalb einer Füllung oder Kontur, werden abgelehnt und rückgängig gemacht. Farben werden wie im Hex-Feld gelesen: #fff ist Weiß, und Namen wie red werden abgelehnt.

Installation

Cursor verwenden

1. Rive öffnen

Installiere und öffne die neueste Version der Rive-Desktop-App für Mac oder Windows.

2. Cursor einrichten

Erstelle ein Cursor-Konto und installiere die App.

3. Cursor-Einstellungen öffnen

Öffne Cursor und navigiere zum Einstellungsbereich oben rechts.

Open cursor settings

4. Benutzerdefiniertes MCP hinzufügen

Öffne den Tab „Tools & MCPs“ und klicke auf „Add Custom MCP“.

Open Cursor MCPs tab

5. Konfiguration speichern

Speichere den folgenden JSON-Ausschnitt auf deinem Computer unter dem Namen mcp.json.

{
  "mcpServers": {
      "rive": {
          "url": "http://127.0.0.1:9791/mcp"
      }
  }
}

6. Verbindung aktivieren

Aktiviere die MCP-Verbindung On

7. Verbindung überprüfen

Wenn alles korrekt installiert wurde, sollte Rive als verfügbarer MCP-Server angezeigt werden.

Cursor verified

[!NOTE]

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

Weitere Informationen zur Einrichtung von MCP findest du hier.

Claude im Terminal verwenden

YouTube video player

1. Rive öffnen

Installiere und öffne die neueste Version der Rive-Desktop-App für macOS oder Windows.

2. MCP-Server hinzufügen

Führe den folgenden Befehl in deinem Terminal aus:

claude mcp add --transport http rive http://127.0.0.1:9791/mcp

3. Claude starten

Starte Claude und folge den Anweisungen:

claude

Was kann es?

Sobald dein KI-Tool verbunden ist, kannst du mit dem Prompten der KI beginnen.

1. Deine Rive-Datei öffnen

Öffne eine Rive-Datei und erstelle ein Artboard.

2. Prompt eingeben

Gib deinen Prompt in die Chat-Oberfläche ein und drücke die Eingabetaste. Die KI benötigt einen Moment, um die Anfrage zu verarbeiten. Anschließend werden die Änderungen in der geöffneten Rive-Datei angezeigt.

Beispiel-Prompt:

Create a State Machine about birds with 20 states and 2 layers