Basecoat UI

Basecoat MCP 服务

为你的 AI 助手提供完整的 Basecoat UI 组件库（纯 HTML + Tailwind 实现的 shadcn/ui 风格，无需 React），让它能够编写正确的 Basecoat 标记，而不是猜测类名。

与 Basecoat 版本同步更新。 Basecoat 1.0.2 发布时引入了不兼容的 API 变更；这个 MCP 服务当天就完成了更新。

故事

在开发我的业余项目时——将旧设备改造成数码相框——我在 UI 组件上遇到了困难。我想使用 Basecoat CSS，也就是 ShadCN UI 的 HTML 移植版，但当时没有 MCP 服务能轻松地将组件和文档引入 AI 辅助编码。

于是我构建了这个服务。
这是我的第一个 MCP 服务，希望它能让所有人都能轻松使用 Basecoat（以及 ShadCN 风格的组件）。欢迎反馈和贡献！

---

一个模型上下文协议（MCP）服务，提供对 Basecoat CSS 组件及其使用文档的程序化访问。此服务可帮助 AI 助手协助开发者使用 Basecoat CSS 框架构建 HTML 界面。

功能

• Basecoat 1.0.2：所有标记均遵循 1.0 API（class="btn" data-variant="outline"、.field、基于方法的 JS）。
• 90 多种组件变体：按钮、字段、输入组、卡片、对话框、命令菜单、抽屉、图表等。
• 使用文档：提供 30 种组件的实现指南，包括 JS 要求和 0.x 迁移说明。
• 设置脚本：提供任意样式包（Vega、Nova、Maia、Lyra、Mira、Luma、Sera、Rhea）的 CDN 链接以及主题脚本。
• 搜索与发现：按名称或类别查找组件。
• 支持无障碍访问：所有组件均包含 ARIA 属性和语义化 HTML。

快速开始

无需安装：每个客户端都通过 npx 运行此服务。

Claude Code

claude mcp add basecoat-ui -- npx -y basecoat-ui-mcp

Claude Desktop

添加到 claude_desktop_config.json：

{
  "mcpServers": {
    "basecoat-ui": {
      "command": "npx",
      "args": ["-y", "basecoat-ui-mcp"]
    }
  }
}

Cursor

点击上方的 Install in Cursor，或添加到 ~/.cursor/mcp.json：

{
  "mcpServers": {
    "basecoat-ui": {
      "command": "npx",
      "args": ["-y", "basecoat-ui-mcp"]
    }
  }
}

VS Code（GitHub Copilot）

点击上方的 Install in VS Code，或添加到 .vscode/mcp.json：

{
  "servers": {
    "basecoat-ui": {
      "command": "npx",
      "args": ["-y", "basecoat-ui-mcp"]
    }
  }
}

Windsurf

添加到 ~/.codeium/windsurf/mcp_config.json：

{
  "mcpServers": {
    "basecoat-ui": {
      "command": "npx",
      "args": ["-y", "basecoat-ui-mcp"]
    }
  }
}

Codex CLI

添加到 ~/.codex/config.toml：

[mcp_servers.basecoat-ui]
command = "npx"
args = ["-y", "basecoat-ui-mcp"]

其他 MCP 客户端

运行 npx -y basecoat-ui-mcp，将其作为 stdio 服务运行。

试用

向你的助手提出类似这样的请求：

使用 Basecoat 构建一个注册页面：包含一张卡片、GitHub/Google 按钮、电子邮件和密码字段，以及深色模式切换开关。

它会调用 get_setup，获取匹配的组件和用法文档，并返回使用真实 Basecoat 1.0 API 的 HTML。

本地开发

git clone https://github.com/Sorbh/basecoat-ui-mcp.git
cd basecoat-ui-mcp
npm install

将客户端指向本地副本：

{
  "mcpServers": {
    "basecoat-ui": {
      "command": "node",
      "args": ["/path/to/basecoat-ui-mcp/server.js"]
    }
  }
}

可用工具

