# Basecoat UI

This MCP server gives AI coding tools Basecoat UI markup and usage docs. Use it to build plain HTML and Tailwind interfaces without React.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 14
- Author: Sorbh
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/Sorbh/basecoat-ui-mcp
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/mcp/basecoat-ui

## What it does

Basecoat UI exposes the Basecoat component library and its usage guides to an AI coding client. The server can return HTML for a named component variant, list components by category, search the library, and provide setup code. Its catalogue covers forms, buttons, fields, cards, dialogs, command menus, and other interface elements.

Its tools include `get_component`, `list_components`, `get_usage`, `get_setup`, `get_theme_script`, `search_components`, and `get_category`. `get_setup` returns a CDN setup for a style pack, while `get_theme_script` supplies the light/dark theme switcher. The markup follows Basecoat 1.0.2 and uses plain HTML with Tailwind. This is the wrong fit when the project requires React components.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add basecoat-ui-mcp -- npx -y basecoat-ui-mcp
```

### Codex

**Platform CLI**
```bash
codex mcp add basecoat-ui -- npx -y basecoat-ui-mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "basecoat-ui": {
            "command": "npx",
            "args": [
                "-y",
                "basecoat-ui-mcp"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "basecoat-ui": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "basecoat-ui-mcp"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add basecoat-ui npx -y basecoat-ui-mcp
```

## When to use it
- find a Basecoat component by name or category
- retrieve HTML for a button, field, or dialog variant
- add Basecoat CSS through a CDN setup
- add a light and dark theme switcher
- check a component's API before writing the interface

## Example prompts
- Find an outlined button variant and return the matching HTML for Basecoat 1.0.2.
- Show the Basecoat setup for the `nova` style pack and provide the theme-switching script.

## Similar
- [Basecoat UI MCP](https://affpapa.org/en/nevibecode/mcp/basecoat-ui-mcp.md) — MCP server · ★ 38
- [web-artifacts-builder](https://affpapa.org/en/nevibecode/skills/nexu-io-web-artifacts-builder.md) — skill · 2800 installs
- [quick-mockups](https://affpapa.org/en/nevibecode/skills/quick-mockups.md) — skill · 1700 installs
- [design-loop](https://affpapa.org/en/nevibecode/skills/design-loop.md) — skill · 1000 installs
- [screenshot-to-code](https://affpapa.org/en/nevibecode/skills/screenshot-to-code.md) — skill · 1300 installs
- [nextjs-shadcn](https://affpapa.org/en/nevibecode/skills/nextjs-shadcn.md) — skill · 835 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md