MCP Server Test 03

🚀 Popmelt MCP 組件生成工具

此工具基於 Popmelt 模型上下文協議（MCP），支持通過自然語言命令動態生成樣式化的 React 組件，為開發者提供了便捷高效的組件創建方式。

✨ 主要特性

• MCP 光標集成：可在 Cursor 中直接使用自然語言命令生成組件。
• 前端沙箱：提供網絡基 sandbox，用於測試組件生成。
• 命令行工具：支持從命令行生成組件。

📦 安裝指南

先決條件

• 安裝 Node.js 14+
• MCP 服務器需運行於 http://localhost:3000

🚀 快速開始

1. 啟動 MCP 服務器

首先確保 MCP 服務器已運行，執行以下命令：

npm run dev

此命令將在 http://localhost:3000 啟動服務器。

2. 選擇你的工具

A. 使用前端沙箱

前端沙箱提供了可視化的組件生成測試方式，操作步驟如下：

# 切換到沙箱目錄
cd sandbox

# 安裝依賴並啟動沙箱
npm install
npm start

啟動後會在瀏覽器中打開沙箱，你可以：

• 輸入自然語言命令以生成組件。
• 查看生成組件的即時預覽。
• 複製 TypeScript 和 CSS 代碼用於自己的項目。
• 保存生成組件的歷史記錄。

更多細節可查看 沙箱 README。

B. 使用 Cursor 集成

Cursor 集成允許你直接在 Cursor 編輯器中生成組件：

1. 安裝集成：

node setup-cursor-mcp.js

2. 在 Cursor 中使用：

• 按下 Cmd+Shift+G（Mac）或 Ctrl+Shift+G（Windows/Linux）。
• 輸入： "創建一個帶有 olivia gray 的按鈕組件"。
• 組件將生成並在 Cursor 中打開。

更多細節可查看 Cursor MCP README。

C. 使用命令行工具

你也可以直接從命令行生成組件：

# 使用 NLP 生成器
node cursor-nlp-component-generator.js "創建一個帶有 olivia gray 的按鈕組件"

# 使用更簡單的生成器
node generate-component.js button olivia-gray

💻 使用示例

自然語言命令

系統支持多種說法，例如：

• "創建一個帶有 olivia gray 的按鈕組件"
• "生成一個使用 olivia 樣式的卡片組件"
• "製作一個具有 gray 樣式的文本組件"

支持的組件類型

• button：交互式按鈕組件
• card：內容容器卡片
• heading：各種大小的文本標題
• text：通用文本元素
• input：表單輸入元素
• nav：導航組件
• badge：指示器徽章元素
• modal：對話框模態組件
• alert：消息提示組件
• table：數據表格組件

支持的配置文件

當前支持："olivia gray"（默認若未指定）

生成的組件示例

所有組件都會生成 TypeScript 接口用於屬性、現代 React 函數式組件，且所有屬性都有正確類型和一致的目錄結構。示例組件用法如下：

import React from 'react';
import Button from './components/Button';

function App() {
  return (
    <div className="app">
      <h1>我的應用程序</h1>
      <Button variant="primary" onClick={() => alert('點擊了！')}>
        點擊我
      </Button>
    </div>
  );
}

📚 詳細文檔

項目結構

project/
├── src/
│   ├── components/       # 組件目錄
│   │   └── Button.tsx    # 生成的按鈕組件
│   └── App.tsx          # 示例應用程序
└── package.json         # 項目依賴文件

使用說明

1. 克隆倉庫：

git clone https://github.com/your-repository.git
cd your-repository
npm install

2. 啟動開發服務器：

npm run dev

3. 在瀏覽器中打開 http://localhost:3000

📄 許可證

請查看 LICENSE 獲取相關信息。

聯繫方式

如有任何問題，請聯繫 your-email@example.com 。