EBA设计系统MCP服务器
一个模型上下文协议(MCP)服务器,为EBA设计系统公开HTML代码段。目前包括 eba-button 和 eba-table 组件,并作为Node.js+Express服务运行,使用单个MCP工具按需返回代码段。
先决条件
- Node.js 18+
- npm 9+
脚本
| 命令 | 描述 |
|---|---|
npm run dev | 使用实时日志启动服务器以进行本地开发。 |
npm start | 在生产模式下运行服务器(由MCP客户端使用)。 |
npm run lint | 通过以下方式对JavaScript源代码进行语法检查 node --check. |
作为MCP服务器运行
- 安装依赖项并启动服务器(无需构建步骤):
npm installnpm运行开发
2. VS Code (or any MCP-aware client) can use the `.vscode/mcp.json` entry:
{ "servers": { "eba-design-system": { "type": "stdio", "command": "node", "args": ["src/index.js"] } } }
这登记了 `eba_component_snippet` 工具,它需要:
- `component`: `"button" | "table"`
- `label` (可选):自定义按钮复制
- `headers` (可选):表头标签
- `rows` (可选):表体单元格的二维数组
该工具以使用指南和一个带围栏的HTML片段作为响应。
## 快速助手端点
尽管MCP使用stdio,但服务器也公开了轻量级HTTP端点以供手动检查:
- `GET /health` –返回可用组件和服务状态的列表。
- `GET /components/:component?label=Custom` –返回带有请求代码段的JSON。
使用设置自定义端口 `PORT`,否则默认为 `4135`.
## 组件
|组件|HTML|目的|
| --------- | ---- | ------- |
| `button` | `Button Text` |主要动作触发器。 |
| `table` | `......` |结构化数据的表格布局。 |
更新 `src/designSystem.js` 随着设计系统的发展,添加更多的组件。