使用说明（Markdown 格式）

使用说明

• 项目简介 该项目实现了一个 MCP 服务器，允许语言模型或其他 MCP 客户端通过 JSON-RPC 调用工具，查询 Livewire Flux 的组件和布局文档、获取组件与布局列表，以及 Heroicons 图标信息，并对结果进行缓存以提升性能。

• 主要功能点

  • 提供四个 MCP 工具：
    • fetch_flux_docs：获取组件或布局的文档，支持按组件、按布局和按搜索关键词筛选。
    • list_flux_components：列出 Flux 组件及其文档路径。
    • list_flux_layouts：列出 Flux 布局及其文档路径。
    • list_flux_component_icons：列出 Flux 的 Heroicons 图标，支持 variant 过滤和名称搜索。
  • 通过 MCP 的请求/响应格式进行通信，处理输入并返回文本内容。
  • 从 fluxui.dev 抓取并解析组件/布局文档，尽量提取主内容与“参考”部分，必要时进行文本合并。
  • 支持按不同参数进行缓存（24 小时）以提高响应速度。
  • 使用标准输入输出（stdio）作为传输层运行，便于集成到各种环境。

• 安装步骤

  • 在项目根目录执行安装依赖：npm install
  • 启动 MCP 服务器的常用方式：
    • 使用 npm 脚本：npm start
    • 直接通过 npx 启动（前提是已发布为可执行包）：npx livewire-flux-mcp
    • 直接运行入口文件（若已本地克隆源码）：node index.js
  • 服务器将通过标准输入输出（stdio）提供服务，供 MCP 客户端连接

• 服务器配置（MCP 客户端所需的配置信息） 说明：MCP 客户端需要了解服务器的启动方式，以便建立连接。以下为 JSON 结构示意，具体客户端使用时可能会略有差异。 { "mcpServers": { "flux-docs": { "command": "npx", "args": ["livewire-flux-mcp"] } } } 注释：上述配置中，服务器名称为 flux-docs；启动命令为 npx，参数为 ["livewire-flux-mcp"]。该信息用于 MCP 客户端在启动时注册并连接到服务器。

• 基本使用方法

  • 启动服务器后，使用 MCP 客户端通过 ListTools 获取可用工具列表
  • 使用 CallTool 调用以下工具：
    • fetch_flux_docs：传入 component、layout、search 三个字段中的任意组合以检索文档
    • list_flux_components：获取 Flux 组件列表
    • list_flux_layouts：获取 Flux 布局列表
    • list_flux_component_icons：按 variant 与 search 过滤图标列表
  • 服务返回的 content 可以直接展示给用户或整合进你的应用中