UI组件服务

底漆UI MCP

一个模型上下文协议（MCP）服务器，为Claude和其他人工智能助手提供对综合库的访问 底涂层CSS UI组件该服务器使AI助手能够检索预构建的、可访问的HTML组件和使用文档，以构建用户界面。

特性

• 77个预制组件 -跨5个类别的生产就绪HTML组件
• 7 MCP工具 -列出、搜索、检索组件和文档
• 综合文档 -25个详细的使用指南和示例
• 暗/亮模式 -内置主题切换支持
• 可访问性优先 -所有组件都包含正确的ARIA属性

需求

• Node.js >= 18.0.0
• npm （包含在Node.js中）

安装

选项1：从GitHub克隆

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

选项2：通过npm安装

npm install -g basecoat-ui-mcp

配置

克劳德桌面

将服务器添加到Claude Desktop配置文件中：

macOS： ~/Library/Application Support/Claude/claude_desktop_config.json

窗户： %APPDATA%\Claude\claude_desktop_config.json

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

如果通过npm全局安装：

{
  "mcpServers": {
    "basecoat-ui": {
      "command": "basecoat-ui-mcp",
      "env": {}
    }
  }
}

更新配置后，重新启动Claude Desktop以加载MCP服务器。

其他MCP客户端

服务器使用标准I/O（stdio）传输，并与任何兼容MCP的客户端兼容。使用以下命令启动服务器：

node server.js

可用工具

MCP服务器提供了7个AI助手可以使用的工具：

list_components

按类别列出所有可用的底漆组件。

No parameters required

返回所有77个组件的完整清单，包括名称、类别和文件名。

get_component

检索特定组件的HTML代码。

示例名称：

• button-primary, button-secondary, button-destructive
• card-basic, card-with-icon
• input-with-label, input-invalid
• alert-success, alert-error

get_usage

获取组件类型的全面使用文档。

返回详细的markdown文档，其中包含示例、变体和最佳实践。

get_setup

使用CDN链接检索Basecoat CSS设置代码。

No parameters required

返回HTML样板以在新项目中初始化Basecoat CSS：

<!-- Tailwind CSS -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<!-- Basecoat CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@0.3.1/dist/basecoat.cdn.min.css">
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@0.3.1/dist/js/all.min.js" defer></script>

get_theme_script

获取暗/亮模式的主题切换器脚本。

No parameters required

返回一个完整的JavaScript实现，用于使用localStorage持久性进行主题切换。

search_components

按名称或类别搜索组件。

返回具有匹配类型（名称或类别匹配）的匹配组件。

get_category

获取特定类别中的所有组件。

组件库

表格（20个组成部分）

布局（17个组件）

导航（6个组件）

反馈（13个组成部分）

交互式（8个组件）

使用示例

示例1：构建表单

问克劳德：

“使用Basecoat组件创建登录表单”

Claude将使用MCP工具：

1. 拿到 input-with-label 电子邮件/密码字段组件
2. 拿到 button-primary 提交按钮的组件
3. 拿到 checkbox-with-label 为“记住我”
4. 将它们组合成一个完整的、可访问的形式

示例2：添加通知

问克劳德：

“如何将吐司通知添加到我的应用程序中？”

克劳德将使用：

1. get_usage 用“吐司”获取文档
2. get_component 用“吐司”来获取HTML
3. get_setup 以确保您拥有所需的脚本

示例3：搜索组件

问克劳德：

“有哪些按钮组件可用？”

克劳德将使用 search_components 使用“按钮”列出所有按钮变体。

运行服务器

启动服务器

npm start

开发模式（更改后自动重启）

npm run dev

运行测试

npm test

详细测试输出

npm run test:verbose

项目结构

basecoat-ui-mcp/
├── server.js                 # Main MCP server implementation
├── server.test.js            # Test suite
├── package.json              # Node.js configuration
├── style-guide.md            # Comprehensive styling guide
├── claude_desktop_config.json # Example Claude config
│
├── components/               # 77 HTML component files
│   ├── forms/               # Form components
│   ├── layout/              # Layout components
│   ├── navigation/          # Navigation components
│   ├── feedback/            # Feedback components
│   └── interactive/         # Interactive components
│
├── usage/                    # 25 markdown documentation files
│   ├── forms/
│   ├── layout/
│   ├── navigation/
│   ├── feedback/
│   └── interactive/
│
└── scripts/                  # Setup and theme scripts
    ├── setup.html           # CDN setup code
    └── theme-script.html    # Theme switcher script

关于底漆CSS

底涂层CSS 是基于Tailwind CSS v4构建的现代组件库。它提供：

• 具有适当可访问性的语义HTML组件
• 用于主题化的CSS自定义属性
• 开箱即用的黑暗模式支持
• 交互式组件的最小JavaScript
• 符合WAI-ARIA标准的组件

贡献

欢迎投稿！请随时提交拉取请求。

1. 分叉存储库
2. 创建功能分支(git checkout -b feature/amazing-feature)
3. 提交您的更改(git commit -m 'Add some amazing feature')
4. 推到分支(git push origin feature/amazing-feature)
5. 打开拉取请求

测试

该项目包括全面的测试，包括：

• 组件检索和验证
• 类别过滤和组织
• 搜索功能
• 文件可用性
• 错误处理和边缘情况
• 性能基准

运行完整的测试套件：

npm test

许可证

MIT许可证-请参阅 许可证 了解详情。

作者

Saurabh K.Sharma - GitHub

链接

• 底涂层CSS文档
• MCP协议规范
• 报告问题