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