Which integrations are available for this server?

Provides access to a library of 77 pre-built Basecoat CSS UI components across forms, layout, navigation, feedback, and interactive categories, with comprehensive documentation and usage guides. Enables retrieval of Basecoat CSS components built on Tailwind CSS v4, including setup code with CDN links and theme switching functionality for dark/light mode support.

How do I use Basecoat UI MCP?

1. Click on "Deploy Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Basecoat UI MCP show me a primary button component" 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.

Basecoat UI MCP

by GustavoGomezPG

Overview Schema Source Related Servers Discussions Admin

Remote

Basecoat UI MCP

A Model Context Protocol (MCP) server that provides Claude and other AI assistants with access to a comprehensive library of Basecoat CSS UI components. This server enables AI assistants to retrieve pre-built, accessible HTML components and usage documentation for building user interfaces.

Features

77 Pre-built Components - Production-ready HTML components across 5 categories
7 MCP Tools - List, search, retrieve components and documentation
Comprehensive Docs - 25 detailed usage guides with examples
Dark/Light Mode - Built-in theme switching support
Accessibility First - All components include proper ARIA attributes

Related MCP server: Components Build MCP

Requirements

Node.js >= 18.0.0
npm (included with Node.js)

Installation

Option 1: Clone from GitHub

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

Option 2: Install via npm

npm install -g basecoat-ui-mcp

Configuration

Claude Desktop

Add the server to your Claude Desktop configuration file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Windows: %APPDATA%\Claude\claude_desktop_config.json

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

If installed globally via npm:

{
  "mcpServers": {
    "basecoat-ui": {
      "command": "basecoat-ui-mcp",
      "env": {}
    }
  }
}

After updating the config, restart Claude Desktop to load the MCP server.

Other MCP Clients

The server uses standard I/O (stdio) transport and is compatible with any MCP-compliant client. Start the server with:

node server.js

Available Tools

The MCP server provides 7 tools that AI assistants can use:

`list_components`

List all available Basecoat components organized by category.

No parameters required

Returns a complete inventory of all 77 components with names, categories, and filenames.

`get_component`

Retrieve the HTML code for a specific component.

Parameter	Type	Required	Description
`name`	string	Yes	Component name (e.g., "button-primary", "card-basic")

Example names:

button-primary, button-secondary, button-destructive
card-basic, card-with-icon
input-with-label, input-invalid
alert-success, alert-error

`get_usage`

Get comprehensive usage documentation for a component type.

Parameter	Type	Required	Description
`component`	string	Yes	Component type (e.g., "button", "card", "input")

Returns detailed markdown documentation with examples, variants, and best practices.

`get_setup`

Retrieve Basecoat CSS setup code with CDN links.

No parameters required

Returns the HTML boilerplate to initialize Basecoat CSS in a new project:

<!-- Tailwind CSS -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<!-- Basecoat CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@0.3.1/dist/basecoat.cdn.min.css">
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@0.3.1/dist/js/all.min.js" defer></script>

`get_theme_script`

Get the theme switcher script for dark/light mode.

No parameters required

Returns a complete JavaScript implementation for theme switching with localStorage persistence.

`search_components`

Search for components by name or category.

Parameter	Type	Required	Description
`query`	string	Yes	Search term (e.g., "button", "form", "navigation")

Returns matching components with match type (name or category match).

`get_category`

Get all components in a specific category.

Parameter	Type	Required	Description
`category`	string	Yes	One of: `forms`, `navigation`, `feedback`, `interactive`, `layout`

Component Library

Forms (20 components)

Component	Description
`button-primary`	Primary action button
`button-secondary`	Secondary action button
`button-destructive`	Destructive/danger button
`button-ghost`	Ghost/transparent button
`button-outline`	Outlined button
`button-link`	Link-styled button
`button-large`	Large sized button
`button-small`	Small sized button
`button-icon`	Icon-only button
`button-icon-large`	Large icon button
`button-group`	Grouped buttons
`input-basic`	Basic text input
`input-with-label`	Input with label
`input-invalid`	Input with error state
`input-group`	Grouped inputs
`checkbox-basic`	Basic checkbox
`checkbox-with-label`	Checkbox with label
`checkbox-with-description`	Checkbox with description
`radio-group`	Radio button group
`select-basic`	Select dropdown
`textarea-basic`	Text area input
`switch`	Toggle switch
`slider`	Range slider
`label`	Form label

Layout (17 components)

Component	Description
`card-basic`	Basic card container
`card-with-icon`	Card with icon
`card-standard`	Standard card layout
`table`	Data table
`avatar-small`	Small avatar
`avatar-medium`	Medium avatar
`avatar-large`	Large avatar
`avatar-fallback`	Avatar with fallback
`pagination`	Pagination controls
`skeleton-basic`	Basic loading skeleton
`skeleton-profile`	Profile loading skeleton
`skeleton-card`	Card loading skeleton
`spinner`	Loading spinner
`empty-state`	Empty state display
`kbd`	Keyboard key element
`item`	List item

