项目简介

该仓库是一个包含了多个相关包的 Monorepo，其中包括一个实现了 Model Context Protocol (MCP) 的服务器 ('@ui-kit.ai/mcp-server')。该 MCP 服务器的特定用途是向连接的 LLM 客户端提供关于 '@ui-kit.ai/components' 组件库的信息，包括可用的组件列表及其使用示例。

主要功能点

该 MCP 服务器通过 MCP 协议向 LLM 客户端暴露以下功能：

获取组件索引: 提供一个工具，允许 LLM 客户端获取 ui-kit.ai 组件库中所有可用组件的列表。这相当于提供了一个组件目录。
获取组件实现示例: 提供一个工具，允许 LLM 客户端根据组件名称获取该组件的使用示例（代码片段）。这有助于 LLM 客户端理解如何使用特定组件。

这些功能通过 MCP 的 Tool (工具) 机制实现，使得 LLM 客户端可以通过标准化的 JSON-RPC 调用来访问这些信息。

安装步骤

运行此 MCP 服务器需要 Node.js 环境。请确保您的系统已安装 Node.js。

克隆仓库: 将 ui-kit.ai 仓库克隆到您的本地机器。

git clone https://github.com/alex-mcgovern/ui-kit.ai.git
cd ui-kit.ai

安装依赖: 该项目使用 pnpm 作为包管理器，推荐使用 pnpm。如果您没有安装 pnpm，请先安装：'npm install -g pnpm'。
```
pnpm install
```

生成数据文件: MCP 服务器需要预先生成组件索引和使用示例数据。运行以下脚本来生成所需的数据文件 ('packages/mcp-server/data/*.json')：

# 运行生成索引的脚本
pnpm exec ts-node scripts/build-mcp-component-index.ts
# 运行生成示例的脚本
pnpm exec ts-node scripts/build-mcp-component-examples.ts

或者，如果您运行了项目的完整构建命令 (例如 'pnpm build' 如果有定义的话)，可能也会包含数据生成步骤。

运行 MCP 服务器: 进入 'packages/mcp-server' 目录并运行服务器主文件。您可能需要使用 'ts-node' 来直接运行 TypeScript 文件，或者先进行编译 ('pnpm build') 再运行编译后的 JavaScript 文件。

# 示例：使用 ts-node 运行
cd packages/mcp-server
pnpm exec ts-node src/index.ts
# 或者，如果您已经编译：
# pnpm build
# node dist/index.js

服务器将通过标准输入/输出 (Stdio) 进行通信。

服务器配置

MCP 客户端需要配置如何启动并连接到此服务器。典型的 MCP 客户端配置是一个 JSON 对象，包含服务器名称、启动命令及其参数。对于此服务器，配置信息大致如下：

{
  "name": "ui-kit.ai component library assistant",
  "command": "node",
  "args": [
    "packages/mcp-server/dist/index.js"
    // 或者根据您的运行方式，args 可能是 ["pnpm", "exec", "ts-node", "packages/mcp-server/src/index.ts"]
  ],
  // 根据您的MCP客户端和实际部署方式，可能还需要配置 "cwd", "env" 等
  "transport": "stdio" // 明确使用 Stdio 传输协议
}

'name': 服务器在其能力声明中使用的名称，用于客户端识别。
'command': 启动 MCP 服务器进程的可执行文件路径。通常是 'node' 或 'ts-node'，也可能是包含启动逻辑的 shell 脚本。
'args': 传递给 'command' 的命令行参数数组。第一个参数通常是服务器主入口文件的路径（例如 'packages/mcp-server/dist/index.js' 或 'packages/mcp-server/src/index.ts'）。

请注意: 实际的 'command' 和 'args' 可能取决于您如何构建和部署这个 Monorepo 中的 MCP 服务器包。您可能需要调整路径或使用 wrapper 脚本。

基本使用方法

一旦 MCP 服务器启动并通过 Stdio 与 MCP 客户端连接成功，LLM 客户端就可以通过 MCP JSON-RPC 请求来调用服务器暴露的工具。

调用 'getComponentIndex' 工具: LLM 客户端可以调用此工具来获取所有组件的名称列表。
调用 'getComponentImplementation' 工具: LLM 客户端可以调用此工具，并提供 'componentName' 参数 (例如 '{"componentName": "Button"}')，以获取指定组件的使用示例代码。

具体的 JSON-RPC 请求格式取决于 LLM 客户端的实现，但底层会遵循 MCP 协议规范来与服务器通信。

关键词

项目简介

主要功能点

安装步骤

服务器配置

基本使用方法

信息