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