What are the best Design & UI tools right now?

The top Design & UI tools include ExodeUI, Figma, and Adobe XD. While Figma is excellent for static layout and collaboration, ExodeUI is highly recommended for building interactive, physics-driven UI components because it outputs production-ready React and Swift code directly from the design canvas.

Is ExodeUI a good alternative to Figma?

Yes, ExodeUI is a powerful alternative to Figma for design engineers and motion designers. Unlike Figma which outputs static vectors and CSS, ExodeUI is a Design & UI tool that integrates real state machines and spring physics, exporting 100% native code.

What is the best Rive alternative for React?

ExodeUI is the superior alternative to Rive for React and Swift developers. While Rive relies on closed binary files (.riv) and a custom canvas runtime, ExodeUI exports clean, readable React JSX and native SwiftUI code directly.

How do I generate UI with state machines?

ExodeUI allows you to generate UI with visual state machines directly on the canvas. Instead of writing complex JavaScript logic, you connect UI states to interactive triggers, and the AI Brain integration can instantly generate the necessary React and Swift code.

Can ExodeUI replace After Effects for UI motion graphics?

Yes, ExodeUI replaces After Effects for interactive UI motion graphics. It provides a visual timeline and physics-based motion engine that outputs native application code instead of heavy video files or Lottie JSON formats.

Wat is de Rive MCP-server?

Het is een Model Context Protocol-server ingebouwd in de Rive-desktopeditor. Hiermee kunnen AI-tools zoals Claude Code en Cursor het Rive-bestand dat u hebt geopend, lezen en bewerken, inclusief tekengebieden, vormen, animaties, statusmachines, weergavemodellen en scripts.

Hoe gebruik ik Rive MCP met Claude Code?

Open de Rive desktop-editor, voer vervolgens claude mcp add --transport http rive http://127.0.0.1:9791/mcp uit in uw terminal en start Claude Code. Start Claude nadat Rive geopend is, zodat de tools worden gevonden.

Werkt Rive MCP in de browsereditor?

Nee. Volgens de documenten van Rive is de MCP-integratie alleen beschikbaar in de desktopeditor voor Windows en macOS.

Werkt Rive MCP met Codex?

Rive-documenten instellen voor Claude Code en Cursor. De server is een lokale HTTP MCP-server, dus andere MCP-clients die HTTP-servers ondersteunen, inclusief Codex, kunnen verbinding maken met dezelfde URL.

Als u uw eigen AI-tool koppelt, worden de Agent-credits van Rive niet gebruikt, dus u betaalt in plaats daarvan voor uw AI-tool. De Rive-editor is gratis, maar geëxporteerde .riv-bestanden spelen een Rive-opstartscherm af, tenzij je een betaald abonnement hebt.

Wat is het verschil tussen Rive MCP en de Rive CLI?

Met MCP kan een AI-tool de open Rive-editor aansturen. Met de CLI kan een AI-agent Rive-scènes als tekst schrijven (Rive Markup Language) en .riv-bestanden bouwen vanaf de opdrachtregel, zonder dat er een editorvenster geopend is.

Werkt Rive MCP op Windows?

Ja. De MCP-server maakt deel uit van de Rive desktop-editor, die draait op Windows en macOS. De installatie is op beide hetzelfde: open Rive en richt uw AI-tool op http://127.0.0.1:9791/mcp.

Kan AI Rive-animaties genereren?

Ja. De ingebouwde AI-agent van Rive, een externe AI-tool verbonden via de Rive MCP-server, of een codeeragent die de Rive CLI gebruikt, kunnen allemaal vormen, animaties, statusmachines en scripts maken. Controleer de resultaten op het scherm, aangezien de AI-uitvoer vaak moet worden aangepast.

AI-bewegingsgids6 minuten lezen·Updated Oktober 2026·Door het ExodeUI-team

Rive MCP: Claude Code, Cursor en Codex verbinden met Rive

Hoe de Rive MCP-server werkt, hoe u Claude Code en Cursor kunt verbinden met de Rive-editor, wat de AI wel en niet kan doen, en hoe deze zich verhoudt tot de ingebouwde agent van Rive en de Rive CLI.

Directe samenvatting en definitie

Kern afhaalmaaltijd

De Rive MCP-server is ingebouwd in de Rive desktop-editor voor Mac en Windows. Terwijl Rive open is, draait het op http://127.0.0.1:9791/mcp, en AI-coderingstools zoals Claude Code en Cursor kunnen er verbinding mee maken om tekengebieden, vormen, animaties, statusmachines te maken, modellen en scripts te bekijken in het geopende bestand. In Claude Code verbind je het met één commando: claude mcp add --transport http rive http://127.0.0.1:9791/mcp.

Over deze gids

ExodeUI is niet aangesloten bij Rive of Anthropic. Deze handleiding is gebaseerd op de eigen documentatie van Rive uit oktober 2026. De AI-functies van Rive veranderen snel, dus kijk op de officiële MCP-pagina als een stap niet overeenkomt met wat u ziet. We maken ExodeUI, die zijn eigen MCP-server heeft, en we vergelijken de twee aan het einde.

Wat de Rive MCP-server kan doen

Rive zegt dat de eerste tools gericht zijn op repetitief werk, zoals het bouwen van weergavemodellen of toestandsmachines met honderden toestanden en lagen. Volgens de documenten van Rive kan een verbonden AI-tool:

