基础涂层-ui-mcp

Name: 基础涂层-ui-mcp
Author: Sorbh

作者：Sorbh3 星标更新：2025-08-15

安装使用来源：spider==github.com

项目介绍

Basecoat MCP Server

故事

在构建我的业余项目——将旧设备变成一个数字相框时，我遇到了UI组件的问题。我想使用Basecoat CSS，这是ShadCN UI的HTML版本，但没有MCP服务器可以轻松地拉取组件和文档以辅助AI编程。

所以我创建了一个。
这是我的第一个MCP服务器，旨在让每个人都能轻松地使用Basecoat（以及类似ShadCN样式的组件）。欢迎反馈和贡献！

这是一个提供对Basecoat CSS组件及其使用文档程序化访问的Model Context Protocol (MCP)服务器。该服务器允许AI助手帮助开发者使用Basecoat CSS框架构建HTML界面。

功能

30多种组件变体：访问按钮、输入框、卡片、对话框、标签页等。
使用文档：每个组件的完整实现指南及示例。
设置脚本：即时获取CDN链接和主题切换代码。
搜索与发现：按名称或类别查找组件。
无障碍就绪：所有组件都包含ARIA属性和语义HTML。

技术栈

Node.js - JavaScript运行环境
@modelcontextprotocol/sdk - 创建MCP服务器

安装

克隆此仓库：

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

安装依赖项：
```
npm install
```

MCP配置

你可以通过使用npx（如果包已发布到npm）或克隆仓库进行本地开发来运行此服务器。

使用NPX（推荐）

这是最简单的开始方式，不需要克隆仓库。

Claude Desktop

更新你的claude_desktop_config.json：

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

其他MCP客户端

配置服务器运行：

npx basecoat-ui-mcp

使用Git克隆（本地开发）

对于本地开发或如果你想修改服务器：

克隆并设置：

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

Claude Desktop配置：

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

将/path/to/basecoat-ui-mcp替换为你实际克隆仓库的位置。

其他MCP客户端：

cd /path/to/basecoat-ui-mcp
node server.js

可用工具

工具	描述	参数
`get_component`	获取特定组件变体的HTML代码	`name`: 组件名称（例如："button-primary", "card-basic"）
`list_components`	列出所有可用组件，按类别组织	无
`get_usage`	获取组件的综合使用文档	`component`: 基础组件名称（例如："button", "card"）
`get_setup`	获取带有CDN链接的Basecoat CSS设置代码	无
`get_theme_script`	获取用于暗/亮模式的主题切换器脚本	无
`search_components`	按名称或类别搜索组件	`query`: 搜索词（例如："button", "form", "navigation"）
`get_category`	获取特定类别的所有组件	`category`: 类别名称（表单、导航、反馈、交互、布局）

组件类别

表单

按钮：主要、次要、轮廓、破坏性、幽灵、链接、图标变体
输入框：基本、带标签、无效状态
选择框：原生、自定义下拉菜单
复选框：基本、带标签、带描述
单选框：单一、组变体
开关：基本、带描述
文本区域、标签、表单容器

反馈

警告：成功、错误变体
徽章：主要、次要、破坏性、轮廓
对话框：模态、警告对话框变体
通知：通知系统

交互

下拉菜单：具有各种项目的上下文菜单
弹出框：富内容工具提示
工具提示：简单悬停工具提示，带定位
组合框：可搜索的选择下拉菜单
主题切换器：暗/亮模式切换

布局

卡片：基本、带图标变体
头像：小、中、大、备用
骨架屏：个人资料、卡片加载状态
表格：响应式数据展示
分页：大数据集导航

目录结构

basecoat-mcp/
├── components/           # HTML组件文件
│   ├── forms/           # 表单元素
│   ├── navigation/      # 导航组件  
│   ├── feedback/        # 警告、徽章、对话框
│   ├── interactive/     # 下拉菜单、工具提示
│   └── layout/          # 卡片、表格、头像
├── usage/               # 使用文档
│   ├── forms/
│   ├── navigation/
│   ├── feedback/
│   ├── interactive/
│   └── layout/
├── scripts/             # 设置和实用脚本
├── server.js            # MCP服务器实现
├── package.json
└── README.md

关于Basecoat CSS

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

可访问的、语义化的组件
暗/亮主题支持
Tailwind CSS集成
JavaScript增强的交互
移动响应式设计

了解更多，请访问basecoatui.com

许可证

MIT许可证 - 查看LICENSE文件了解详情。

贡献

分叉仓库
创建功能分支：git checkout -b feature/amazing-feature
根据我们的编码标准进行更改
彻底测试你的更改
提交清晰的消息：git commit -m '添加了惊人的功能'
推送到你的分支：git push origin feature/amazing-feature
打开Pull Request

支持

问题：GitHub Issues

<p align="center"> 由Claude Code用心打造 - 监控与提示由Saurabh K. Sharma提供 </p>