basecoat-ui

Basecoat MCP Server provides programmatic access to Basecoat CSS components and their usage documentation, enabling AI-assisted coding and dynamic retrieval of component HTML, usage guides, setup snippets, and search capabilities. You can query the server to get specific component variants (e.g., button-primary), list components by category, fetch full usage documentation, or obtain setup code and theme toggle scripts. The server exposes a concise API of tools such as get_component, list_components, get_usage, get_setup, get_theme_script, search_components, and get_category, making it easy to integrate Basecoat components into your development workflow and AI helper agents.

To run the MCP server via NPX (recommended), use the provided npx command, or clone the repository and run locally for development. Once running, you can request HTML snippets for particular components, browse available components by category, or retrieve usage docs to embed into editors or chat-assisted coding sessions. The server supports accessibility attributes and ARIA-ready patterns, ensuring that the generated code adheres to accessible standards. This setup is especially useful for AI-assisted UI generation, design system exploration, and rapid prototyping with Basecoat CSS.

Prerequisites:

• Node.js >= 18.x installed
• npm (comes with Node.js) installed
• Basic familiarity with running commands in your terminal

Install and run from the repository:

1. Clone the MCP repository:

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

2. Install dependencies:

npm install

3. Start the MCP server locally (if you want to run via node locally):

# If you want to run directly with Node.js once cloned
node server.js

If you prefer to use NPX (recommended for quick start and if published on npm):

1. Ensure the package is published as basecoat-ui-mcp on npm.
2. Run:

npx -y basecoat-ui-mcp

Configuration for Claude Desktop or other MCP clients:

• NPX approach uses: {"mcpServers": {"basecoat-ui": {"command": "npx", "args": ["-y","basecoat-ui-mcp"]}}}
• Local development (clone mode) uses the Node server path and working directory, e.g.,

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

Verifying installation:

• If using npm/pnpm/yarn, ensure dependencies install without errors.
• Access the server endpoints via your MCP client and test a couple of commands like get_component or list_components to confirm connectivity.

Notes and tips:

• The MCP server provides a catalog of 30+ Basecoat components, including variants for forms, navigation, feedback, interactive, and layout categories. Use list_components to view available options and get_category to filter by category.
• For best results with npX, keep the package name accurate as published (basecoat-ui-mcp). If you modify locally, point your client to the local server.js or start script path.
• If you encounter path or cwd issues in local development, ensure the repository clone path matches the configured working directory in your MCP client settings.
• When using get_setup or get_theme_script, you’ll receive ready-to-use CDN links and a theme-switcher snippet suitable for quick integration.
• Maintain Node.js v18+ to satisfy the server’s runtime expectations and compatibility with the SDK.