使用说明
Webpixels MCP服务器
用于Webpixels Bootstrap 5组件的MCP服务器。该服务器使Claude等AI助手能够从Webpixels库中搜索、检索和组装Bootstrap UI组件。
安装
通过npx（推荐）
添加到您的Claude桌面配置(~/.config/claude/claude_desktop_config.json 在macOS上）：
{
"mcpServers": {
"webpixels": {
"command": "npx",
"args": ["-y", "@webpixels/mcp"]
}
}
}
通过全局安装
npm install -g @webpixels/mcp
然后添加到您的配置中：
{
"mcpServers": {
"webpixels": {
"command": "webpixels-mcp"
}
}
}
可用工具
search_components
按名称、类别、类型或描述搜索Bootstrap组件。
参数：
query（string）：搜索查询（匹配名称、描述、标签）type（string）：按组件类型（组件、部分、卡片、屏幕、布局、页面、表单、图表）过滤category（string）：类别或子类别符号（例如，“部分”、“英雄”、“定价”）is_free（boolean）：仅过滤自由组件limit（number）：最大结果数（默认值：20）
get_component
获取特定组件的HTML代码和元数据。
参数：
id（string，必填）：组件UUID或slug（例如“section-hero-1”）
list_categories
列出所有包含组件计数的组件类别。
参数：
type（string）：按组件类型筛选类别
assemble_page
将多个组件组装成一个完整的HTML页面。
参数：
components（array，必填）：按显示顺序排列的组件ID或slug数组layout（string）：用于包装内容的可选布局组件IDincludeAssets（boolean）：在完整的HTML文档中包含CSS/JS链接（默认值：true）
get_component_dependencies
获取组件的依赖关系树。
参数：
id（string，必填）：组件UUID或slugdirection（string）：“依赖关系”（使用什么）、“依赖关系（使用什么的）或“两者都有”
组件类别
该库包括多个类别的组件：
- 组件：横幅、卡片、下拉菜单、标题、模态、导航栏、侧边栏、表格等。
- 表单：表单组、文本区域、表单布局、表单示例
- 章节：标题、英雄、功能、CTA、定价、常见问题解答、团队、推荐信、联系人、图库、徽标、博客、页脚
- 布局：水平、侧边栏、列
- 页面：登录、仪表板、CRUD、设置、授权、配置文件、消息等。
示例用法
User: I need a hero section for a SaaS landing page
Claude: [Uses search_components with query "hero saas"]
[Returns matching hero sections]
User: Show me the code for section-hero-1
Claude: [Uses get_component with id "section-hero-1"]
[Returns HTML and metadata]
User: Create a page with a hero and pricing section
Claude: [Uses assemble_page with components ["section-hero-1", "section-pricing-1"]]
[Returns complete HTML page]
发展
构建
npm install
npm run build
在本地运行
npm start
生成组件数据
组件数据由Webpixels库编译的HTML代码段生成：
# From the library repository
# Option 1: Generate snippets first, then MCP data
npm run snippets
npm run mcp:generate
# Option 2: All-in-one command
npm run mcp:generate:full
该脚本从以下位置读取编译后的HTML library/snippets/ （非生 .njk 文件），以确保所有包含的模板都已解析。
许可证
麻省理工学院
