如何在 Cursor 中设置 ExodeUI MCP 服务器
Cursor(和 Claude Code)中 ExodeUI MCP 服务器的逐步设置:mcp.json 条目、检查工具、首次提示和安全审查。
核心要点
向项目的 .cursor/mcp.json 添加一个条目,该条目使用 npx 运行 claude-exode-mcp 包,重新加载 Cursor,并检查 exode 服务器及其工具是否出现在 Cursor 的 MCP 设置中。然后要求 Cursor 的代理以简单语言创建或编辑动画,并在发货前在 ExodeUI 编辑器中查看结果。
你需要什么
Cursor、Node.js(因此 npx 可用)和 ExodeUI 帐户(如果您想在编辑器中打开结果)。 ExodeUI MCP 服务器在 npm 上发布为 claude-exode-mcp;它通过 npx 在本地运行,因此无需手动安装任何其他内容。
步骤1:将服务器添加到mcp.json
Cursor 从 mcp.json 文件中读取自定义 MCP 服务器;项目级文件位于存储库中的 .cursor/mcp.json 中。本地命令行服务器使用带有命令和参数的“stdio”类型。 ExodeUI 的条目使用 claude-exode-mcp 包运行 npx(请参阅下面的代码块)。
第2步:重新加载并检查工具
重新加载 Cursor,打开其 MCP 设置并确认 exode 服务器正在运行并且列出了其工具。如果无法启动,请检查 npx 是否在您的终端中运行以及您的 Node.js 版本是否为最新版本。
第三步:提示
用简单的语言询问并具体说明状态和感觉:
- “创建一个具有打开和关闭状态的开关,以及它们之间的软弹簧。”
- “将加载状态添加到轻轻闪烁的保存按钮,然后检查是否成功。”
- “让成功动画更快并减少超调。”
使用 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 文档