Basecoat UI MCP Server

MCP服务器底漆

 ](https://nodejs.org/en/download/releases/)

故事

所以我建了一个。\ 这是我的第一台MCP服务器，它的目的是让每个人都能轻松使用Basecoat（和ShadCN风格的组件）。欢迎反馈和贡献！

______________________________________________________________________

一种模型上下文协议（MCP）服务器，提供对以下内容的编程访问 底涂层CSS 组件及其使用文档。该服务器允许AI助手帮助开发人员使用Basecoat CSS框架构建HTML界面。

特性

• 30+组件变体：访问按钮、输入、卡片、对话框、选项卡等。
• 使用文档：完整的实施指南，每个组件都有示例。
• 设置脚本：立即获取CDN链接和主题切换代码。
• 搜索与发现：按名称或类别查找组件。
• 可访问性就绪：所有组件都包括ARIA属性和语义HTML。

技术栈

• -JavaScript运行时环境
• @模型上下文协议/sdk -用于创建MCP服务器

安装

1. 克隆此存储库：

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

1. 安装依赖项：

   npm install

MCP配置

您可以通过以下方式运行此服务器 npx （如果包发布在npm上）或通过克隆存储库进行本地开发。

使用NPX（推荐）

此方法是最简单的入门方法，不需要克隆存储库。

克劳德桌面

更新您的 claude_desktop_config.json:

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

其他MCP客户端

配置服务器以运行：

npx basecoat-ui-mcp

使用Git克隆（本地开发）

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

1. 克隆和设置：

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

1. Claude桌面配置：

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

替换 /path/to/basecoat-ui-mcp 使用克隆存储库的实际路径。

1. 其他MCP客户端：

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

可用工具

组件类别

表单

• 按钮：主要、次要、轮廓、破坏性、重影、链接、图标变体
• 输入：基本、带标签、无效状态
• 选择：本地、自定义下拉菜单
• 复选框：基本，带标签，带描述
• 收音机：单个、组变化
• 开关：基本，带描述
• 文本区、标签、表单容器

导航

• 标签页：水平、垂直，支持ARIA
• 手风琴：可折叠内容部分
• 面包屑导航：导航轨迹
• 侧边栏：画布外导航

反馈

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

交互式

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

布局

• 卡：基本型，带有图标变体
• 阿凡达：小、中、大、回退
• 骨架：配置文件、卡的加载状态
• 表格：响应式数据显示
• 分页：大型数据集的导航

目录结构

basecoat-mcp/
├── components/           # HTML component files
│   ├── forms/           # Form elements
│   ├── navigation/      # Navigation components  
│   ├── feedback/        # Alerts, badges, dialogs
│   ├── interactive/     # Dropdowns, tooltips
│   └── layout/          # Cards, tables, avatars
├── usage/               # Usage documentation
│   ├── forms/
│   ├── navigation/
│   ├── feedback/
│   ├── interactive/
│   └── layout/
├── scripts/             # Setup and utility scripts
├── server.js            # MCP server implementation
├── package.json
└── README.md

关于底漆CSS

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

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

了解更多信息，请访问 basecoatui.com

许可证

MIT许可证-有关详细信息，请参阅许可证文件。

贡献

1. 分叉存储库
2. 创建要素分支： git checkout -b feature/amazing-feature
3. 按照我们的编码标准进行更改
4. 彻底测试您的更改
5. 以明确的信息承诺： git commit -m 'Add amazing feature'
6. 推到您的分支： git push origin feature/amazing-feature
7. 打开拉取请求

支持

• 问题:

______________________________________________________________________

Built with ❤️ by Claude Code - Monitored & Prompted by Saurabh K. Sharma