Flux Ui MCP

🚀 Flux UI MCP 服務器

這是一個基於 TypeScript 的 MCP 服務器，它為 Flux UI 組件提供參考信息。該服務器實現了模型上下文協議（MCP），可幫助 AI 助手訪問 Flux UI 組件的文檔和示例。

✨ 主要特性

工具

• list_flux_components - 獲取所有可用的 Flux UI 組件列表
• get_flux_component_details - 獲取特定組件的詳細信息
• get_flux_component_examples - 獲取特定組件的使用示例
• search_flux_components - 按關鍵字搜索組件

功能

此服務器會從以下來源抓取並緩存信息：

• Flux UI 官方文檔網站（https://fluxui.dev）

它提供的結構化數據包括：

• 組件描述
• 使用示例
• 屬性
• 代碼示例

📦 安裝指南

Claude 桌面端配置

若要在 Claude 桌面端使用該服務器，需添加服務器配置：

• 在 macOS 系統中：~/Library/Application Support/Claude/claude_desktop_config.json
• 在 Windows 系統中：%APPDATA%/Claude/claude_desktop_config.json

選項 1：使用本地構建

{
  "mcpServers": {
    "fluxui-server": {
      "command": "/path/to/fluxui-mcp-server/build/index.js"
    }
  }
}

選項 2：使用 npx 命令

{
  "mcpServers": {
    "fluxui-server": {
      "command": "npx",
      "args": ["-y", "fluxui-mcp-server"]
    }
  }
}

Windsurf 配置

將以下內容添加到 ./codeium/windsurf/model_config.json 文件中：

{
  "mcpServers": {
    "fluxui-server": {
      "command": "npx",
      "args": ["-y", "fluxui-mcp-server"]
    }
  }
}

Cursor 配置

將以下內容添加到 .cursor/mcp.json 文件中：

{
  "mcpServers": {
    "fluxui-server": {
      "command": "npx",
      "args": ["-y", "fluxui-mcp-server"]
    }
  }
}

調試

由於 MCP 服務器通過標準輸入輸出進行通信，調試可能會有一定難度。我們建議使用 MCP 檢查器，它可作為一個包腳本使用：

npm run inspector

檢查器會提供一個 URL，你可以在瀏覽器中訪問調試工具。

💻 使用示例

基礎用法

# 安裝依賴
npm install

# 構建服務器
npm run build

# 開發時自動重新構建
npm run watch