Cómo configurar el servidor ExodeUI MCP en Cursor
Configuración paso a paso para el servidor ExodeUI MCP en Cursor (y Claude Code): la entrada mcp.json, verificación de las herramientas, primeras indicaciones y revisión segura.
Idea clave
Agregue una entrada al .cursor/mcp.json de su proyecto que ejecute el paquete claude-exode-mcp con npx, vuelva a cargar Cursor y verifique que el servidor exode y sus herramientas aparezcan en la configuración MCP de Cursor. Luego, pídale al agente de Cursor que cree o edite una animación en lenguaje sencillo y revise el resultado en el editor ExodeUI antes de enviarla.
lo que necesitas
Cursor, Node.js (para que npx esté disponible) y una cuenta ExodeUI si desea abrir resultados en el editor. El servidor ExodeUI MCP está publicado en npm como claude-exode-mcp; se ejecuta localmente a través de npx, por lo que no hay nada más que instalar manualmente.
Paso 1: agregue el servidor a mcp.json
Cursor lee servidores MCP personalizados desde un archivo mcp.json; un archivo a nivel de proyecto se encuentra en .cursor/mcp.json en su repositorio. Los servidores de línea de comandos locales utilizan el tipo "stdio" con un comando y argumentos. La entrada para ExodeUI ejecuta npx con el paquete claude-exode-mcp (consulte el bloque de código a continuación).
Paso 2: recarga y revisa las herramientas
Vuelva a cargar Cursor, abra su configuración MCP y confirme que el servidor exode se esté ejecutando y que sus herramientas estén enumeradas. Si no se inicia, verifique que npx funcione en su terminal y que su versión de Node.js esté actualizada.
Paso 3: aviso
Pregunte en lenguaje sencillo y sea específico sobre los estados y sienta:
- "Crea un interruptor con estados de encendido y apagado y un resorte suave entre ellos".
- "Agregue un estado de carga al botón de guardar que pulsa suavemente, luego una verificación de éxito".
- "Acelere la animación del éxito y reduzca el exceso".
Usando Claude Code en su lugar
En Claude Code, agregue el mismo servidor con un comando: claude mcp add exode npx -y claude-exode-mcp. Claude Code también admite la configuración a nivel de proyecto en un archivo .mcp.json.
Revisar antes de enviar
Un agente que pueda editar archivos también puede cometer errores. Mantenga los archivos .exode en Git para que los cambios sean diferenciables, abra los resultados en el editor ExodeUI para verificar el tiempo y cada estado, y pruebe el comportamiento de movimiento reducido.
Fragmento de implementación en producción
// .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-mcpPrincipios clave para recordar
- El servidor es el paquete npm claude-exode-mcp, ejecutado con npx
- En Cursor, agréguelo a .cursor/mcp.json como servidor stdio
- Vuelva a cargar y confirme que las herramientas aparecen en la configuración de MCP
- Indicar con estados y sentir; sintonizar números después
- Mantenga archivos en Git y revise los cambios en el editor
Preguntas frecuentes
Fuentes
- claude-exode-mcp — npm
- Model Context Protocol (MCP) — Documentos Cursor
- Connect Claude Code to tools via MCP — Documentos Claude Code