Basecoat UI MCP — Claude Code MCP server: Basecoat UI templates
An offline MCP server that hands your agent Basecoat UI templates, layouts and static checks. Useful when you build UI on Astro, Next.js or Tailwind CSS 4.
claude mcp add --env BASECOAT_PROJECT_ROOT=<BASECOAT_PROJECT_ROOT> --transport stdio basecoat-ui-mcp -- npx -y @intellmedia/basecoat-ui-mcpWhat Basecoat UI MCP does
The server gives the agent a ready registry of Basecoat UI templates, layouts and rhythm tokens — the shadcn/ui look without React or a bundler. It speaks local stdio and makes no network calls. Replies are size-bounded, and bigger result sets come back through cursors.
There are 22 tools across six layers: project setup, layout planning, charts, component retrieval, macro design graphs and state contracts. basecoat_setup_config builds a framework boilerplate with Tailwind CSS 4 imports and OKLCH variables; basecoat_component_syntax returns component markup with state variants and inline SVG icons. Node.js 22.14.0 or newer is required.
The project root comes from --project-root, which wins over BASECOAT_PROJECT_ROOT, and that in turn wins over the launch directory. DESIGN.md is read from that directory, and sessions land in .basecoat/designer/ under it. Parent directories are never scanned, so pass an absolute path. .basecoat/rhythm.json is an optional override: it has to sit in a real .basecoat folder inside the project root, be a regular file rather than a symlink, and stay within 65,536 UTF-8 bytes. Host application sources are never written to.
What it helps with
- scaffold an Astro or Next.js project with Tailwind CSS 4
- get Basecoat UI component markup with state variants
- pick a page layout with a container grid and slots
- find a theme-aware chart and drop it into markup
- check markup against Tailwind v4 rules and semantic tokens
Example prompts for the agent
- Scaffold an Astro project with Tailwind CSS 4 and no-flash dark mode
- Give me component markup with state variants for a login form
- Pick a dashboard layout with a sidebar and slots for widgets
How to install Basecoat UI MCP
Platform CLI
claude mcp add --env BASECOAT_PROJECT_ROOT=<BASECOAT_PROJECT_ROOT> --transport stdio basecoat-ui-mcp -- npx -y @intellmedia/basecoat-ui-mcpReplace <…> with your own values
Platform CLI
codex mcp add basecoat-ui-mcp --env BASECOAT_PROJECT_ROOT=<BASECOAT_PROJECT_ROOT> -- npx -y @intellmedia/basecoat-ui-mcpReplace <…> with your own values
Config file
{
"mcpServers": {
"basecoat-ui-mcp": {
"command": "npx",
"args": [
"-y",
"@intellmedia/basecoat-ui-mcp"
],
"env": {
"BASECOAT_PROJECT_ROOT": "<BASECOAT_PROJECT_ROOT>"
}
}
}
}Replace <…> with your own values
Config file
{
"servers": {
"basecoat-ui-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@intellmedia/basecoat-ui-mcp"
],
"env": {
"BASECOAT_PROJECT_ROOT": "<BASECOAT_PROJECT_ROOT>"
}
}
}
}Replace <…> with your own values
Platform CLI
gemini mcp add -e BASECOAT_PROJECT_ROOT=<BASECOAT_PROJECT_ROOT> basecoat-ui-mcp npx -y @intellmedia/basecoat-ui-mcpReplace <…> with your own values
Step 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 MCP
How do I install Basecoat UI MCP in Claude Code?
Run claude mcp add basecoat-ui-mcp -- npx -y @intellmedia/basecoat-ui-mcp. To point it at your own project root, use claude mcp add --env BASECOAT_PROJECT_ROOT=<BASECOAT_PROJECT_ROOT> --transport stdio basecoat-ui-mcp -- npx -y @intellmedia/basecoat-ui-mcp.
What does Basecoat UI MCP do?
It serves an offline registry of Basecoat UI templates, layouts and tokens to your agent and runs static source checks. No network access is involved.
What do I need to run the server?
Node.js 22.14.0 or newer. Set the project root with --project-root or the BASECOAT_PROJECT_ROOT variable.
