Provides programmatic access to Basecoat CSS components, including 30+ component variants (buttons, inputs, cards, dialogs, tabs), usage documentation, setup scripts with CDN links, and theme switching functionality for building HTML interfaces.
Integrates with Tailwind CSS through Basecoat CSS framework components that are built with Tailwind CSS integration.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Basecoat UI MCP Server show me the button variants with usage examples"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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.
Related MCP server: Basecoat UI MCP
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.
Node.js - JavaScript runtime environment
@modelcontextprotocol/sdk - For creating the MCP server
Clone this repository:
git clone https://github.com/Sorbh/basecoat-ui-mcp.git
cd basecoat-mcp-serverInstall dependencies:
npm installYou can run this server either by using npx (if the package is published on npm) or by cloning the repository for local development.
This method is the easiest way to get started and doesn't require cloning the repository.
Update your claude_desktop_config.json:
{
"mcpServers": {
"basecoat-ui": {
"command": "npx",
"args": ["-y","basecoat-ui-mcp"]
}
}
}Configure the server to run:
npx basecoat-ui-mcpFor 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 installClaude 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.jsTool | Description | Parameters |
| Get HTML code for a specific component variant |
|
| List all available components organized by category | None |
| Get comprehensive usage documentation for a component |
|
| Get Basecoat CSS setup code with CDN links | None |
| Get theme switcher script for dark/light mode | None |
| Search for components by name or category |
|
| Get all components in a specific category |
|
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
Tabs: horizontal, vertical with ARIA support
Accordion: collapsible content sections
Breadcrumb: navigation trails
Sidebar: off-canvas navigation
Alert: success, error variants
Badge: primary, secondary, destructive, outline
Dialog: modal, alert dialog variations
Toast: notification system
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
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
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.mdBasecoat 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
MIT License - see LICENSE file for details.
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
Issues: GitHub Issues
Get all components in a specific category
| Name | Required | Description | Default |
|---|---|---|---|
| category | Yes | Category name (forms, navigation, feedback, interactive, layout) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It states a read operation ('Get'), but doesn't mention any behavioral traits such as permissions needed, rate limits, pagination, or what happens if the category doesn't exist. This leaves significant gaps for a tool that likely interacts with a data source.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's function without any wasted words. It's appropriately sized and front-loaded, making it easy to parse quickly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the lack of annotations and output schema, the description is incomplete. It doesn't explain what 'components' are, what format they're returned in, or any error conditions. For a tool with one parameter but no structured context, more detail would be helpful for the agent to use it effectively.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage, with the 'category' parameter documented as 'Category name (forms, navigation, feedback, interactive, layout)'. The description adds no additional parameter semantics beyond this, so it meets the baseline of 3 where the schema does the heavy lifting.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('Get all components') and the target resource ('in a specific category'), making the purpose immediately understandable. It doesn't explicitly distinguish from siblings like 'list_components' or 'search_components', which is why it doesn't reach a perfect score of 5.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives like 'list_components' or 'search_components'. It lacks any context about prerequisites, exclusions, or comparative use cases, leaving the agent to infer usage based on the tool name alone.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Get HTML code for a specific Basecoat component
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Component name (e.g., "button-primary", "card-basic", "input-with-label") |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full burden for behavioral disclosure. It states the tool retrieves HTML code, implying a read-only operation, but doesn't clarify if authentication is needed, rate limits apply, what happens if the component doesn't exist, or the format of the returned HTML. This leaves significant gaps for a tool with no annotation coverage.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's purpose without unnecessary words. It is front-loaded with the core action and resource, making it easy to parse quickly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given no annotations and no output schema, the description is incomplete. It doesn't explain what the returned HTML looks like (e.g., full component markup, partial code, error handling), behavioral aspects like permissions or rate limits, or how it differs from sibling tools. For a tool with minimal structured data, more context is needed.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema description coverage is 100%, with the single parameter 'name' well-documented in the schema. The description adds no additional parameter semantics beyond implying the tool fetches HTML for a component identified by name, which is already clear from the schema. This meets the baseline for high schema coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('Get HTML code') and resource ('specific Basecoat component'), making the purpose immediately understandable. However, it doesn't differentiate from sibling tools like 'list_components' or 'search_components' beyond specifying it's for a 'specific' component rather than multiple components.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives like 'list_components' or 'search_components'. It mentions 'specific' component, implying it's for retrieving a single known component, but doesn't explicitly state this or mention prerequisites or exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Get Basecoat CSS setup code with CDN links
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It implies a read-only operation ('Get'), but doesn't specify whether it requires authentication, has rate limits, returns structured data, or handles errors. This leaves significant gaps in understanding the tool's behavior.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's purpose without unnecessary words. It's appropriately sized for a zero-parameter tool and front-loads the key information, making it easy for an agent to parse quickly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's simplicity (0 parameters, no output schema, no annotations), the description is minimally adequate. It explains what the tool does but lacks details on behavioral traits, usage context, or output format, which could help the agent use it more effectively despite the low complexity.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has 0 parameters with 100% schema description coverage, so the schema fully documents the input requirements. The description doesn't need to add parameter information, and it appropriately doesn't mention any parameters, earning a baseline score of 4 for this context.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose as retrieving Basecoat CSS setup code with CDN links, using specific verbs ('Get') and resources ('Basecoat CSS setup code'). However, it doesn't explicitly differentiate from sibling tools like get_component or get_theme_script, which might also retrieve CSS-related resources.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. It doesn't mention prerequisites, context for usage, or compare it to sibling tools like get_component or get_theme_script, leaving the agent to infer appropriate usage scenarios.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Get theme switcher script for dark/light mode
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It states the tool 'gets' a script, implying a read operation, but doesn't specify if it's safe, requires authentication, has side effects, or details the return format (e.g., JavaScript code, configuration). This leaves significant gaps for an agent to understand its behavior.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's purpose without any unnecessary words. It is front-loaded and wastes no space, making it highly concise and well-structured for quick understanding.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the lack of annotations and output schema, the description is incomplete for a tool that likely returns code or configuration. It doesn't explain what the script does, its format, or how to use it, leaving the agent without enough context to effectively invoke or interpret results from this tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 0 parameters with 100% coverage, so the schema fully documents the lack of inputs. The description adds no parameter information, which is appropriate here, but it doesn't compensate for any gaps since there are none. A baseline of 4 is applied as it meets the requirement for zero parameters.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('Get') and the resource ('theme switcher script for dark/light mode'), making the purpose understandable. However, it doesn't explicitly differentiate this tool from its siblings like 'get_component' or 'get_setup', which might also retrieve code or configuration elements.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives, such as whether it's for initial setup, dynamic theming, or specific contexts. It lacks any mention of prerequisites, exclusions, or comparisons to sibling tools, leaving usage unclear.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Get usage documentation for a component
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Component name (e.g., "button", "card", "input") |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the action ('Get usage documentation') but doesn't describe what the return looks like (e.g., format, structure), error conditions, or any constraints like rate limits or authentication needs, leaving significant gaps for a tool with no output schema.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's purpose without any wasted words. It's appropriately sized and front-loaded, making it easy to parse quickly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the lack of annotations and output schema, the description is incomplete. It doesn't explain what 'usage documentation' entails (e.g., text, examples, links), how results are structured, or potential limitations, which is inadequate for a tool that retrieves information without structured output documentation.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The description adds minimal meaning beyond the input schema, which has 100% coverage and documents the single parameter 'component' with examples. The description implies the parameter is used to specify which component's documentation to retrieve, but doesn't provide additional context like valid component names or how to handle unknown components.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose with a specific verb ('Get') and resource ('usage documentation for a component'), making it easy to understand what it does. However, it doesn't differentiate from sibling tools like 'get_component' or 'get_category', which likely retrieve different types of information about components.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. With siblings like 'get_component' and 'list_components', it's unclear if this tool is for documentation retrieval specifically, and there's no mention of prerequisites or exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
List all available Basecoat components organized by category
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries full burden. It mentions organization by category but doesn't disclose behavioral traits such as pagination, rate limits, authentication needs, or whether it's read-only. The description is minimal and misses key operational details for a tool with no annotation support.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that front-loads the core purpose ('List all available Basecoat components') and adds useful detail ('organized by category') without any waste. It's appropriately sized for a simple tool.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's simplicity (0 parameters, no output schema, no annotations), the description is adequate but minimal. It covers the basic purpose and output organization but lacks details on behavior, usage context, or return values, leaving gaps for an agent to operate effectively without additional context.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has 0 parameters with 100% schema description coverage, so no parameter documentation is needed. The description doesn't add param info, which is appropriate, but it does imply the output structure (organized by category), adding slight value beyond the empty schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('List all available') and resource ('Basecoat components'), specifying organization by category. It distinguishes from siblings like 'search_components' (which implies filtering) and 'get_component' (singular retrieval), though not explicitly named.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Usage is implied by the description's focus on listing all components by category, suggesting it's for broad overviews rather than specific queries. However, it lacks explicit guidance on when to use this versus alternatives like 'search_components' or 'get_category', and no prerequisites or exclusions are mentioned.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Search for components by name or category
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | Search term (e.g., "button", "form", "navigation") |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full burden but only states the basic function. It doesn't disclose behavioral traits such as whether this is a read-only operation, how results are returned (e.g., pagination, sorting), or any limitations (e.g., rate limits, authentication needs). This leaves significant gaps for an agent to understand tool behavior.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence with zero waste. It's appropriately sized and front-loaded, clearly stating the tool's purpose without unnecessary details.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's moderate complexity (search operation with one parameter) and lack of annotations and output schema, the description is incomplete. It doesn't cover behavioral aspects like result format, error handling, or usage context, which are essential for an agent to use it effectively.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage, with the 'query' parameter well-documented. The description adds minimal value by mentioning 'name or category' as search criteria, which aligns with but doesn't significantly expand beyond the schema's example terms. Baseline 3 is appropriate as the schema does the heavy lifting.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('Search for') and resource ('components'), specifying search criteria ('by name or category'). It distinguishes from siblings like 'list_components' by implying filtering, but doesn't explicitly differentiate from 'get_component' which might retrieve a single component by ID.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided on when to use this tool versus alternatives like 'list_components' (which might list all without filtering) or 'get_component' (which might retrieve a specific one). The description implies usage for searching, but lacks explicit context or exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v1.0.0get_categoryget_componentget_setupget_theme_scriptget_usagelist_componentssearch_componentsScored across 7 tools
Every tool has a clearly distinct purpose with no ambiguity. For example, get_component retrieves HTML code, get_usage provides documentation, and list_components organizes components by category. The descriptions make it easy to differentiate between tools like get_category (components in a category) and search_components (search by name/category).
All tool names follow a consistent verb_noun pattern with snake_case, such as get_category, list_components, and search_components. The verbs (get, list, search) are used appropriately and predictably across the set, making the naming scheme highly readable and uniform.
With 7 tools, the count is well-scoped for a UI component library server, covering core operations like listing, searching, retrieving code, and documentation. Each tool earns its place without feeling excessive or insufficient, providing a balanced surface for interacting with Basecoat components.
The tool set offers strong coverage for retrieving and exploring Basecoat components, including setup, themes, and usage. A minor gap exists in lacking update or customization tools (e.g., modify components), but agents can work around this as the server focuses on read-only access to a static library.
Serves your design system and coding standards to coding agents, so they stop guessing.
Provides cloud browser automation capabilities using Stagehand and Browserbase, enabling LLMs to i…
Build, version, review, and export websites, web apps, and games from a conversation.
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
