Rive MCP

officiel

Rive MCP permet à l'IA de gérer les tâches répétitives, comme la création de View Models complexes, de State Machines avec des centaines d'états/couches, de Layouts, de Shapes, et plus encore.

Voir sur rive.app

Que pouvez-vous faire avec Rive MCP ?

  • Gérer les fichiers et les planches de travail Rive — Demandez à votre assistant d’ajouter, renommer, redimensionner, réorganiser ou cibler des planches de travail dans un fichier Rive ouvert.
  • Inspecter et modifier les objets de la scène — Interrogez les hiérarchies d’objets, sélectionnez des éléments et mettez à jour leurs propriétés, renommez-les, dupliquez-les, réorganisez-les, changez leur parent ou supprimez-les.
  • Créer des designs par programmation — Créez des formes, des tracés, des mises en page, des instances de composants, des listes de composants et des éléments basés sur des ressources directement dans la scène.
  • Créer des animations et des interactions — Modifiez les animations linéaires, les machines à états, les états, les transitions, les conditions, les images clés et les valeurs d’interpolation.
  • Configurer la liaison de données — Créez des modèles de vue, des propriétés, des instances, des liaisons et des groupes de propriétés personnalisés pour des designs complexes pilotés par les données.
  • Modifier les scripts et les shaders — Gérez les scripts Luau et les shaders WGSL, mettez à jour le code source, exécutez des diagnostics, recompilez, testez, recherchez du code et lisez la sortie de la console.

Documentation

Intégration Rive MCP

Remarque

L’intégration MCP est actuellement disponible uniquement dans l’éditeur de bureau pour Windows et macOS.

Vous pouvez connecter l’éditeur Rive à des outils d’IA via MCP (Model Context Protocol). Le premier ensemble d’outils est conçu pour permettre à l’IA de gérer des tâches répétitives, comme la création de View Models complexes, de State Machines avec des centaines d’états/couches, de Layouts, de Shapes, et plus encore.

Fonctionnalités prises en charge

  • Créer et gérer des fichiers Rive — ajouter, renommer, redimensionner, organiser et cibler des artboards.
  • Inspecter et modifier la scène — interroger les hiérarchies, sélectionner des objets, mettre à jour les propriétés, renommer, dupliquer, réorganiser, re-parent ou supprimer des éléments.
  • Créer des designs — créer des formes, des chemins, des layouts, des instances de composants, des listes de composants et des éléments basés sur des ressources.
  • Créer des animations et des interactions — modifier des animations linéaires, des state machines, des états, des transitions, des conditions, des keyframes et des interpolations.
  • Travailler avec la liaison de données — créer des view models, des propriétés, des instances, des liaisons et des groupes de propriétés personnalisées.
  • Modifier des scripts et des shaders — gérer les scripts Luau et les shaders WGSL, mettre à jour le code source, exécuter des diagnostics, recompiler, tester, rechercher du code et lire la sortie de la console.

Info

Cette liste de fonctionnalités évoluera au fil du temps à mesure que d’autres outils seront ajoutés.

Installation

Avec Cursor

Installez et ouvrez la dernière version de l’application de bureau [Rive](https://rive.app/downloads) pour Mac ou Windows. Créez un compte [Cursor](https://www.cursor.com/) et installez l’application. Ouvrez Cursor et accédez au panneau des paramètres dans le coin supérieur droit. 
<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" />
Ouvrez l’onglet Tools & MCPs et cliquez sur 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" />
Enregistrez l’extrait JSON suivant sur votre ordinateur sous le nom `mcp.json`. 
```json theme={null}
{
  "mcpServers": {
      "rive": {
          "url": "http://127.0.0.1:9791/mcp"
      }
  }
}
```
Activez la connexion MCP `On` Si tout a été installé correctement, vous devriez voir Rive comme serveur 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" />

Remarque

Pour que le serveur Rive soit disponible, vous devez avoir l’application Rive Early Access ouverte.

Des informations supplémentaires sur la configuration de MCP sont disponibles ici.

Avec Claude dans le terminal

Installez et ouvrez la dernière version de l’[application de bureau Rive](https://rive.app/downloads) pour macOS ou Windows. Exécutez la commande suivante dans votre terminal : 
```shell theme={null}
claude mcp add --transport http rive http://127.0.0.1:9791/mcp
```
Lancez Claude et suivez les instructions : 
```shell theme={null}
claude
```

Que peut-il faire ?

Une fois Cursor installé et tout correctement configuré, il est temps de commencer à donner des instructions à l’IA.

Ayez un fichier Rive ouvert et un Artboard créé. Saisissez votre instruction dans l’interface de chat et appuyez sur Entrée. L’IA prendra un moment pour traiter la demande. 
Exemple d’instruction :

```
Create a State Machine about birds with 20 states and 2 layers
```
Une fois la demande traitée, tapez **End Prompt** pour permettre à l’IA d’apporter des modifications au fichier Rive.