内容
# MCP its-just-ui Server for Cursor
[](https://www.npmjs.com/package/its-just-mcp)
[](https://www.npmjs.com/package/its-just-mcp)
[](LICENSE)
[](https://www.cursor.com)
[](https://modelcontextprotocol.io)
一个针对 **Cursor IDE** 优化的 Model Context Protocol (MCP) 服务器，支持在编辑器中直接对 its-just-ui React 组件进行 AI 驱动的生成、自定义和文档编写。
### 🎯 为什么在 Cursor 中使用它？
- **原生 MCP 支持**：Cursor 通过 stdio 内置了对 MCP 服务器的支持
- **AI 驱动的组件生成**：通过简单的提示生成完整的 its-just-ui 组件
- **上下文感知**：AI 了解您的项目结构和现有代码
- **零配置**：开箱即用，只需最少的设置
### 目录
- **🚀 Cursor 快速开始**
- **⚙️ Cursor 配置**
- **🛠️ Cursor 中可用的工具**
- **💡 Cursor 使用示例**
- **📚 替代方案：Claude Desktop**
- **开发**
- **问题排查**
- **许可证**
## 🚀 Cursor 快速开始
### Option 1: NPM Package (推荐)
```bash
# 只需添加到您的 Cursor 配置中 - 无需安装！
# Cursor 将通过 npx 处理一切
```
### Option 选项 2：本地开发
```bash
# 克隆和构建
git clone https://github.com/its-just-ui/its-just-mcp.git
cd its-just-mcp
npm install && npm run build
```
## ⚙️ Cursor 配置
### Step 1: 创建 MCP 配置
#### 项目级别（推荐）
在您的 React 项目根目录中创建 `.cursor/mcp.json`：
```json
{
"mcpServers": {
"its-just-ui": {
"command": "npx",
"args": ["-y", "its-just-mcp"],
"env": {}
}
}
}
```
#### 全局配置（所有项目）
创建 `~/.cursor/mcp.json`：
```json
{
"mcpServers": {
"its-just-ui": {
"command": "npx",
"args": ["-y", "its-just-mcp"],
"env": {}
}
}
}
```
#### 本地开发设置
如果您在本地开发 MCP 服务器：
```json
{
"mcpServers": {
"its-just-ui": {
"command": "node",
"args": ["/absolute/path/to/its-just-mcp/dist/index.js"],
"env": {}
}
}
}
```
### Step 2: 重启 Cursor
添加配置后，重启 Cursor 以加载 MCP 服务器。
### Step 3: 验证安装
在 Cursor 中，您可以询问 AI：
- "What MCP tools are available?"
- "Generate a Button component using its-just-ui"
## 🎨 Cursor 特定功能
### 内联组件生成
要求 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 服务器了解您的项目上下文：
- 现有主题配置
- 组件使用模式
- 项目结构
### Cursor 中的快速命令
- **Generate**: `⌘+K` → "Generate [component] with [props]"
- **Document**: `⌘+K` → "Document this its-just-ui component"
- **Theme**: `⌘+K` → "Configure dark theme for its-just-ui"
- **Form**: `⌘+K` → "Create a contact form with validation"
## 🛠️ Cursor 中可用的工具
### 组件生成
| Tool | Cursor Command Example | Description |
|------|------------------------|-------------|
| `generate_component` | "Generate a primary button" | 创建任何 its-just-ui 组件 |
| `list_components` | "Show me all form components" | 浏览可用组件 |
| `compose_components` | "Create a card grid layout" | 组合多个组件 |
### 主题和样式
| Tool | Cursor Command Example | Description |
|------|------------------------|-------------|
| `configure_theme` | "Set up dark mode theme" | 配置 ThemeProvider |
| `generate_tailwind_classes` | "Generate spacing utilities" | 创建 Tailwind 实用程序类 |
| `create_responsive_layout` | "Make a responsive grid" | 构建响应式布局 |
### 表单和文档
| Tool | Cursor Command Example | Description |
|------|------------------------|-------------|
| `create_form` | "Build a contact form" | 生成完整表单 |
| `get_component_docs` | "Show Button documentation" | 获取组件文档 |
| `check_accessibility` | "Check Dialog accessibility" | 审查 ARIA 属性 |
## 💡 Cursor 使用示例
### 示例 1：生成组件
在 Cursor 中，只需键入 `⌘+K` 并询问：
```
"Generate a primary button with loading state"
```
AI 将使用 MCP 服务器生成：
```jsx
<Button variant="primary" loading={true}>
Processing...
</Button>
```
### 示例 2：创建完整表单
```
"Create a login form with email and password validation"
```
结果：
```jsx
<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"
```
结果：
```jsx
<ThemeProvider
theme={{
mode: "dark",
colors: {
primary: "#3b82f6",
secondary: "#64748b"
}
}}
>
{children}
</ThemeProvider>
```
## 📚 替代方案：Claude Desktop
虽然此服务器针对 Cursor 进行了优化，但它也适用于 Claude Desktop：
**macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
**Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
```json
{
"mcpServers": {
"its-just-ui": {
"command": "npx",
"args": ["-y", "its-just-mcp"],
"env": {}
}
}
}
```
## Development
```bash
# 安装依赖
npm install
# 在开发模式下运行
npm run dev
# 构建生产版本
npm run build
# 运行测试
npm test
```
### Linting & Formatting
```bash
# ESLint
npm run lint
# Prettier
npm run format
```
### Testing
```bash
# Jest
npm test
# Watch mode
npm run test:watch
# Coverage
npm run test:coverage
```
## Project Structure
```
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
```
## Contributing
欢迎贡献！请随时提交 Pull Request。
推荐步骤：
- Fork 仓库并创建一个功能分支
- 为新行为添加测试
- 在本地运行 lint 和测试
- 打开一个包含清晰描述和示例的 PR
## License
MIT
## Support
如有问题或疑问，请在 GitHub 上打开一个 issue 或联系维护人员。
## Related Links
- [Cursor IDE](https://www.cursor.com) - The AI-first code editor
- [Cursor MCP Documentation](https://cursor-docs.apidog.io/model-context-protocol)
- [its-just-ui Library](https://github.com/its-just-ui/its-just-ui)
- [its-just-ui on npm](https://www.npmjs.com/package/its-just-ui)
- [MCP SDK Documentation](https://modelcontextprotocol.io)
## Troubleshooting
### Cursor 特定问题
| Issue | Solution |
|-------|----------|
| **MCP tools not available** | 1. 重启 Cursor<br>2. 检查 `.cursor/mcp.json` 是否为有效的 JSON<br>3. 验证服务器路径是否正确 |
| **"Command not found: npx"** | 安装 Node.js 18+ 和 npm |
| **Server not responding** | 1. 检查 Cursor 控制台 (View → Output → MCP)<br>2. 尝试本地安装而不是 npx |
| **Tools not showing in AI** | 询问 "What MCP tools are available?" 以刷新 |
### 常见修复
```bash
# 验证 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
```
### Getting Help
- 检查 Cursor 控制台: `View → Output → MCP`
- Cursor MCP 文档: https://cursor-docs.apidog.io/model-context-protocol
- 打开一个 issue: https://github.com/its-just-ui/its-just-mcp/issues
