Hoe u de ExodeUI MCP-server in Cursor instelt
Stapsgewijze installatie voor de ExodeUI MCP-server in Cursor (en Claude Code): de invoer mcp.json, controle van de tools, eerste aanwijzingen en veilige beoordeling.
Kern afhaalmaaltijd
Voeg een item toe aan de .cursor/mcp.json van uw project dat het claude-exode-mcp-pakket met npx uitvoert, laad Cursor opnieuw en controleer of de exode-server en zijn tools verschijnen in de MCP-instellingen van Cursor. Vraag vervolgens de agent van Cursor om een animatie in duidelijke taal te maken of te bewerken en bekijk het resultaat in de ExodeUI-editor voordat deze wordt verzonden.
Wat je nodig hebt
Cursor, Node.js (dus npx is beschikbaar) en een ExodeUI-account als je resultaten in de editor wilt openen. De ExodeUI MCP-server wordt op npm gepubliceerd als claude-exode-mcp; het draait lokaal via npx, dus er hoeft niets anders met de hand te worden geïnstalleerd.
Stap 1: voeg de server toe aan mcp.json
Cursor leest aangepaste MCP-servers uit een mcp.json-bestand; een bestand op projectniveau bevindt zich op .cursor/mcp.json in uw repository. Lokale opdrachtregelservers gebruiken het type "stdio" met een opdracht en argumenten. De invoer voor ExodeUI voert npx uit met het claude-exode-mcp-pakket (zie het codeblok hieronder).
Stap 2: herlaad en controleer de tools
Laad Cursor opnieuw, open de MCP-instellingen en bevestig dat de exode-server actief is en dat de tools ervan worden vermeld. Als het niet lukt om te starten, controleer dan of npx werkt in uw terminal en of uw Node.js-versie actueel is.
Stap 3: prompt
Vraag in gewone taal en wees specifiek over toestanden en gevoelens:
- "Creëer een schakelaar met aan- en uit-statussen en een zachte veer daartussen."
- "Voeg een laadstatus toe aan de opslagknop die zachtjes pulseert, en vervolgens een succescontrole."
- "Maak de succesanimatie sneller en verminder de overshoot."
Gebruik in plaats daarvan Claude Code
Voeg in Claude Code dezelfde server toe met één opdracht: claude mcp add exode npx -y claude-exode-mcp. Claude Code ondersteunt ook configuratie op projectniveau in een .mcp.json-bestand.
Controleer voordat u verzendt
Een agent die bestanden kan bewerken, kan ook fouten maken. Bewaar de .exode-bestanden in Git, zodat wijzigingen kunnen worden doorgevoerd, open resultaten in de ExodeUI-editor om de timing en elke status te controleren, en test het gedrag van verminderde beweging.
Productie-implementatiefragment
// .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-mcpToets Principles in om te onthouden
- De server is het npm-pakket claude-exode-mcp, uitgevoerd met npx
- Voeg het in Cursor toe aan .cursor/mcp.json als een stdio-server
- Herlaad en bevestig dat de tools verschijnen in de MCP-instellingen
- Prompt met staten en gevoel; nummers achteraf afstemmen
- Bewaar bestanden in Git en bekijk wijzigingen in de editor
Veelgestelde vragen
Bronnen
- claude-exode-mcp — npm
- Model Context Protocol (MCP) — Cursor-documenten
- Connect Claude Code to tools via MCP — Claude Code-documenten