Como configurar o servidor ExodeUI MCP em Cursor
Configuração passo a passo para o servidor ExodeUI MCP em Cursor (e Claude Code): a entrada mcp.json, verificação das ferramentas, primeiros prompts e revisão segura.
Ponto principal
Adicione uma entrada ao .cursor/mcp.json do seu projeto que executa o pacote claude-exode-mcp com npx, recarregue Cursor e verifique se o servidor exode e suas ferramentas aparecem nas configurações MCP do Cursor. Em seguida, peça ao agente do Cursor para criar ou editar uma animação em linguagem simples e revisar o resultado no editor ExodeUI antes do envio.
O que você precisa
Cursor, Node.js (portanto, npx está disponível) e uma conta ExodeUI se desejar abrir os resultados no editor. O servidor ExodeUI MCP é publicado no npm como claude-exode-mcp; ele é executado localmente por meio do npx, portanto não há mais nada para instalar manualmente.
Etapa 1: adicione o servidor ao mcp.json
Cursor lê servidores MCP personalizados de um arquivo mcp.json; um arquivo de nível de projeto reside em .cursor/mcp.json em seu repositório. Os servidores de linha de comando locais usam o tipo “stdio” com um comando e argumentos. A entrada para ExodeUI executa npx com o pacote claude-exode-mcp (veja o bloco de código abaixo).
Passo 2: recarregue e verifique as ferramentas
Recarregue Cursor, abra suas configurações MCP e confirme se o servidor exode está em execução e suas ferramentas estão listadas. Se não conseguir iniciar, verifique se o npx funciona no seu terminal e se a sua versão do Node.js é atual.
Etapa 3: solicitar
Pergunte em linguagem simples e seja específico sobre estados e sentimentos:
- "Crie uma alternância entre os estados ligado e desligado e uma mola suave entre eles."
- "Adicione um estado de carregamento ao botão Salvar que pulsa suavemente e, em seguida, uma verificação de sucesso."
- "Torne a animação de sucesso mais rápida e reduza o overshoot."
Usando Claude Code em vez disso
Em Claude Code, adicione o mesmo servidor com um comando: claude mcp add exode npx -y claude-exode-mcp. Claude Code também suporta configuração em nível de projeto em um arquivo .mcp.json.
Revise antes de enviar
Um agente que pode editar arquivos também pode cometer erros. Mantenha os arquivos .exode no Git para que as alterações sejam diferenciáveis, abra os resultados no editor ExodeUI para verificar o tempo e todos os estados e teste o comportamento de movimento reduzido.
Trecho de implementação em produção
// .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-mcpPrincípios-chave para lembrar
- O servidor é o pacote npm claude-exode-mcp, executado com npx
- Em Cursor, adicione-o a .cursor/mcp.json como um servidor stdio
- Recarregue e confirme se as ferramentas aparecem nas configurações do MCP
- Avisar com estados e sentimentos; sintonizar números depois
- Mantenha os arquivos no Git e revise as alterações no editor
Perguntas frequentes
Fontes
- claude-exode-mcp — npm
- Model Context Protocol (MCP) — Documentos Cursor
- Connect Claude Code to tools via MCP — Documentos Claude Code