关键词

Flux UI组件文档组件库UI 开发前端组件

Flux UI 组件 MCP 服务器

项目简介

本项目是一个基于 Model Context Protocol (MCP) 的服务器实现，专门为大型语言模型 (LLM) 提供 Flux UI 组件库的文档和使用示例。通过此服务器，LLM 能够理解和运用 Flux UI 组件，辅助开发者更高效地进行前端界面开发。

主要功能点

  • 列出组件 (list_flux_components): 获取 Flux UI 组件库中所有可用组件的清单。
  • 组件详情 (get_flux_component_details): 查询特定组件的详细信息，包括描述、属性 (Props)、导入语句等。
  • 组件示例 (get_flux_component_examples): 获取特定组件的使用示例代码，帮助理解组件的使用方法。
  • 组件搜索 (search_flux_components): 根据关键词搜索相关的 Flux UI 组件，快速定位所需组件。

安装步骤

  1. 安装 Node.js 和 npm: 确保你的开发环境中已安装 Node.js 和 npm (Node 包管理器)。
  2. 安装依赖: 在仓库根目录下，打开终端并执行以下命令安装项目依赖： 
    npm install
  3. 构建项目: 执行以下命令构建服务器代码： 
    npm run build
    构建完成后，会在 'build' 目录下生成服务器运行所需的文件。

服务器配置

MCP 服务器需要配置到 MCP 客户端中才能使用。以下是针对不同 MCP 客户端的配置示例，你需要根据你的实际使用情况选择并配置到相应的客户端配置文件中。

通用配置说明:

所有的配置都需要指定 'command' 和 'args' 来启动 Flux UI MCP 服务器。

  • 'command': 指定启动服务器的命令。
  • 'args': 启动命令的参数，以数组形式提供。

配置示例:

1. 本地构建方式 (适用于 Claude Desktop):

如果你选择本地构建方式，你需要指定 'command' 为 Node.js 解释器，并指向构建后的服务器入口文件 'index.js'。

{
  "mcpServers": {
    "fluxui-server": {
      "command": "/path/to/node",  // 替换为你的 Node.js 可执行文件路径，例如：/usr/local/bin/node
      "args": ["/path/to/flux-ui-mcp/build/index.js"] // 替换为你的 flux-ui-mcp 项目 build 目录下的 index.js 文件的绝对路径，例如：/Users/yourname/flux-ui-mcp/build/index.js
    }
  }
}

2. 使用 npx 命令 (更便捷的方式，适用于 Claude Desktop, Windsurf, Cursor):

使用 'npx' 命令可以更方便地运行服务器，无需指定 Node.js 路径和入口文件路径，前提是你已经将项目发布到 npm 或者本地可以被 'npx' 找到。

{
  "mcpServers": {
    "fluxui-server": {
      "command": "npx",
      "args": ["-y", "flux-ui-mcp-server"] // 假设你的项目发布到 npm 上的包名为 flux-ui-mcp-server
    }
  }
}

注意:

  • 请根据你的实际情况选择合适的配置方式。
  • '/path/to/node' 和 '/path/to/flux-ui-mcp/build/index.js' 需要替换为你本地环境的实际路径。
  • 如果使用 'npx' 方式，你需要确保 'flux-ui-mcp-server' 包可以被 'npx' 找到，通常需要将项目发布到 npm 或者进行本地 link。

客户端配置文件位置:

  • Claude Desktop:
    • MacOS: '~/Library/Application Support/Claude/claude_desktop_config.json'
    • Windows: '%APPDATA%/Claude/claude_desktop_config.json'
  • Windsurf: './codeium/windsurf/model_config.json'
  • Cursor: '.cursor/mcp.json'

基本使用方法

  1. 启动服务器: 配置完成后，当 MCP 客户端 (如 Claude, Cursor, Windsurf) 尝试连接 'fluxui-server' 时，服务器会自动启动。
  2. 在 LLM 中使用工具: 在支持 MCP 的 LLM 客户端中，你可以指示 LLM 使用以下工具来获取 Flux UI 组件的信息：
    • 使用 'list_flux_components' 工具获取组件列表。
    • 使用 'get_flux_component_details' 工具并指定 'componentName' 参数（例如 "button"）获取按钮组件的详细信息。
    • 使用 'get_flux_component_examples' 工具并指定 'componentName' 参数（例如 "accordion"）获取手风琴组件的使用示例。
    • 使用 'search_flux_components' 工具并指定 'query' 参数（例如 "导航"）搜索包含关键词 "导航" 的组件。

LLM 将会调用这些工具，并利用服务器返回的数据来响应你的请求，例如生成使用 Flux UI 组件的代码或解释组件的功能。

信息

分类

开发者工具

访问项目