basecoat-ui-mcp

概述

Basecoat UI MCP 服务器提供对 30+ 个 Basecoat CSS 组件的程序化访问，包括按钮、输入框、卡片、对话框和导航元素。它使 AI 助手能够检索组件 HTML 代码、使用文档、设置脚本和主题切换代码。服务器支持搜索和发现功能，组件按表单、导航、反馈、交互元素和布局等类别组织。所有组件都包含具有 ARIA 属性和语义 HTML 的无障碍功能。

试试问 AI

装完之后，这里有 3 个你可以让 AI 做的事：

• get_componentname: string

  Get HTML code for a specific component variant

  试试:Get HTML for a button-primary component试试:Show me the card-basic code
• list_components

  List all available components organized by category

  试试:List all components试试:What components do you have available?
• get_usagecomponent: string

  Get comprehensive usage documentation for a component

  试试:Show me how to use the button component试试:Get documentation for tabs
• get_setup

  Get Basecoat CSS setup code with CDN links

  试试:How do I set up Basecoat CSS?试试:Get the setup code
• get_theme_script

  Get theme switcher script for dark/light mode

  试试:How do I add dark mode?试试:Get the theme switching script
• search_componentsquery: string

  Search for components by name or category

  试试:Search for form components试试:Find all navigation components
• get_categorycategory: string

  Get all components in a specific category

  试试:Show all form components试试:List the layout components

可对比工具

安装

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

npm install

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

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

basecoat-ui-mcp 对比