Basecoat UI

Provides access to Basecoat CSS UI components via MCP for AI assistants to fetch components and usage docs.

javascript

0

GitHub Stars

javascript

Language

7 months ago

First Indexed

3 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "gustavogomezpg-basecoat-mcp": {
      "command": "node",
      "args": [
        "/absolute/path/to/basecoat-ui-mcp/server.js"
      ],
      "env": {
        "ENV": "example"
      }
    }
  }
}

You run a Basecoat UI MCP Server to give AI assistants quick access to 77 production-ready UI components and 25 usage guides. This server lets tools fetch components, usage docs, setup snippets, and theme resources, making UI building with AI more efficient and accessible.

How to use

You interact with the MCP server through a compliant MCP client. Use the available tools to list, search, and retrieve components and their documentation. Typical workflows include listing all components to explore options, retrieving a specific component’s HTML, and pulling its detailed usage notes. You can also fetch a setup snippet and a theme switcher script to integrate Basecoat CSS into your project and enable dark/light mode.

How to install

# Prerequisites
- Node.js >= 18.0.0
- npm (comes with Node.js)

# Option 1: Clone the repository and install
git clone https://github.com/Sorbh/basecoat-ui-mcp.git
cd basecoat-ui-mcp
npm install

# Option 2: Install via npm (global)
npm install -g basecoat-ui-mcp

Configuration

Configure the MCP server in your client to connect via stdio (local process). The server can be started directly or referenced in your client’s config.

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

Starting the server locally

You can start the server directly if you installed it locally. Use the following command to run the MCP server from its source location.

node server.js

Additional run modes and notes

If you installed the MCP server globally via npm, you can reference it in client configurations as a ready-to-run command without a path. For example, set the command to basecoat-ui-mcp and leave the args empty in the client configuration.

Security and maintenance notes

Keep Node.js up to date to ensure compatibility with the Basecoat UI MCP Server. Review any environment variables your deployment uses, and avoid exposing sensitive information in client configurations or logs.

Examples and quick-start tips

After starting the MCP server, you can use tools like list_components to see what is available, get_component to fetch a specific component, and get_usage to read detailed usage guidelines. Combine get_setup for a ready-to-paste HTML boilerplate and get_theme_script to enable dark/light mode support in your projects.

Project structure snapshot

The server exposes a library of 77 components categorized into forms, layout, navigation, feedback, and interactive groups, complemented by 25 documentation files and theme/setup scripts for quick integration.

Available tools

list_components

List all available Basecoat components organized by category.

get_component

Retrieve the HTML code for a specific component by name.

get_usage

Return comprehensive usage documentation for a component type.

get_setup

Retrieve Basecoat CSS setup code with CDN links.

get_theme_script

Return the theme switcher script for dark/light mode.

search_components

Search for components by name or category.

get_category

Get all components in a specific category.