basecoat-ui-mcp by Sorbh - MCP Server

Basecoat MCP Server

Story

While building my hobby project — turning old devices into a Digital Photo Frame — I struggled with UI components. I wanted to use Basecoat CSS, the HTML port of ShadCN UI, but there was no MCP server to easily pull components and docs into AI-assisted coding.

So I built one.
This is my first MCP server, and it’s here to make working with Basecoat (and ShadCN-style components) effortless for everyone. Feedback and contributions are welcome!

A Model Context Protocol (MCP) server that provides programmatic access to Basecoat CSS components and their usage documentation. This server allows AI assistants to help developers build HTML interfaces using the Basecoat CSS framework.

Features

30+ Component Variants: Access to buttons, inputs, cards, dialogs, tabs, and more.
Usage Documentation: Complete implementation guides with examples for each component.
Setup Scripts: Get CDN links and theme switching code instantly.
Search & Discovery: Find components by name or category.
Accessibility Ready: All components include ARIA attributes and semantic HTML.

Tech Stack

Node.js - JavaScript runtime environment
@modelcontextprotocol/sdk - For creating the MCP server

Installation

Clone this repository:

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

Install dependencies:
```
npm install
```

MCP Configuration

You can run this server either by using npx (if the package is published on npm) or by cloning the repository for local development.

Using NPX (Recommended)

This method is the easiest way to get started and doesn't require cloning the repository.

Claude Desktop

Update your claude_desktop_config.json:

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

Other MCP Clients

Configure the server to run:

npx basecoat-ui-mcp

Using Git Clone (Local Development)

For local development or if you want to modify the server:

Clone and setup:

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

Claude Desktop Configuration:

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

Replace /path/to/basecoat-ui-mcp with the actual path where you cloned the repository.

Other MCP Clients:

cd /path/to/basecoat-ui-mcp
node server.js

Available Tools

Tool	Description	Parameters
`get_component`	Get HTML code for a specific component variant	`name`: Component name (e.g., "button-primary", "card-basic")
`list_components`	List all available components organized by category	None
`get_usage`	Get comprehensive usage documentation for a component	`component`: Base component name (e.g., "button", "card")
`get_setup`	Get Basecoat CSS setup code with CDN links	None
`get_theme_script`	Get theme switcher script for dark/light mode	None
`search_components`	Search for components by name or category	`query`: Search term (e.g., "button", "form", "navigation")
`get_category`	Get all components in a specific category	`category`: Category name (forms, navigation, feedback, interactive, layout)

Component Categories

Forms

Buttons: primary, secondary, outline, destructive, ghost, link, icon variants
Inputs: basic, with-label, invalid states
Select: native, custom dropdowns
Checkbox: basic, with-label, with-description
Radio: single, group variations
Switch: basic, with-description
Textarea, Label, Form container

Navigation

Tabs: horizontal, vertical with ARIA support
Accordion: collapsible content sections
Breadcrumb: navigation trails
Sidebar: off-canvas navigation

Feedback

Alert: success, error variants
Badge: primary, secondary, destructive, outline
Dialog: modal, alert dialog variations
Toast: notification system

Interactive

Dropdown: context menus with various item types
Popover: rich content tooltips
Tooltip: simple hover tooltips with positioning
Combobox: searchable select dropdowns
Theme Switcher: dark/light mode toggle

Layout

Card: basic, with-icon variants
Avatar: small, medium, large, fallback
Skeleton: loading states for profile, card
Table: responsive data display
Pagination: navigation for large datasets

Directory Structure

basecoat-mcp/
├── components/           # HTML component files
│   ├── forms/           # Form elements
│   ├── navigation/      # Navigation components  
│   ├── feedback/        # Alerts, badges, dialogs
│   ├── interactive/     # Dropdowns, tooltips
│   └── layout/          # Cards, tables, avatars
├── usage/               # Usage documentation
│   ├── forms/
│   ├── navigation/
│   ├── feedback/
│   ├── interactive/
│   └── layout/
├── scripts/             # Setup and utility scripts
├── server.js            # MCP server implementation
├── package.json
└── README.md

About Basecoat CSS

Basecoat CSS is a comprehensive CSS framework that provides:

Accessible, semantic components
Dark/light theme support
Tailwind CSS integration
JavaScript-enhanced interactions
Mobile-responsive design

Learn more at basecoatui.com

License

MIT License - see LICENSE file for details.

Contributing

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Make your changes following our coding standards
Test your changes thoroughly
Commit with clear messages: git commit -m 'Add amazing feature'
Push to your branch: git push origin feature/amazing-feature
Open a Pull Request

Support

Issues: GitHub Issues

Built with ❤️ by Claude Code - Monitored & Prompted by Saurabh K. Sharma