AI导哈

设计系统组件服务

一个为EBA设计系统提供HTML组件的MCP服务器，支持按需生成按钮和表格组件的HTML片段。

  • by davidyarham
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 davidyarham/mcp-eba

使用说明

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服务器运行

  1. 安装依赖项并启动服务器（无需构建步骤）：

    npm install

npm运行开发


2. VS Code (or any MCP-aware client) can use the `.vscode/mcp.json` entry:

```json
{
  "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 class="eba-button">Button Text</button> 主要动作触发器。
table <table class="eba-table"><thead>...</thead><tbody>...</tbody></table> 结构化数据的表格布局。

更新 src/designSystem.js 随着设计系统的发展，添加更多的组件。

相关 MCP