Basecoat UI MCP server

Basecoat MCP Server

Give your AI assistant the full Basecoat UI component library (the shadcn/ui look in plain HTML + Tailwind, no React), so it writes correct Basecoat markup instead of guessing class names.

Kept in sync with Basecoat releases. Basecoat 1.0.2 shipped with breaking API changes; this MCP was updated to it the same day.

Story

While building my hobby project — turning old devices into a Digital Photo Frame — I struggled with UI components. I wanted to use Basecoat CSS, the HTML port of ShadCN UI, but there was no MCP server to easily pull components and docs into AI-assisted coding.

So I built one. This is my first MCP server, and it’s here to make working with Basecoat (and ShadCN-style components) effortless for everyone. Feedback and contributions are welcome!

A Model Context Protocol (MCP) server that provides programmatic access to Basecoat CSS components and their usage documentation. This server allows AI assistants to help developers build HTML interfaces using the Basecoat CSS framework.

Features

• Basecoat 1.0.2: All markup follows the 1.0 API (class="btn" data-variant="outline", .field, method-based JS).
• 90+ Component Variants: Buttons, fields, input groups, cards, dialogs, command menus, drawers, charts and more.
• Usage Documentation: Implementation guides for 30 components, including JS requirements and 0.x migration notes.
• Setup Scripts: CDN links for any style pack (Vega, Nova, Maia, Lyra, Mira, Luma, Sera, Rhea) and the theme script.
• Search & Discovery: Find components by name or category.
• Accessibility Ready: All components include ARIA attributes and semantic HTML.

Quick Start

No install needed: every client runs the server with npx.

Claude Code

claude mcp add basecoat-ui -- npx -y basecoat-ui-mcp

Claude Desktop

Add to claudedesktopconfig.json:

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

Cursor

Click Install in Cursor above, or add to ~/.cursor/mcp.json:

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

VS Code (GitHub Copilot)

Click Install in VS Code above, or add to .vscode/mcp.json:

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

Shortened. The full README is on GitHub.