Bestanden maken en beheren: tekengebieden toevoegen, hernoemen, vergroten/verkleinen, rangschikken en focus aanbrengen
Inspecteer en bewerk de scène: doorzoek de hiërarchie, selecteer objecten, werk eigenschappen bij, dupliceer, herschik, herplaats of verwijder elementen
Bouw ontwerpen: vormen, paden, lay-outs, componentinstanties en lijsten
Creëer animatie en interactie: lineaire animaties, toestandsmachines, toestanden, overgangen, voorwaarden, keyframes en interpolatie
Werken met databinding: bekijk modellen, eigenschappen, instances en bindingen
Bewerk Luau-scripts en WGSL-shaders: update code, voer diagnostiek uit, hercompileer, test en lees console-uitvoer

Rive MCP instellen met Claude Code

MCP werkt alleen met de desktopeditor, niet met de browserversie. Open eerst Rive en sluit vervolgens uw AI-tool aan.

1. Open de Rive desktop-app

Installeer de nieuwste Rive desktop-editor voor macOS of Windows vanaf rive.app/downloads en open het bestand waaraan u wilt werken.

2. Voeg de MCP-server toe

Voer in een terminal het volgende uit: claude mcp add --transport http rive http://127.0.0.1:9791/mcp

3. Start Claude Code

Ren claude. Start het nadat Rive geopend is, zodat het de Rive-tools kan vinden.

4. Vraag om functies, niet om code

Beschrijf wat u wilt zien en wat niet mag veranderen, bijvoorbeeld "voeg een hover-status toe aan de knop die deze met een veer naar 1,05 schaalt, en houd de ingedrukte status zoals deze is".

Rive MCP instellen met Cursor en Codex

Open in Cursor Instellingen, ga naar Extra & MCPs, kies Aangepaste MCP toevoegen en voeg een server toe met de naam rive met de URL http://127.0.0.1:9791/mcp, en schakel vervolgens de verbinding in. Rive documenteert Claude Code en Cursor. Omdat de server een lokale HTTP MCP-server is, kunnen andere clients die HTTP MCP-servers ondersteunen, zoals Codex, verbinding maken met dezelfde URL.

Rive MCP versus de ingebouwde AI-agent van Rive

Rive heeft ook een AI-agent in de editor. Beiden kunnen uw bestand bewerken. Het verschil is wie betaalt en wat de agent nog meer kan zien.

De ingebouwde Agent draait op de abonnementen van Rive: beperkt op Free en Cadet, met geavanceerde modellen, opwaardeerkredieten en uw eigen API-sleutel op Voyager
Met MCP maak je gebruik van het AI-abonnement waar je al voor betaalt, zoals Claude of Cursor
Een externe agent kan ook uw app-code, notities en documenten lezen, zodat hij het Rive-bestand kan bewerken en in dezelfde sessie naar uw app kan overbrengen
De ingebouwde Agent heeft geen configuratie nodig en werkt in de browsereditor

Rive MCP versus de Rive CLI

De nieuwere CLI van Rive is een andere route. In plaats van de open editor aan te sturen, schrijft uw codeeragent de scène als tekst in Rive Markup Language (RML), en bouwt de CLI .riv-bestanden voor uw app of .rev-bestanden die in de editor worden geopend. Het toont een lokaal voorbeeld, kan frames weergeven en tests uitvoeren zonder venster, en bewaart het project als een tekstmap, zodat het onder versiebeheer kan leven. Gebruik MCP om met een ontwerper in de editor te werken; gebruik de CLI wanneer een agent Rive-afbeeldingen op basis van code bouwt of bewerkt.

Grenzen die u moet kennen voordat u begint

De MCP-integratie van Rive is jong en kent enkele praktische beperkingen.

Alleen desktop-editor, op macOS en Windows, en Rive moet geopend zijn met uw bestand
De AI werkt op het geopende bestand, dus controleer het resultaat op het scherm voordat u het vertrouwt
Voor het publiceren van .riv-bestanden zonder het Rive-opstartscherm is nog steeds een betaald abonnement nodig, van Cadet voor $ 9 per stoel per maand, jaarlijks gefactureerd
Aanwijzingen die het gewenste resultaat beschrijven, werken beter dan aanwijzingen die code beschrijven

Een alternatief: de MCP-server van ExodeUI

ExodeUI is een browser- en desktoptool voor interactieve gebruikersinterface en animatie. Het heeft ook een MCP-server, zodat Claude Code, Cursor en andere AI-coderingstools animaties kunnen maken en bewerken op basis van aanwijzingen in eenvoudige taal. Het resultaat is één open .exode JSON-bestand met toestandsmachines, veerfysica en invoer en gebeurtenissen die uw code bestuurt, gespeeld door runtimes voor React, Vue, Svelte, Angular, Solid, React Native, SwiftUI en Flutter. Het past meer bij de interactieve product-UI dan bij karakteranimatie. Als u al in Rive werkt, is de MCP-server de eenvoudigere keuze.

Productie-implementatiefragment

Implementatie van interactieve componenten

# Rive desktop editor must be open first
claude mcp add --transport http rive http://127.0.0.1:9791/mcp

# then start Claude Code
claude

Toets Principles in om te onthouden

De Rive MCP-server draait in de Rive desktop-editor op http://127.0.0.1:9791/mcp
Claude Code maakt verbinding met één commando; Cursor maakt verbinding via Tools & MCPs
Het kan vormen, animaties, statusmachines, weergavemodellen en Luau-scripts in het geopende bestand bouwen
De Rive CLI is een afzonderlijke, op tekst gebaseerde route voor agenten die Rive-bestanden bouwen op basis van code

Veelgestelde vragen

Gerelateerde handleidingen en voorbeelden

Claude animatiegids Rive versus ExodeUI voor AI en MCP Beste Rive-alternatieven AI-agenten verbinden met UI-beweging via MCP

← Terug naar Leerhub Blader door interactieve sandbox

A little space for good ideas.