Basecoat UI — Claude Code MCP server: setup
This MCP server gives AI coding tools Basecoat UI markup and usage docs. Use it to build plain HTML and Tailwind interfaces without React.
claude mcp add basecoat-ui-mcp -- npx -y basecoat-ui-mcpWhat Basecoat UI 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.
What it helps with
- 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 for the agent
- Find an outlined button variant and return the matching HTML for Basecoat 1.0.2.
- Show the Basecoat setup for the
novastyle pack and provide the theme-switching script.
How to install Basecoat UI
Platform CLI
claude mcp add basecoat-ui-mcp -- npx -y basecoat-ui-mcpPlatform CLI
codex mcp add basecoat-ui -- npx -y basecoat-ui-mcpConfig file
{
"mcpServers": {
"basecoat-ui": {
"command": "npx",
"args": [
"-y",
"basecoat-ui-mcp"
]
}
}
}Config file
{
"servers": {
"basecoat-ui": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"basecoat-ui-mcp"
]
}
}
}Platform CLI
gemini mcp add basecoat-ui npx -y basecoat-ui-mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Basecoat UI
How do I install Basecoat UI in Claude Code?
Run claude mcp add basecoat-ui -- npx -y basecoat-ui-mcp. Claude Code can then use the MCP server.
What does Basecoat UI do?
It gives an AI coding client Basecoat UI components, HTML markup, and usage documentation. It also supports component search and CSS setup retrieval.
Does Basecoat UI generate React components?
No. Its component markup targets plain HTML with Tailwind, so it does not provide React components.
