MCP服务器底漆
故事
所以我建了一个。\ 这是我的第一台MCP服务器，它的目的是让每个人都能轻松使用Basecoat（和ShadCN风格的组件）。欢迎反馈和贡献！
______________________________________________________________________
一种模型上下文协议（MCP）服务器，提供对以下内容的编程访问 底涂层CSS 组件及其使用文档。该服务器允许AI助手帮助开发人员使用Basecoat CSS框架构建HTML界面。
特性
- 30+组件变体：访问按钮、输入、卡片、对话框、选项卡等。
- 使用文档：完整的实施指南，每个组件都有示例。
- 设置脚本：立即获取CDN链接和主题切换代码。
- 搜索与发现：按名称或类别查找组件。
- 可访问性就绪：所有组件都包括ARIA属性和语义HTML。
技术栈
- -JavaScript运行时环境
- @模型上下文协议/sdk -用于创建MCP服务器
安装
- 克隆此存储库：
git clone https://github.com/Sorbh/basecoat-ui-mcp.git
cd basecoat-mcp-server- 安装依赖项：
npm installMCP配置
您可以通过以下方式运行此服务器 npx （如果包发布在npm上）或通过克隆存储库进行本地开发。
使用NPX（推荐）
此方法是最简单的入门方法，不需要克隆存储库。
克劳德桌面
更新您的 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桌面配置：
{
"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：组件名称（例如，“按钮主”、“卡基本”） |
list_components | 按类别列出所有可用组件 | 无 |
get_usage | 获取组件的全面使用文档 | component：基本组件名称（例如“按钮”、“卡”） |
get_setup | 使用CDN链接获取Basecoat CSS设置代码 | 无 |
get_theme_script | 获取暗/亮模式的主题切换器脚本 | 无 |
search_components | 按名称或类别搜索组件 | query：搜索词（例如“按钮”、“表单”、“导航”） |
get_category | 获取特定类别中的所有组件 | category：类别名称（表单、导航、反馈、交互、布局） |
组件类别
表单
- 按钮：主要、次要、轮廓、破坏性、重影、链接、图标变体
- 输入：基本、带标签、无效状态
- 选择：本地、自定义下拉菜单
- 复选框：基本，带标签，带描述
- 收音机：单个、组变化
- 开关：基本，带描述
- 文本区、标签、表单容器
导航
- 标签页：水平、垂直，支持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许可证-有关详细信息，请参阅许可证文件。
贡献
- 分叉存储库
- 创建要素分支：
git checkout -b feature/amazing-feature - 按照我们的编码标准进行更改
- 彻底测试您的更改
- 以明确的信息承诺：
git commit -m 'Add amazing feature' - 推到您的分支：
git push origin feature/amazing-feature - 打开拉取请求
支持
- 问题:
______________________________________________________________________
Built with ❤️ by Claude Code - Monitored & Prompted by Saurabh K. Sharma