F

Flux UI麦普组件库

@iannuttall/flux-ui-mcp
0 Stars 83 次浏览 iannuttall 更新于 2026-08-23

为Flux UI组件提供参考信息，使AI助手能够访问Flux UI设计系统中的组件文档和示例。

MCP 服务配置

复制以下 JSON 到 OPClaw 或其他 MCP 客户端的配置文件中即可使用

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

服务介绍

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 - 按关键字搜索组件

功能

此服务器从以下位置抓取并缓存信息：

它提供的结构化数据包括：

  • 组件描述
  • 使用示例
  • 属性
  • 代码示例

开发

安装依赖项：

npm install

构建服务器：

npm run build

开发时自动重建：

npm run watch

安装

Claude Desktop 配置

要与 Claude Desktop 一起使用，请添加服务器配置：

在 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 服务器通过 stdio 进行通信，调试可能会比较困难。我们建议使用 MCP Inspector，它作为一个包脚本可用：

npm run inspector

Inspector 将提供一个 URL，以便您在浏览器中访问调试工具。

查看源码 项目主页