Bernova MCP服务器
模型上下文协议（MCP）服务器 伯诺娃 -JS中的CSS库，允许AI代理以编程方式与Bernova样式交互和管理。
⚡ 现在针对Bun进行了优化！ 安装速度快3倍，启动速度快10倍。看 BUN_GUIDE.md 了解详情。
支持的IDE
- ✅ 克劳德桌面 -Anthropic的桌面应用程序
- ✅ VS Code -使用Cline扩展
- ✅ 光标 -AI第一代码编辑器
- ✅ 帆板运动 -Codeium的集成开发环境
- ✅ 泽德 -高性能编辑器
- ✅ 任何兼容MCP的IDE
看 CLAUDE_DESKTOP_SETUP.md 详细的IDE配置。
特性
- 配置管理：创建、读取和更新Bernova配置
- 风格汇编：编译不同模式的样式（完整、仅基础、仅组件）
- 组件管理：创建、读取、更新和删除样式化组件
- CSS变量：添加和更新CSS自定义属性（基础）
- 媒体查询：管理响应断点
- 验证：编译前验证样式
- TypeScript支持：全类型安全和自动完成
安装
使用Bun（推荐）
bun add bernova-mcp或全局安装：
bun add -g bernova-mcp使用npm
npm install bernova-mcp快速开始
1.在您的项目中安装Bernova
# Using Bun (recommended)
bun add bernova
# Using npm
npm install bernova2.运行MCP服务器
# Using Bun
bunx bernova-mcp
# Using npx
npx bernova-mcp3.配置IDE
请参阅中所有支持的IDE的完整设置指南 CLAUDE_DESKTOP_SETUP.md.
Claude Desktop的快速示例：
使用Bun（推荐）：
{
"mcpServers": {
"bernova": {
"command": "bun",
"args": ["run", "/absolute/path/to/bernova-mcp/dist/index.js"]
}
}
}
## Available Tools
### Configuration Tools
#### `get_config`
Get the current Bernova configuration from `bernova.config.json`.
// No parameters required
**答复：**
{ "success": true, "data": { "provider": { ... }, "themes": [ ... ] }, "message": "Configuration loaded successfully" }
#### `create_config`
使用默认值创建新的Bernova配置文件。
{ themeName?: string // Default: "default" }
**例子：**
{ "themeName": "dark-theme" }
#### `update_config`
更新Bernova配置（合并或替换）。
{ config: BernovaConfig, // Partial or complete config merge?: boolean // Default: true }
**例子：**
{ "config": { "themes": [ { "name": "dark", "stylesPath": "./src/styles/dark" } ] }, "merge": true }
#### `list_themes`
列出所有可用的主题。
// No parameters required
**答复：**
{ "success": true, "data": ["default", "dark", "light"], "message": "Found 3 theme(s)" }
______________________________________________________________________
### 编译工具
#### `compile_styles`
使用不同模式编译Bernova样式。
{ mode?: "full" | "foundationOnly" | "componentOnly" // Default: "full" }
**例子：**
{ "mode": "full" }
**模式：**
- `full`：编译基础+组件
- `foundationOnly`：仅编译CSS变量和基本样式
- `componentOnly`：仅编译组件类
#### `build_styles`
具有自定义选项的高级构建。
{ baseOutDir?: string, minifyJs?: boolean, embedCss?: boolean, types?: ("cjs" | "esm")[] }
**例子：**
{ "baseOutDir": "./dist", "minifyJs": true, "embedCss": true, "types": ["cjs", "esm"] }
______________________________________________________________________
### 组件工具
#### `create_component`
使用样式创建新组件。
{ componentName: string, styles: ComponentStyles, themeName?: string }
**例子：**
{ "componentName": "BUTTON", "styles": { "background_color": "blue", "color": "white", "padding": "10px 20px", "border_radius": "4px", "_icon": { "width": "16px", "height": "16px" }, "PRIMARY": { "background_color": "darkblue" }, "$pseudoClasses": { "hover": { "background_color": "lightblue" } } } }
#### `get_component`
获取现有组件的样式。
{ componentName: string, themeName?: string }
**例子：**
{ "componentName": "BUTTON", "themeName": "default" }
#### `update_component`
更新现有组件的样式。
{ componentName: string, styles: ComponentStyles, themeName?: string }
#### `delete_component`
删除组件。
{ componentName: string, themeName?: string }
#### `list_components`
列出主题中的所有可用组件。
{ themeName?: string }
**答复：**
{ "success": true, "data": ["BUTTON", "CARD", "INPUT"], "message": "Found 3 component(s) in theme 'default'" }
______________________________________________________________________
### CSS变量工具
#### `add_css_variable`
将CSS变量添加到基础中。
{ category: string, name: string, value: string | number, themeName?: string }
**例子：**
{ "category": "colors", "name": "primary", "value": "#0066cc" }
这将产生： `--colors-primary: #0066cc`
#### `update_css_variable`
更新现有的CSS变量。
{ category: string, name: string, value: string | number, themeName?: string }
#### `get_css_variables`
从主题中获取所有CSS变量。
{ themeName?: string }
______________________________________________________________________
### 媒体查询工具
#### `add_media_query`
添加媒体查询配置。
{ name: string, type: string, values: Record, themeName?: string }
**例子：**
{ "name": "tablet", "type": "screen", "values": { "min-width": "768px", "max-width": "1024px" } }
#### `list_media_queries`
列出主题中的所有媒体查询。
{ themeName?: string }
______________________________________________________________________
### 验证工具
#### `validate_component_styles`
在创建/更新之前验证组件样式语法。
{ styles: ComponentStyles }
**例子：**
{ "styles": { "background_color": "red", "_text": { "font-size": "16px" } } }
**答复：**
{ "success": false, "data": { "valid": false, "errors": [], "warnings": [ "Property 'font-size' should use underscores instead of hyphens" ] } }
______________________________________________________________________
## 用法示例
### 示例1：从头开始创建设计系统
AI Agent: "Create a new Bernova project with a button component"
- create_config({ themeName: "myapp" })
- add_css_variable({
category: "colors", name: "primary", value: "#007bff" })
- add_css_variable({
category: "spacing", name: "md", value: "16px" })
- create_component({
componentName: "BUTTON", styles: { background_color: "var(--colors-primary)", padding: "var(--spacing-md)", border: "none", border_radius: "4px" } })
- compile_styles({ mode: "full" })
### 示例2：添加响应式设计
AI Agent: "Add responsive breakpoints and make the button adapt to mobile"
- add_media_query({
name: "mobile", type: "screen", values: { "max-width": "767px" } })
- update_component({
componentName: "BUTTON", styles: { padding: "16px", $mediaQueries: { mobile: { padding: "12px", font_size: "14px" } } } })
- compile_styles({ mode: "componentOnly" })
### 示例3：创建组件变体
AI Agent: "Create primary and secondary button variants"
update_component({ componentName: "BUTTON", styles: { padding: "10px 20px", border_radius: "4px", PRIMARY: { background_color: "#007bff", color: "white" }, SECONDARY: { background_color: "#6c757d", color: "white" }, $pseudoClasses: { hover: { opacity: "0.9" } } } })
______________________________________________________________________
## 项目结构
bernova-mcp-server/ ├── src/ │ ├── index.ts # Main MCP server │ ├── tools/ │ │ ├── config.ts # Configuration tools │ │ ├── compile.ts # Compilation tools │ │ ├── components.ts # Component management │ │ └── variables.ts # Variables & media queries │ ├── types/ │ │ └── bernova.types.ts # TypeScript types │ └── utils/ │ ├── file-system.ts # File system utilities │ └── validators.ts # Validation utilities ├── package.json ├── tsconfig.json └── README.md
______________________________________________________________________
## Bernova风格语法参考
### 基本属性
使用下划线而不是连字符：
{ background_color: "red", // ✅ Correct font_size: "16px", // ✅ Correct // background-color: "red" // ❌ Wrong }
### 嵌套的元素
对嵌套元素（BEM）使用下划线前缀：
{ BUTTON: { padding: "10px", _icon: { // Creates .button__icon width: "16px" }, _text: { // Creates .button__text font_size: "14px" } } }
### 变体
使用大写键表示变体（BEM修饰符）：
{ BUTTON: { padding: "10px", PRIMARY: { // Creates .button--primary background: "blue" }, SECONDARY: { // Creates .button--secondary background: "gray" } } }
### 伪类
使用 `$pseudoClasses` 为了 `:hover`, `:focus`等等：
{ $pseudoClasses: { hover: { background_color: "darkblue" }, focus: { outline: "2px solid blue" } } }
### 伪元素
使用 `$pseudoElements` 为了 `::before`, `::after`:
{ $pseudoElements: { before: { $content: '""', display: "block" } } }
### 媒体查询
使用 `$mediaQueries` 具有配置的断点：
{ width: "100%", $mediaQueries: { mobile: { width: "90%" }, tablet: { width: "80%" } } }
### 属性
使用 `$attributes` 对于属性选择器：
{ $attributes: { "data-active": { background_color: "green" } } }
### 高级选择器
使用 `$advancedSelector` 对于后代、子代、兄弟姐妹选择器：
{ $advancedSelector: [ { descendant: { $target: "span", color: "red" } }, { child: { $target: "p", font_size: "14px" } } ] }
### 动态值
使用 `$dynamicValues` 对于运行时CSS变量：
{ $dynamicValues: ["$bgColor", "$textColor"], background_color: "$bgColor", color: "$textColor" }
______________________________________________________________________
## TypeScript类型
服务器提供完整的TypeScript支持：
import type { BernovaConfig, ComponentStyles, CSSProperties } from 'bernova-mcp-server';
______________________________________________________________________
## 错误处理
所有工具都返回一致的响应格式：
{ success: boolean, data?: any, error?: string, message?: string }
**成功：**
{ "success": true, "data": { ... }, "message": "Operation completed successfully" }
**错误：**
{ "success": false, "error": "Component 'BUTTON' not found" }
______________________________________________________________________
## 发展
### 构建
npm run build
### 观看模式
npm run dev
### 在本地运行
npm start
______________________________________________________________________
## 需求
- Node.js>=20.0.0
- 伯诺瓦>=1.3.2
- Bernova项目 `bernova.config.json`
______________________________________________________________________
## 贡献
欢迎投稿！请随时提交拉取请求。
______________________________________________________________________
## 许可证
麻省理工学院
______________________________________________________________________
## 相关项目
- [伯诺娃](https://github.com/kubit-ui/bernova) -JS库中的CSS
- [MCP-SDK](https://github.com/modelcontextprotocol/sdk) -模型上下文协议SDK
______________________________________________________________________
## 支持
对于问题和疑问：
- Bernova问题：https://github.com/kubit-ui/bernova/issues
- MCP服务器问题：在此存储库中创建问题
______________________________________________________________________
## 更新日志
### 版本1.0.0
- 初始版本
- 用于Bernova交互的15+MCP工具
- 完全支持TypeScript
- 验证实用程序
- 配置管理
- 组件CRUD操作
- CSS变量管理
- 媒体查询支持
- 样式编译工具