Its Just MCP

🚀 Cursor的its-just-ui MCP服务器

专为 Cursor IDE 优化的模型上下文协议（MCP）服务器，可直接在编辑器中实现基于人工智能的its-just-ui React组件生成、定制和文档编写。

🎯 为何在Cursor中使用它？

• 原生MCP支持：Cursor通过标准输入输出（stdio）对MCP服务器提供了内置支持。
• 人工智能驱动的组件生成：通过简单的提示即可生成完整的its-just-ui组件。
• 上下文感知：人工智能能够理解你的项目结构和现有代码。
• 零配置：只需进行最少的设置，即可立即使用。

目录

• 🚀 Cursor快速开始
• ⚙️ Cursor配置
• 🛠️ Cursor可用工具
• 💡 Cursor使用示例
• 📚 替代方案：Claude桌面版
• 开发
• 故障排除
• 许可证

🚀 Cursor快速开始

选项1：NPM包（推荐）

# 只需添加到你的Cursor配置中，无需安装！
# Cursor将通过npx处理一切

选项2：本地开发

# 克隆并构建
git clone https://github.com/its-just-ui/its-just-mcp.git
cd its-just-mcp
npm install && npm run build

⚙️ Cursor配置

步骤1：创建MCP配置

项目级（推荐）

在你的React项目根目录下创建 .cursor/mcp.json 文件：

{
  "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

添加配置后，重启Cursor以加载MCP服务器。

步骤3：验证安装

在Cursor中，你可以向人工智能提问：

• "有哪些MCP工具可用？"
• "使用its-just-ui生成一个按钮组件"

🎨 Cursor特定功能

内联组件生成

要求Cursor人工智能直接在你的代码中生成组件：

"在此处添加一个带有加载状态的主按钮"
"创建一个三列的卡片网格布局"
"生成一个带有验证功能的登录表单"

上下文感知建议

MCP服务器能够理解你的项目上下文：

• 现有的主题配置
• 组件使用模式
• 项目结构

Cursor中的快速命令

• 生成：⌘+K → "使用 [属性] 生成 [组件]"
• 文档：⌘+K → "为这个its-just-ui组件生成文档"
• 主题：⌘+K → "为its-just-ui配置黑暗主题"
• 表单：⌘+K → "创建一个带有验证功能的联系表单"

🛠️ Cursor可用工具

组件生成

主题与样式

表单与文档

💻 使用示例

示例1：生成一个组件

在Cursor中，只需按下 ⌘+K 并提问：

"生成一个带有加载状态的主按钮"

人工智能将使用MCP服务器生成：

<Button variant="primary" loading={true}>
  Processing...
</Button>

示例2：创建一个完整表单

"创建一个带有电子邮件和密码验证的登录表单"

结果：

<form onSubmit={handleSubmit}>
  <Input
    type="email"
    name="email"
    label="Email"
    required
    placeholder="Enter your email"
  />
  <Input
    type="password"
    name="password"
    label="Password"
    required
    minLength={8}
  />
  <Button type="submit" variant="primary">
    Login
  </Button>
</form>

示例3：配置主题

"设置一个带有蓝色主色调的黑暗主题"

结果：

<ThemeProvider
  theme={{
    mode: "dark",
    colors: {
      primary: "#3b82f6",
      secondary: "#64748b"
    }
  }}
>
  {children}
</ThemeProvider>

📚 替代方案：Claude桌面版

虽然此服务器针对Cursor进行了优化，但它也可与Claude桌面版配合使用：

macOS：~/Library/Application Support/Claude/claude_desktop_config.json
Windows：%APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "its-just-ui": {
      "command": "npx",
      "args": ["-y", "its-just-mcp"],
      "env": {}
    }
  }
}

开发

# 安装依赖
npm install

# 在开发模式下运行
npm run dev

# 为生产环境构建
npm run build

# 运行测试
npm test

代码检查与格式化

# ESLint
npm run lint

# Prettier
npm run format

测试

# Jest
npm test

# 监听模式
npm run test:watch

# 覆盖率
npm run test:coverage

项目结构

its-just-mcp/
├── src/
│   ├── index.ts              # 主服务器入口点
│   ├── components/
│   │   └── registry.ts       # 组件定义和元数据
│   └── tools/
│       ├── componentGenerator.ts  # 组件生成逻辑
│       ├── themeManager.ts       # 主题配置工具
│       ├── utilityTools.ts       # 实用工具和布局工具
│       └── documentationTools.ts # 文档和可访问性工具
├── dist/                      # 编译输出
├── package.json
├── tsconfig.json
└── README.md

贡献

欢迎贡献代码！请随时提交拉取请求。

推荐步骤：

• 分叉仓库并创建一个功能分支
• 为新功能添加测试
• 在本地运行代码检查和测试
• 提交一个包含清晰描述和示例的拉取请求

许可证

MIT

支持

如有问题或疑问，请在GitHub上创建一个问题或联系维护者。

相关链接

• Cursor IDE - 以人工智能为先的代码编辑器
• Cursor MCP文档
• its-just-ui库
• npm上的its-just-ui
• MCP SDK文档

故障排除

Cursor特定问题

常见修复方法

# 验证Node版本（需要18+）
node --version

# 对于本地开发，重新构建
cd /path/to/its-just-mcp
npm run build

# 检查MCP配置是否为有效的JSON文件
cat .cursor/mcp.json | jq .

# 如果npx失败，清除npm缓存
npm cache clean --force

获取帮助

• 检查Cursor控制台：视图 → 输出 → MCP
• Cursor MCP文档：https://cursor-docs.apidog.io/model-context-protocol
• 创建一个问题：https://github.com/its-just-ui/its-just-mcp/issues