MCP是Cursor的唯一用户界面服务器
一种优化的模型上下文协议（MCP）服务器 光标IDE，直接在编辑器中实现AI驱动的生成、定制和记录其ui React组件。
🎯 为什么在Cursor中使用它？
- 原生MCP支持：Cursor通过stdio内置了对MCP服务器的支持
- 人工智能驱动的组件生成：通过简单的提示生成完整的ui组件
- 情境意识：AI了解您的项目结构和现有代码
- 零配置：使用最少的设置即可开箱即用
目录
- 🚀 光标快速启动
- ⚙️ 光标配置
- 🛠️ 游标中的可用工具
- 💡 光标使用示例
- 📚 替代方案：克劳德桌面
- 发展
- 故障排除
- 许可证
🚀 光标快速启动
选项1:NPM包（推荐）
# Simply add to your Cursor config - no installation needed!
# Cursor will handle everything via npx方案2：地方发展
# Clone and build
git clone https://github.com/its-just-ui/its-just-mcp.git
cd its-just-mcp
npm install && npm run build⚙️ 光标配置
步骤1：创建MCP配置
项目级别（推荐）
创建 .cursor/mcp.json 在React项目根目录中：
{
"mcpServers": {
"its-just-ui": {
"command": "npx",
"args": ["-y", "its-just-mcp"],
"env": {}
}
}
}全局配置（所有项目）
创建 ~/.cursor/mcp.json:
{
"mcpServers": {
"its-just-ui": {
"command": "npx",
"args": ["-y", "its-just-mcp"],
"env": {}
}
}
}地方发展设置
如果您正在本地开发MCP服务器：
{
"mcpServers": {
"its-just-ui": {
"command": "node",
"args": ["/absolute/path/to/its-just-mcp/dist/index.js"],
"env": {}
}
}
}步骤2：重新启动游标
添加配置后，重新启动Cursor以加载MCP服务器。
步骤3：验证安装
在Cursor中，您可以询问AI：
- “可用的MCP工具有哪些？”
- “使用其唯一用户界面生成按钮组件”
🎨 光标特定功能
内联组件生成
让Cursor AI直接在代码中生成组件：
"Add a primary button with loading state here"
"Create a card grid layout with 3 columns"
"Generate a login form with validation"情境感知建议
MCP服务器了解您的项目上下文：
- 现有主题配置
- 组件使用模式
- 项目结构
光标中的快速命令
- 生成:
⌘+K→ “使用\[props\]生成\[组件\]” - 文件:
⌘+K→ “记录这是它唯一的ui组件” - 主题:
⌘+K→ “为其用户界面配置深色主题” - 表格:
⌘+K→ “创建带有验证的联系人表单”
🛠️ 游标中的可用工具
组件生成
| 工具 | 光标命令示例 | 说明 |
|---|---|---|
generate_component | “生成主按钮” | 创建任何其唯一的ui组件 |
list_components | “显示所有表单组件” | 浏览可用组件 |
compose_components | “创建卡片网格布局” | 组合多个组件 |
主题与造型
| 工具 | 光标命令示例 | 说明 |
|---|---|---|
configure_theme | “设置暗模式主题” | 配置ThemeProvider |
generate_tailwind_classes | “生成间距实用程序” | 创建顺风实用程序类 |
create_responsive_layout | “制作响应式网格” | 构建响应式布局 |
表格和文件
| 工具 | 光标命令示例 | 说明 |
|---|---|---|
create_form | “构建联系表单” | 生成完整表单 |
get_component_docs | “显示按钮文档” | 获取组件文档 |
check_accessibility | “检查对话框可访问性” | 查看ARIA属性 |
💡 光标使用示例
示例1：生成组件
在Cursor中，只需键入 ⌘+K 并询问：
"Generate a primary button with loading state"AI将使用MCP服务器生成：
Processing...
示例2：创建完整表单
"Create a login form with email and password validation"结果：
Login
示例3：配置主题
"Set up a dark theme with blue primary color"结果：
{children}
📚 替代方案：克劳德桌面
虽然此服务器针对Cursor进行了优化，但它也适用于Claude Desktop：
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json\ 视窗: %APPDATA%\Claude\claude_desktop_config.json
{
"mcpServers": {
"its-just-ui": {
"command": "npx",
"args": ["-y", "its-just-mcp"],
"env": {}
}
}
}发展
# Install dependencies
npm install
# Run in development mode
npm run dev
# Build for production
npm run build
# Run tests
npm test装订和格式化
# ESLint
npm run lint
# Prettier
npm run format测试
# Jest
npm test
# Watch mode
npm run test:watch
# Coverage
npm run test:coverage项目结构
its-just-mcp/
├── src/
│ ├── index.ts # Main server entry point
│ ├── components/
│ │ └── registry.ts # Component definitions and metadata
│ └── tools/
│ ├── componentGenerator.ts # Component generation logic
│ ├── themeManager.ts # Theme configuration tools
│ ├── utilityTools.ts # Utility and layout tools
│ └── documentationTools.ts # Documentation and accessibility
├── dist/ # Compiled output
├── package.json
├── tsconfig.json
└── README.md贡献
欢迎投稿！请随时提交拉取请求。
建议步骤：
- 分叉仓库并创建功能分支
- 为新行为添加测试
- 在本地运行lint和测试
- 用清晰的描述和示例打开PR
许可证
麻省理工学院
支持
对于问题或疑问，请在GitHub上打开问题或联系维护人员。
相关链接
故障排除
光标特定问题
| 问题 | 解决方案 |
|---|---|
| MCP工具不可用 1.重新启动游标 |
2.检查 .cursor/mcp.json 是有效的JSON 3.验证服务器路径是否正确| | “找不到命令：npx” |安装Node.js 18+和npm| | 服务器未响应 1.检查光标控制台（查看→ 输出→ MCP) 2.尝试本地安装而不是npx| | 工具未在AI中显示 |询问“可用的MCP工具有哪些？”以刷新|
常见修复
# Verify Node version (needs 18+)
node --version
# For local development, rebuild
cd /path/to/its-just-mcp
npm run build
# Check MCP config is valid JSON
cat .cursor/mcp.json | jq .
# Clear npm cache if npx fails
npm cache clean --force获取帮助
- 检查光标控制台：
View → Output → MCP - 光标MCP文档：https://cursor-docs.apidog.io/model-context-protocol
- 打开一个问题：https://github.com/its-just-ui/its-just-mcp/issues