Jak skonfigurować serwer ExodeUI MCP w Cursor
Konfiguracja krok po kroku serwera ExodeUI MCP w Cursor (i Claude Code): wpis mcp.json, sprawdzenie narzędzi, pierwsze podpowiedzi i bezpieczny przegląd.
Rdzeń na wynos
Dodaj wpis do pliku .cursor/mcp.json swojego projektu, który uruchamia pakiet claude-exode-mcp z npx, załaduj ponownie Cursor i sprawdź, czy serwer exode i jego narzędzia pojawiają się w ustawieniach MCP Cursor. Następnie poproś agenta Cursor o utworzenie lub edycję animacji w prostym języku i przejrzyj wynik w edytorze ExodeUI przed wysyłką.
Czego potrzebujesz
Cursor, Node.js (więc dostępny jest npx) i konto ExodeUI, jeśli chcesz otwierać wyniki w edytorze. Serwer ExodeUI MCP jest opublikowany na npm jako claude-exode-mcp; działa lokalnie przez npx, więc nie ma nic więcej do instalowania ręcznie.
Krok 1: dodaj serwer do mcp.json
Cursor odczytuje niestandardowe serwery MCP z pliku mcp.json; plik na poziomie projektu znajduje się w repozytorium pod adresem .cursor/mcp.json. Lokalne serwery wiersza poleceń używają typu „stdio” z poleceniem i argumentami. Wpis dla ExodeUI uruchamia npx z pakietem claude-exode-mcp (patrz blok kodu poniżej).
Krok 2: załaduj ponownie i sprawdź narzędzia
Załaduj ponownie Cursor, otwórz jego ustawienia MCP i potwierdź, że serwer exode działa i jego narzędzia są wymienione. Jeśli się nie uruchomi, sprawdź, czy npx działa na Twoim terminalu i czy wersja Node.js jest aktualna.
Krok 3: podpowiedź
Zapytaj prostym językiem i określ szczegółowo stany i odczucia:
- „Utwórz przełącznik ze stanami włączenia i wyłączenia oraz miękką sprężynę między nimi”.
- „Dodaj stan ładowania do przycisku zapisu, który delikatnie pulsuje, a następnie sprawdź sukces”.
- „Spraw, aby animacja sukcesu była szybsza i zmniejsz przekroczenia”.
Zamiast tego użyj Claude Code
W Claude Code dodaj ten sam serwer za pomocą jednego polecenia: claude mcp add exode npx -y claude-exode-mcp. Claude Code obsługuje również konfigurację na poziomie projektu w pliku .mcp.json.
Przejrzyj przed wysyłką
Agent, który może edytować pliki, również może popełniać błędy. Przechowuj pliki .exode w Git, aby można było różnicować zmiany, otwieraj wyniki w edytorze ExodeUI, aby sprawdzić czas i każdy stan oraz przetestować zachowanie przy ograniczonym ruchu.
Fragment wdrożenia produkcyjnego
// .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-mcpKlucz Principles do zapamiętania
- Serwer to pakiet npm claude-exode-mcp, uruchamiany z npx
- W Cursor dodaj go do .cursor/mcp.json jako serwer stdio
- Załaduj ponownie i potwierdź, że narzędzia pojawiają się w ustawieniach MCP
- Podpowiadaj stany i odczucia; później dostroić numery
- Przechowuj pliki w Git i przeglądaj zmiany w edytorze
Często zadawane pytania
Źródła
- claude-exode-mcp — npm
- Model Context Protocol (MCP) — Dokumentacja Cursor
- Connect Claude Code to tools via MCP — Dokumentacja Claude Code