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 ?

Créer et gérer les plans de travail — ajouter, renommer, redimensionner, organiser et cibler les plans de travail dans le fichier Rive actuel.
Inspecter et modifier le graphe de scène — interroger les hiérarchies d'objets, sélectionner des éléments, mettre à jour les propriétés, renommer, dupliquer, réorganiser, changer de parent ou supprimer des nœuds.
Construire des éléments de design — créer 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.
Créer des machines d'état et des animations — éditer des animations linéaires, des machines d'état, des états, des transitions, des conditions, des images clés et des interpolations.
Configurer la liaison de données — créer des modèles de vue, des propriétés, des instances, des liaisons et des groupes de propriétés personnalisées.
Éditer 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 console.

Documentation

Intégration 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> L'intégration MCP est actuellement disponible uniquement dans l'Éditeur de bureau pour Windows et macOS.

Vous pouvez connecter l'Éditeur Rive aux outils d'IA via MCP (Model Context Protocol). Le premier ensemble d'outils est conçu pour permettre à l'IA de gérer les tâches répétitives, comme la création de modèles de vue complexes, de machines à états avec des centaines d'états/couches, de mises en page, de formes, et plus encore.

Fonctionnalités prises en charge

Créer et gérer des fichiers Rive — ajouter, renommer, redimensionner, organiser et focaliser les plans de travail.
Inspecter et modifier la scène — interroger les hiérarchies, sélectionner des objets, mettre à jour les propriétés, renommer, dupliquer, réorganiser, reparenter ou supprimer des éléments.
Concevoir des designs — créer 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.
Créer des animations et des interactions — modifier des animations linéaires, des machines à états, des états, des transitions, des conditions, des images clés et l'interpolation.
Travailler avec la liaison de données — créer des modèles de vue, des propriétés, des instances, des liaisons et des groupes de propriétés personnalisés.
Modifier les scripts et les 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.

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

Installation

Utiliser 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 Outils & MCPs et cliquez sur Ajouter un MCP personnalisé.

<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" />

<Note>
  Pour que le serveur Rive soit disponible, vous devez avoir ouvert l'application Rive Early Access.
</Note>

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

Utiliser 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 configuré correctement, il est temps de commencer à solliciter l'IA.

Ayez un fichier Rive ouvert et un plan de travail créé. Tapez votre invite dans l'interface de chat et appuyez sur Entrée. L'IA prendra un moment pour traiter la demande.

Exemple d'invite :

```
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.