工具	描述	参数
get_component	获取特定组件变体的 HTML 代码	name：组件名称（例如 "button-outline"、"field"、"command"）。添加类别前缀以消除歧义（例如 "layout/pagination"）
list_components	按类别列出所有可用组件	无
get_usage	获取组件的用法文档	component：组件名称（例如 "button"、"combobox"）。变体名称会回退到其基础文档（"button-primary" → "button"）
get_setup	获取带 CDN 链接的 Basecoat CSS 设置代码	style（可选）：vega（默认）、nova、maia、lyra、mira、luma、sera、rhea
get_theme_script	获取深色/浅色模式的主题切换脚本	无
search_components	按名称或类别搜索组件	query：搜索词（例如 "button"、"form"、"navigation"）
get_category	获取特定类别中的所有组件	category：combine、feedback、forms、interactive、layout、navigation

组件类别

表单

• 按钮：默认、次要、描边、幽灵、链接、危险、尺寸、图标、带图标、加载中
• 按钮组：水平、垂直
• 字段 / 字段集：标签、描述、无效状态、分组字段
• 输入框 / 输入框组：基础、带标签、无效、带图标、带按钮
• 选择框：原生选择框、JS 选择框
• 复选框、单选按钮组、开关：带标签和描述
• 滑块、文本区域、标签、表单容器

导航

• 标签页、折叠面板、面包屑、侧边栏

反馈

• 警告框：默认、成功、错误
• 警告对话框、对话框：确认和模态表单
• 徽章：主要、次要、危险、描边
• Toast、空状态、进度条、加载指示器

交互

• Command：内联和对话框调色板
• Combobox：输入优先的可搜索选择框
• 下拉菜单、弹出框、工具提示
• 抽屉（测试版）：底部和侧边
• 主题切换器

布局

• 卡片、头像、项目、Kbd、滚动区域
• 骨架屏、表格、分页
• 图表（测试版）

组合

组合示例：聊天、登录、设置、交互式分页。

从此 MCP 的 1.x 版本升级

此 MCP 的 2.0.0 版本面向 Basecoat 1.0.2，该版本相较于 Basecoat 0.3.x 存在不兼容变更：

• 变体类改为数据属性：btn-outline → class="btn" data-variant="outline"，btn-sm-icon → data-size="icon-sm"。
• .form 包装器已移除；请将每个标签和控件都放在 <div class="field"> 中。
• 文档事件（basecoat:toast、basecoat:sidebar、basecoat:theme）已替换为方法：toaster.toast()、sidebar.toggle()、window.basecoat.theme.toggle()。
• dialog-alert 已重命名为 alert-dialog。

如果你的项目仍使用 0.x 标记，请在迁移期间于 Basecoat 后加载 Basecoat 兼容性样式表（@import "basecoat-css/compat";）。完整迁移指南请参阅 style-guide.md。

目录结构

basecoat-mcp/
├── components/           # HTML component files
│   ├── combine/         # Composed page examples
│   ├── feedback/        # Alerts, badges, dialogs, toasts
│   ├── forms/           # Buttons, fields, inputs, selects
│   ├── interactive/     # Command, combobox, dropdowns, tooltips
│   ├── layout/          # Cards, tables, avatars, items
│   └── navigation/      # Tabs, accordion, sidebar
├── usage/               # Usage documentation (same categories)
├── scripts/             # Setup and theme scripts
├── style-guide.md       # Full Basecoat 1.0 style and migration guide
├── server.js            # MCP server implementation
├── package.json
└── README.md

类别从磁盘读取，因此只需在 components/ 或 usage/ 下添加文件夹即可使其可用。

关于 Basecoat CSS

Basecoat CSS 是一个全面的 CSS 框架，提供：

• 无障碍、语义化组件
• 深色/浅色主题支持
• Tailwind CSS 集成
• JavaScript 增强的交互
• 移动端响应式设计

访问 basecoatui.com 了解更多信息。

许可证

MIT 许可证 - 详情请参阅 LICENSE 文件。

贡献

1. Fork 此仓库
2. 创建功能分支：git checkout -b feature/amazing-feature
3. 按照我们的编码规范进行修改
4. 彻底测试你的修改
5. 使用清晰的提交信息：git commit -m 'Add amazing feature'
6. 将代码推送到你的分支：git push origin feature/amazing-feature
7. 创建 Pull Request

支持

• 问题：GitHub Issues

---

由 Claude Code 倾心打造——由 Saurabh K. Sharma 监控并提供提示