Як налаштувати сервер ExodeUI MCP у Cursor
Покрокове налаштування сервера ExodeUI MCP у Cursor (і Claude Code): запис mcp.json, перевірка інструментів, перші підказки та безпечний перегляд.
Основний винос
Додайте запис до .cursor/mcp.json вашого проекту, який запускає пакет claude-exode-mcp з npx, перезавантажте Cursor і переконайтеся, що сервер exode та його інструменти з’явилися в налаштуваннях MCP Cursor. Потім попросіть агента Cursor створити або відредагувати анімацію простою мовою та переглянути результат у редакторі ExodeUI перед відправкою.
Те, що вам потрібно
Cursor, Node.js (тому npx доступний) і обліковий запис ExodeUI, якщо ви хочете відкрити результати в редакторі. Сервер ExodeUI MCP опубліковано на npm як claude-exode-mcp; він працює локально через npx, тому більше нічого не потрібно встановлювати вручну.
Крок 1: додайте сервер до mcp.json
Cursor читає спеціальні сервери MCP з файлу mcp.json; файл рівня проекту знаходиться в .cursor/mcp.json у вашому сховищі. Локальні сервери командного рядка використовують тип "stdio" з командою та аргументами. Запис для ExodeUI запускає npx із пакетом claude-exode-mcp (див. блок коду нижче).
Крок 2: перезавантажте та перевірте інструменти
Перезавантажте Cursor, відкрийте його налаштування MCP і переконайтеся, що сервер exode запущено, а його інструменти перераховані. Якщо він не запускається, перевірте, чи npx працює у вашому терміналі та чи ваша версія Node.js актуальна.
Крок 3: підказка
Запитайте простою мовою та детально описуйте стани та відчуття:
- «Створіть перемикач із увімкненим і вимкненим станами та м’якою пружиною між ними».
- «Додайте стан завантаження до кнопки збереження, яка плавно пульсує, а потім перевірте успішність».
- «Зробіть анімацію успіху швидшою та зменшіть перевищення».
Використовуючи замість цього Claude Code
У Claude Code додайте той самий сервер за допомогою однієї команди: claude mcp add exode npx -y claude-exode-mcp. Claude Code також підтримує конфігурацію на рівні проекту у файлі .mcp.json.
Перегляньте перед відправкою
Агент, який може редагувати файли, також може робити помилки. Зберігайте файли .exode у Git, щоб зміни можна було відмінювати, відкривайте результати в редакторі ExodeUI, щоб перевіряти час і кожен стан, а також тестувати поведінку зі зниженим рухом.
Фрагмент впровадження виробництва
// .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-mcpКлючі Principle, які слід запам’ятати
- Сервером є пакет npm claude-exode-mcp, запускається за допомогою npx
- У Cursor додайте його до .cursor/mcp.json як сервер stdio
- Перезавантажте та підтвердьте наявність інструментів у налаштуваннях MCP
- Підказувати станами і відчуттями; потім налаштувати номери
- Зберігайте файли в Git і переглядайте зміни в редакторі
Часті запитання
Джерела
- claude-exode-mcp — npm
- Model Context Protocol (MCP) — Cursor документи
- Connect Claude Code to tools via MCP — Claude Code документи