Component	Description
`accordion`	Expandable accordion
`breadcrumb-basic`	Basic breadcrumb
`breadcrumb-advanced`	Advanced breadcrumb
`sidebar`	Sidebar navigation
`tabs`	Tab navigation
`command`	Command palette

Feedback (13 components)

Component	Description
`alert-standard`	Standard alert
`alert-error`	Error/destructive alert
`alert-success`	Success alert
`badge-primary`	Primary badge
`badge-secondary`	Secondary badge
`badge-destructive`	Destructive badge
`badge-outline`	Outlined badge
`dialog-standard`	Standard dialog
`dialog-modal`	Modal dialog
`dialog-alert`	Alert dialog
`toast`	Toast notification
`progress`	Progress bar

Interactive (8 components)

Component	Description
`combobox`	Searchable select
`dropdown`	Dropdown menu
`popover`	Popover element
`tooltip`	Standard tooltip
`tooltip-bottom`	Bottom tooltip
`tooltip-right`	Right tooltip
`theme-switcher`	Dark/light mode toggle

Usage Examples

Example 1: Building a Form

Ask Claude:

"Create a login form using Basecoat components"

Claude will use the MCP tools to:

Get the input-with-label component for email/password fields
Get the button-primary component for the submit button
Get the checkbox-with-label for "Remember me"
Combine them into a complete, accessible form

Example 2: Adding Notifications

Ask Claude:

"How do I add toast notifications to my app?"

Claude will use:

get_usage with "toast" to get documentation
get_component with "toast" to get the HTML
get_setup to ensure you have the required scripts

Example 3: Searching for Components

Ask Claude:

"What button components are available?"

Claude will use search_components with "button" to list all button variants.

Running the Server

Start the server

npm start

Development mode (auto-restart on changes)

npm run dev

Run tests

npm test

Verbose test output

npm run test:verbose

Project Structure

basecoat-ui-mcp/
├── server.js                 # Main MCP server implementation
├── server.test.js            # Test suite
├── package.json              # Node.js configuration
├── style-guide.md            # Comprehensive styling guide
├── claude_desktop_config.json # Example Claude config
│
├── components/               # 77 HTML component files
│   ├── forms/               # Form components
│   ├── layout/              # Layout components
│   ├── navigation/          # Navigation components
│   ├── feedback/            # Feedback components
│   └── interactive/         # Interactive components
│
├── usage/                    # 25 markdown documentation files
│   ├── forms/
│   ├── layout/
│   ├── navigation/
│   ├── feedback/
│   └── interactive/
│
└── scripts/                  # Setup and theme scripts
    ├── setup.html           # CDN setup code
    └── theme-script.html    # Theme switcher script

About Basecoat CSS

Basecoat CSS is a modern component library built on Tailwind CSS v4. It provides:

Semantic HTML components with proper accessibility
CSS custom properties for theming
Dark mode support out of the box
Minimal JavaScript for interactive components
WAI-ARIA compliant components

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Testing

The project includes comprehensive tests covering:

Component retrieval and validation
Category filtering and organization
Search functionality
Documentation availability
Error handling and edge cases
Performance benchmarks

Run the full test suite:

npm test

License

MIT License - see LICENSE for details.

Author

Saurabh K. Sharma - GitHub

Available Tools

7 tools

get_categoryC

Get all components in a specific category

ParametersJSON Schema

Name	Required	Description	Default
`category`	Yes	Category name (forms, navigation, feedback, interactive, layout)

TDQS

C2.9/5.0

Behavior2/5

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.

Conciseness5/5

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.

Completeness2/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines2/5

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_componentC

Get HTML code for a specific Basecoat component

ParametersJSON Schema

Name	Required	Description	Default
`name`	Yes	Component name (e.g., "button-primary", "card-basic", "input-with-label")

TDQS

C2.9/5.0

Behavior2/5

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.

Conciseness5/5

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.

Completeness2/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines2/5

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_setupB

Get Basecoat CSS setup code with CDN links

ParametersJSON Schema

Name	Required	Description	Default
No parameters

TDQS

B3.2/5.0

Behavior2/5

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.

Conciseness5/5

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.

Completeness3/5

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.

Parameters4/5

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.

Purpose4/5

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.

Usage Guidelines2/5

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_scriptB

Get theme switcher script for dark/light mode

ParametersJSON Schema

Name	Required	Description	Default
No parameters

TDQS

B3.1/5.0

Behavior2/5

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.

Conciseness5/5

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.

Completeness2/5

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.

Parameters4/5

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.

Purpose4/5

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.

Usage Guidelines2/5

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_usageC

Get usage documentation for a component

ParametersJSON Schema

Name	Required	Description	Default
`component`	Yes	Component name (e.g., "button", "card", "input")

TDQS

C2.9/5.0

Behavior2/5

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.

