Basecoat

Basecoat MCP Server provides programmatic access to Basecoat CSS components and their usage documentation through a Model Context Protocol (MCP). It enables AI-assisted coding by allowing you to fetch components, usage guides, setup code, and search results for Basecoat UI components directly from your MCP client.

How to use

You interact with the Basecoat MCP Server through your MCP client to fetch components, usage guides, and setup snippets. Start by ensuring the server is running, then use the client-facing commands to request specific components, lists, or usage docs. Common patterns include requesting a component variant, listing all components in a category, or retrieving the full usage documentation for a component.

Typical capabilities you can leverage include getting a specific component HTML, listing components by category, retrieving comprehensive usage docs, obtaining setup code with CDN links, and fetching a theme switcher script for dark/light mode. You can also search components by name or category to discover suitable options for your UI.

How to install

Prerequisites you need before starting are Node.js and npm. Ensure Node.js is installed and accessible from your command line.

Option A: Run via NPX (recommended) without cloning the repository.

Option B: Run from a local clone for development or customization.

Install via NPX (recommended)

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

Install by cloning locally

If you prefer to modify the server or run it locally, clone the project, install dependencies, and start the server.

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

Start the server locally after cloning

Run the MCP server using the local node command shown below. This starts the server from the cloned repository.

node server.js

MCP client configuration examples

To configure your MCP client to use the Basecoat MCP Server, provide a connection entry that points to the running server. The following examples demonstrate the configuration you would place in your MCP client settings.

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

Available tools

get_component

Fetch HTML code for a specific component variant by name (e.g., button-primary, card-basic)

list_components

List all available components grouped by category

get_usage

Retrieve comprehensive usage documentation for a component (e.g., button, card)

get_setup

Provide Basecoat CSS setup code with CDN links

get_theme_script

Return a script to switch themes between dark and light modes

search_components

Search components by name or category (e.g., button, form, navigation)

get_category

Get all components within a specific category (forms, navigation, feedback, interactive, layout)