KI-Agenten mit UI-Animation über MCP verbinden (Claude Code & Cursor)
Erfahren Sie, wie Sie Claude Code, Cursor und KI-Agenten über das Model Context Protocol (MCP) an ExodeUI anbinden und UI-Bewegungen per Textbefehl steuern.
Kernaussage
ExodeUI verfügt über einen offiziellen Model Context Protocol (MCP) Server, mit dem KI-Coding-Assistenten wie Claude Code und Cursor Animationsdateien direkt erstellen und modifizieren können. Durch Werkzeuge für Keyframes, State Machines und Variablenbindung erzeugen KI-Modelle produktionsreife Bewegung aus natürlichen Sprachprompts.
Warum UI-Motion das Model Context Protocol benötigt
KI-Assistenten wie Cursor oder Claude Code beherrschen React-Code und CSS, blieben gegenüber proprietären Grafikdateien bislang jedoch blind. Das offene .exode Format und der MCP-Server wandeln Animationen in strukturiertes JSON, das KI-Modelle direkt analysieren und bearbeiten können.
- Direkte Dateibearbeitung: KI-Modelle erstellen Ebenen und justieren Federparameter über Tool-Calls.
- Kontextuelles Verständnis: Der Agent prüft Ebenennamen und Eingabevariablen eigenständig.
- Automatisierte Übergabe: Der Assistent verknüpft Ihren Anwendungs-State direkt mit den Inputs der Animation.
Einrichtung des ExodeUI MCP-Servers
Die Integration in Ihre Entwicklungsumgebung gelingt in unter zwei Minuten über claude_desktop_config.json oder die Cursor MCP-Einstellungen.
KI-Coding-Agenten für interaktive Motion prompten
Nach der Anbindung weisen Sie Ihren Assistenten in natürlicher Sprache an: 'Erstelle einen Lesezeichen-Button mit Leer- und Gespeichert-Zustand und Federphysik (Stiffness 300, Damping 20)'. Der Agent erzeugt die Animationsdatei und den passenden React-Code.
Produktionsnahes Implementierungsbeispiel
{
"mcpServers": {
"exode": {
"command": "npx",
"args": ["-y", "@exodeui/mcp-server"]
}
}
}