Conciseness5/5

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.

Completeness2/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines2/5

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_componentsB

List all available Basecoat components organized by category

ParametersJSON Schema

Name	Required	Description	Default
No parameters

TDQS

B3.4/5.0

Behavior2/5

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.

Conciseness5/5

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.

Completeness3/5

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.

Parameters4/5

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.

Purpose4/5

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.

Usage Guidelines3/5

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_componentsC

Search for components by name or category

ParametersJSON Schema

Name	Required	Description	Default
`query`	Yes	Search term (e.g., "button", "form", "navigation")

TDQS

C2.9/5.0

Behavior2/5

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.

Conciseness5/5

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.

Completeness2/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines2/5

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.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

7 tool updatesv1.0.0Jan 2, 2026
- First observedget_category
- First observedget_component
- First observedget_setup
- First observedget_theme_script
- First observedget_usage
- First observedlist_components
- First observedsearch_components

Deploy Server

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

TDQS

A3.5/5.0

Scored 2026-04-18 07:45 across 7 tools

Disambiguation5/5

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, making it easy for an agent to select the right tool without confusion.

Naming Consistency5/5

All tool names follow a consistent verb_noun pattern using snake_case, such as get_category, list_components, and search_components. This predictability enhances readability and usability across the entire tool set.

Tool Count5/5

With 7 tools, the count is well-scoped for a UI component library server. Each tool serves a specific function, such as retrieving components, documentation, or setup code, without being too sparse or overwhelming.

Completeness4/5

The tool surface covers core workflows like listing, searching, and retrieving components and documentation, with minor gaps such as no update or delete operations for components. However, these are likely unnecessary given the static nature of a UI library, and agents can work effectively with the provided tools.

Maintenance

ActivityInactive

ResponsivenessNo issues

Resources

Need Help?

Related Servers

Related MCP Connectors

21st.dev AOAuth
dev.21st
Find UI components and themes, retrieve code, and generate with hosted 21st AI when enabled.
Design Tools Developer Tools AI & Machine Learning
2
Vlak A
io.github.Noord-Ventures
Accessible React components, tokens, usage guidance, and install commands for product interfaces.
Design Tools Developer Tools Documentation Access
8127
marmo-ui A
io.github.mahmoudilyan
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Design Tools Developer Tools
142
Systra Tools A
tools.systra
Search and pull 500+ production-ready React + Tailwind sections and elements
Developer Tools
131

Related MCP Servers

Flux UI MCP Server
Documentation Access Developer Tools
iannuttall
A
license
A
quality
D
maintenance
Provides reference information for Flux UI components, enabling AI assistants to access component documentation and examples from the Flux UI design system.
Updated a year ago (2025-04-16 16:09 UTC)
4
13 npm
93
MIT
Components Build MCP
Developer Tools Documentation Access Code Analysis
getlokiui
A
license
B
quality
D
maintenance
Provides AI assistants with tools to grade, generate, and validate UI components against the components.build specification. Supports searching documentation, checking compliance, and generating framework-agnostic accessible components.
Updated 10 months ago (2025-12-03 07:48 UTC)
11
6 npm
Apache 2.0
mcpsystem.design MCP Server
Developer Tools Software Architecture Content Management Systems
heyadam
A
license
Not graded
quality
D
maintenance
Provides AI assistants with access to a production-ready design system including Tailwind CSS component patterns, style guides (colors, typography, spacing), and Web Components specifications for consistent UI development.
Updated 4 months ago (2026-06-04 11:52 UTC)
5 npm
MIT
Basecoat UI MCP Server
Developer Tools Content Management Systems Documentation Access
Sorbh
A
license
A
quality
D
maintenance
Provides programmatic access to 30+ Basecoat CSS (HTML port of ShadCN UI) components with usage documentation, setup scripts, and theme switching code. Enables AI assistants to help developers build accessible HTML interfaces with forms, navigation, feedback, interactive, and layout components.
Updated a year ago (2025-08-15 05:07 UTC)
7
112 npm
11
MIT

Basecoat UI MCP

Features

Requirements

Installation

Option 1: Clone from GitHub

Option 2: Install via npm

Configuration

Claude Desktop

Other MCP Clients

Available Tools

list_components

get_component

get_usage

get_setup

get_theme_script

search_components

get_category

Component Library

Forms (20 components)

Layout (17 components)

Navigation (6 components)

Feedback (13 components)

Interactive (8 components)

Usage Examples

Example 1: Building a Form

Example 2: Adding Notifications

Example 3: Searching for Components

Running the Server

Start the server

Development mode (auto-restart on changes)

Run tests

Verbose test output

Project Structure

About Basecoat CSS

Contributing

Testing

License

Author

Links

Available Tools

Tool Schema Changelog

Maintenance

Resources

Related MCP Connectors

Related MCP Servers

`list_components`

`get_component`

`get_usage`

`get_setup`

`get_theme_script`

`search_components`

`get_category`