So richten Sie den ExodeUI MCP-Server in Cursor ein
Schritt-für-Schritt-Einrichtung für den ExodeUI MCP-Server in Cursor (und Claude Code): der mcp.json-Eintrag, Überprüfung der Tools, erste Eingabeaufforderungen und sichere Überprüfung.
Kernaussage
Fügen Sie der Datei .cursor/mcp.json Ihres Projekts einen Eintrag hinzu, der das Paket claude-exode-mcp mit npx ausführt, laden Sie Cursor neu und überprüfen Sie, ob der Exode-Server und seine Tools in den MCP-Einstellungen von Cursor angezeigt werden. Bitten Sie dann den Agenten von Cursor, eine Animation im Klartext zu erstellen oder zu bearbeiten, und überprüfen Sie das Ergebnis vor dem Versand im ExodeUI-Editor.
Was Sie brauchen
Cursor, Node.js (damit npx verfügbar ist) und ein ExodeUI-Konto, wenn Sie Ergebnisse im Editor öffnen möchten. Der ExodeUI MCP-Server wird auf npm als claude-exode-mcp veröffentlicht; Es läuft lokal über npx, sodass nichts anderes manuell installiert werden muss.
Schritt 1: Fügen Sie den Server zu mcp.json hinzu
Cursor liest benutzerdefinierte MCP-Server aus einer mcp.json-Datei; Eine Datei auf Projektebene befindet sich unter .cursor/mcp.json in Ihrem Repository. Lokale Befehlszeilenserver verwenden den Typ „stdio“ mit einem Befehl und Argumenten. Der Eintrag für ExodeUI führt npx mit dem Paket claude-exode-mcp aus (siehe Codeblock unten).
Schritt 2: Laden Sie die Tools neu und überprüfen Sie sie
Laden Sie Cursor neu, öffnen Sie die MCP-Einstellungen und vergewissern Sie sich, dass der Exode-Server ausgeführt wird und seine Tools aufgelistet sind. Wenn der Start fehlschlägt, überprüfen Sie, ob npx in Ihrem Terminal funktioniert und ob Ihre Node.js-Version aktuell ist.
Schritt 3: Eingabeaufforderung
Fragen Sie im Klartext und geben Sie den Zustand und das Gefühl genau an:
- „Erstellen Sie einen Umschalter mit Ein- und Aus-Zuständen und einer weichen Feder dazwischen.“
- „Fügen Sie einen Ladezustand zum Speicherknopf hinzu, der sanft pulsiert, und dann eine Erfolgskontrolle.“
- „Machen Sie die Erfolgsanimation schneller und reduzieren Sie das Überschwingen.“
Verwenden Sie stattdessen Claude Code
Fügen Sie in Claude Code denselben Server mit einem Befehl hinzu: claude mcp add exode npx -y claude-exode-mcp. Claude Code unterstützt auch die Konfiguration auf Projektebene in einer .mcp.json-Datei.
Überprüfen Sie es, bevor Sie es versenden
Ein Agent, der Dateien bearbeiten kann, kann auch Fehler machen. Behalten Sie die .exode-Dateien in Git, damit Änderungen unterscheidbar sind, öffnen Sie die Ergebnisse im ExodeUI-Editor, um das Timing und jeden Status zu überprüfen und das Verhalten bei reduzierter Bewegung zu testen.
Produktionsnahes Implementierungsbeispiel
// .cursor/mcp.json
{
"mcpServers": {
"exode": {
"type": "stdio",
"command": "npx",
"args": ["-y", "claude-exode-mcp"]
}
}
}
# Claude Code alternative
claude mcp add exode npx -y claude-exode-mcpWichtige Prinzipien
- Der Server ist das npm-Paket claude-exode-mcp, ausgeführt mit npx
- Fügen Sie es in Cursor zu .cursor/mcp.json als stdio-Server hinzu
- Laden Sie die Tools neu und bestätigen Sie, dass sie in den MCP-Einstellungen angezeigt werden
- Prompt mit Zuständen und Gefühl; Stimmen Sie anschließend die Nummern ab
- Behalten Sie Dateien in Git und überprüfen Sie Änderungen im Editor
Häufige Fragen
Quellen
- claude-exode-mcp — npm
- Model Context Protocol (MCP) — Cursor-Dokumente
- Connect Claude Code to tools via MCP — Claude Code-Dokumente