AI导哈

React组件生成服务

一个为Cursor IDE优化的MCP服务器，支持AI驱动的React组件生成、定制和文档化。

  • by its-just-ui
  • TypeScript
  • 本地部署
  • 4 星标
  • 更新于
在 GitHub 查看 its-just-ui/its-just-mcp

使用说明

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服务器生成：

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

示例2：创建完整表单

"Create a login form with email and password validation"

结果：

<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：配置主题

"Set up a dark theme with blue primary color"

结果：

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

📚 替代方案：克劳德桌面

虽然此服务器针对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

相关 MCP