@blueking/chat-x-mcp

@blueking/chat-x 组件库的 MCP (Model Context Protocol) 服务器，提供智能开发辅助功能。

特性

• 📚 文档查询 - 快速获取组件 API 文档、类型定义
• 🔧 代码生成 - 自动生成组件使用示例、聊天页面模板
• 🔍 代码分析 - 分析组件结构、Props、Events、Slots
• 🌐 多传输支持 - 支持 Stdio 和 SSE 两种传输模式

安装

方式一：npx 直接运行（推荐）

无需安装，直接运行：

# Stdio 模式
npx @blueking/chat-x-mcp --stdio

# SSE 模式
npx @blueking/chat-x-mcp --sse --port 3000

方式二：本地开发

# 进入 mcp 包目录
cd packages/mcp

# 安装依赖
pnpm install

# 构建
pnpm build

# 运行
node dist/index.js --stdio

使用方式

Stdio 模式（推荐）

适用于 Claude Desktop、Cursor 等客户端：

# npx 方式
npx @blueking/chat-x-mcp --stdio

# 本地开发
node dist/index.js --stdio

SSE 模式

适用于 Web 应用集成：

# npx 方式
npx @blueking/chat-x-mcp --sse --port 3000

# 本地开发
node dist/index.js --sse --port 3000

环境变量

支持通过环境变量配置，命令行参数优先级更高：

| 环境变量 | 说明 | 默认值 | | ---------- | -------------- | --------- | | MCP_MODE | 传输模式 | stdio | | MCP_PORT | SSE 模式端口号 | 3000 | | MCP_HOST | SSE 模式主机 | 0.0.0.0 |

# 使用环境变量启动
MCP_MODE=sse MCP_PORT=8080 npx @blueking/chat-x-mcp

配置客户端

Claude Desktop

在 claude_desktop_config.json 中添加：

{
  "mcpServers": {
    "chat-x": {
      "command": "npx",
      "args": ["@blueking/chat-x-mcp", "--stdio"]
    }
  }
}

Cursor

在项目根目录的 .cursor/mcp.json 中添加：

{
  "mcpServers": {
    "chat-x": {
      "command": "npx",
      "args": ["@blueking/chat-x-mcp", "--stdio"]
    }
  }
}

可用功能

Tools (工具)

文档查询类

| 工具名 | 说明 | | --------------------- | ------------------------------- | | get_composable_doc | 获取 Composable 文档 | | get_type_definition | 获取类型定义 | | search_docs | 搜索文档 | | get_ag_ui_types | 获取 AG-UI Message/Content 类型 |

代码生成类

| 工具名 | 说明 | | -------------------------- | ------------------ | | generate_component_usage | 生成组件使用示例 | | generate_message_list | 生成消息列表代码 | | generate_chat_page | 生成聊天页面模板 | | generate_custom_message | 生成自定义消息类型 |

代码分析类

| 工具名 | 说明 | | ------------------- | ------------ | | analyze_component | 分析组件结构 | | list_components | 列出所有组件 |

开发调试

使用 MCP Inspector 进行调试：

npx @modelcontextprotocol/inspector node dist/index.js

示例对话

生成聊天页面

用户: 帮我生成一个带流式消息和工具调用的聊天页面

AI: [调用 generate_chat_page 工具]
生成包含 streaming 和 tool_calls 功能的完整 Vue 组件代码...

搜索文档

用户: 搜索关于 Markdown 的文档

AI: [调用 search_docs 工具]
返回所有包含 Markdown 关键词的文档片段...

目录结构

packages/mcp/
├── src/
│   ├── index.ts              # 主入口
│   ├── server.ts             # MCP Server 实现
│   ├── tools/                # 工具模块
│   │   ├── index.ts
│   │   ├── docs-tools.ts     # 文档查询工具
│   │   ├── generate-tools.ts # 代码生成工具
│   │   └── analyze-tools.ts  # 代码分析工具
│   ├── transports/           # 传输层
│   │   ├── index.ts
│   │   └── sse.ts
│   └── utils/                # 工具函数
│       ├── index.ts
│       ├── file-reader.ts
│       └── markdown-parser.ts
├── package.json
├── tsconfig.json
└── README.md

依赖

• @modelcontextprotocol/sdk - MCP SDK
• express - SSE 服务器
• glob - 文件搜索
• gray-matter - Markdown 解析
• zod - 类型验证

许可证

MIT License