This MCP server gives AI assistants programmatic access to Basecoat UI component HTML, setup code, and usage documentation so they can generate correct Basecoat markup.
Retrieve HTML for specific components or variants by name.
List all available components organized by category.
Get usage documentation for a component, with variants falling back to base docs.
Get Basecoat CSS setup code with CDN links and theme-switcher JavaScript.
Search components by name or category.
Fetch all components in a category such as forms, navigation, feedback, interactive, or layout.
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.
Give your AI assistant the full Basecoat UI component library (the shadcn/ui look in plain HTML + Tailwind, no React), so it writes correct Basecoat markup instead of guessing class names.
Kept in sync with Basecoat releases. Basecoat 1.0.2 shipped with breaking API changes; this MCP was updated to it the same day.
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
Basecoat 1.0.2: All markup follows the 1.0 API (class="btn" data-variant="outline", .field, method-based JS).
90+ Component Variants: Buttons, fields, input groups, cards, dialogs, command menus, drawers, charts and more.
Usage Documentation: Implementation guides for 30 components, including JS requirements and 0.x migration notes.
Setup Scripts: CDN links for any style pack (Vega, Nova, Maia, Lyra, Mira, Luma, Sera, Rhea) and the theme script.
Search & Discovery: Find components by name or category.
Accessibility Ready: All components include ARIA attributes and semantic HTML.
No install needed: every client runs the server with npx.
claude mcp add basecoat-ui -- npx -y basecoat-ui-mcpAdd to claude_desktop_config.json:
{
"mcpServers": {
"basecoat-ui": {
"command": "npx",
"args": ["-y", "basecoat-ui-mcp"]
}
}
}Click Install in Cursor above, or add to ~/.cursor/mcp.json:
{
"mcpServers": {
"basecoat-ui": {
"command": "npx",
"args": ["-y", "basecoat-ui-mcp"]
}
}
}Click Install in VS Code above, or add to .vscode/mcp.json:
{
"servers": {
"basecoat-ui": {
"command": "npx",
"args": ["-y", "basecoat-ui-mcp"]
}
}
}Add to ~/.codeium/windsurf/mcp_config.json:
{
"mcpServers": {
"basecoat-ui": {
"command": "npx",
"args": ["-y", "basecoat-ui-mcp"]
}
}
}Add to ~/.codex/config.toml:
[mcp_servers.basecoat-ui]
command = "npx"
args = ["-y", "basecoat-ui-mcp"]Run npx -y basecoat-ui-mcp as a stdio server.
Ask your assistant something like:
Build a sign-up page with Basecoat: a card with GitHub/Google buttons, email and password fields, and a dark mode toggle.
It will call get_setup, pull the matching components and usage docs, and return HTML that uses the real Basecoat 1.0 API.
git clone https://github.com/Sorbh/basecoat-ui-mcp.git
cd basecoat-ui-mcp
npm installPoint your client at the local copy:
{
"mcpServers": {
"basecoat-ui": {
"command": "node",
"args": ["/path/to/basecoat-ui-mcp/server.js"]
}
}
}Tool | Description | Parameters |
| Get HTML code for a specific component variant |
|
| List all available components organized by category | None |
| Get usage documentation for a component |
|
| Get Basecoat CSS setup code with CDN links |
|
| Get theme switcher script for dark/light mode | None |
| Search for components by name or category |
|
| Get all components in a specific category |
|
Button: default, secondary, outline, ghost, link, destructive, sizes, icon, with-icon, loading
Button Group: horizontal, vertical
Field / Fieldset: label, description, invalid state, grouped fields
Input / Input Group: basic, with-label, invalid, with icon, with button
Select: native select, JS select
Checkbox, Radio Group, Switch: with labels and descriptions
Slider, Textarea, Label, Form container
Tabs, Accordion, Breadcrumb, Sidebar
Alert: default, success, error
Alert Dialog, Dialog: confirmation and modal forms
Badge: primary, secondary, destructive, outline
Toast, Empty, Progress, Spinner
Command: inline and dialog palettes
Combobox: input-first searchable select
Dropdown Menu, Popover, Tooltip
Drawer (beta): bottom and side
Theme Switcher
Card, Avatar, Item, Kbd, Scroll Area
Skeleton, Table, Pagination
Chart (beta)
Composed examples: chat, login, settings, interactive pagination.
Version 2.0.0 of this MCP targets Basecoat 1.0.2, which has breaking changes from Basecoat 0.3.x:
Variant classes became data attributes: btn-outline → class="btn" data-variant="outline", btn-sm-icon → data-size="icon-sm".
The .form wrapper was removed; wrap each label and control in <div class="field">.
Document events (basecoat:toast, basecoat:sidebar, basecoat:theme) were replaced by methods: toaster.toast(), sidebar.toggle(), window.basecoat.theme.toggle().
dialog-alert was renamed to alert-dialog.
If your project still has 0.x markup, load Basecoat's compatibility stylesheet after Basecoat while you migrate (@import "basecoat-css/compat";). See style-guide.md for the full migration guide.
basecoat-mcp/
├── components/ # HTML component files
│ ├── combine/ # Composed page examples
│ ├── feedback/ # Alerts, badges, dialogs, toasts
│ ├── forms/ # Buttons, fields, inputs, selects
│ ├── interactive/ # Command, combobox, dropdowns, tooltips
│ ├── layout/ # Cards, tables, avatars, items
│ └── navigation/ # Tabs, accordion, sidebar
├── usage/ # Usage documentation (same categories)
├── scripts/ # Setup and theme scripts
├── style-guide.md # Full Basecoat 1.0 style and migration guide
├── server.js # MCP server implementation
├── package.json
└── README.mdCategories are read from disk, so adding a folder under components/ or usage/ is enough to expose it.
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
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 (combine, feedback, forms, interactive, layout, navigation) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. "Get" clearly implies a read-only retrieval and the description says it returns all components in the category, but it does not disclose error behavior, case sensitivity, exact category matching, or authorization requirements.
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 front-loaded sentence with no wasted words. It states the action and scope immediately.
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?
For a simple one-parameter read tool with a fully documented schema and no output schema, the description is mostly complete. It could mention return shape or matching behavior, but the core retrieval scope is clear.
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?
Schema coverage is 100% and the category parameter itself documents the accepted category names. The description adds no parameter semantics beyond what the schema already provides, so baseline 3 is appropriate.
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 states a specific verb and resource: "Get all components" scoped to "a specific category." This clearly distinguishes category-based retrieval from single-component retrieval, though it does not explicitly name or contrast with siblings like list_components or search_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 category scoping implies when this tool is useful, but the description gives no explicit when/when-not guidance or alternatives. It does not say whether to use this instead of list_components or search_components when browsing by category.
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", "field"), optionally prefixed with its category (e.g., "layout/pagination") |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden; it does disclose that the return value is HTML code, which is genuinely useful behavioral information. However, it says nothing about whether that is a full file or a fragment, whether dependencies/markup context are included, or how a missing component is reported.
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?
A single sentence with the action and resource front-loaded and zero filler. Nothing could be cut without losing information.
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?
For a simple one-parameter read tool with no output schema, the essentials are present. Gaps remain around name discovery (how to obtain a valid component name) and the shape of the returned HTML, which an agent would need to use the result confidently.
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?
Schema description coverage is 100% and the schema itself gives format examples including the optional category prefix, so the parameter is already fully documented. The description adds nothing beyond that, which is the baseline 3 case for high 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?
States a specific verb and payload ("Get HTML code") plus the resource ("a specific Basecoat component"), which clearly separates it from list_components and search_components. It does not explicitly name those siblings as alternatives, so it stops short of a 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 word "specific" implies this is a known-name lookup rather than a discovery tool, but the description never says when to use it instead of search_components/list_components, nor what to do if the name is unknown. Usage is inferable but not stated.
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 |
|---|---|---|---|
| style | No | Style pack to load (default: "vega"). Each style is a standalone bundle. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden; it does disclose the essential behavior — returns setup code including CDN links, i.e., a static read that requires no auth. It does not say whether the returned snippet is HTML/markup, where it must be placed, or whether it is a complete document vs. fragment.
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?
One short front-loaded sentence with zero filler and the key payload (CDN links) called out early. The brevity is appropriate; it could still afford one clause about what the code is for without bloat.
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?
For a one-parameter read-only getter with a fully documented schema and no output schema, the description is minimally sufficient to select and call it. It leaves the agent guessing about the shape of the returned code and its role in the overall setup sequence.
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?
Schema coverage is 100% with a single optional enum parameter already documenting the style pack and its default. The description adds nothing about how style selection affects the returned code (e.g., whether CDN URLs differ per style), so baseline 3 applies.
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?
States a specific verb (get) and resource (Basecoat CSS setup code) and adds the concrete payload detail of CDN links, which distinguishes it from get_component/get_usage. It does not explicitly name a sibling to avoid, so it stops short of a 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?
Usage is only implied by the name and object: an agent can infer this is the bootstrap/install step before pulling components or themes. There is no explicit 'use this when…' condition, no mention of ordering relative to get_theme_script or get_component, and no exclusions.
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.
v2.0.1get_category1 field changedInput schema / properties / category / descriptionPrevious value: -"Category name (forms, navigation, feedback, interactive, layout)"New value: +"Category name (combine, feedback, forms, interactive, layout, navigation)"get_component1 field changedInput schema / properties / name / descriptionPrevious value: -"Component name (e.g., \"button-primary\", \"card-basic\", \"input-with-label\")"New value: +"Component name (e.g., \"button-primary\", \"card-basic\", \"field\"), optionally prefixed with its category (e.g., \"layout/pagination\")"get_setup1 field changedInput schema / properties / styleAdded value: +{
+ "description": "Style pack to load (default: \"vega\"). Each style is a standalone bundle.",
+ "enum": [
+ "vega",
+ "nova",
+ "maia",
+ "lyra",
+ "mira",
+ "luma",
+ "sera",
+ "rhea"
+ ],
+ "type": "string"
+}v1.0.0get_categoryget_componentget_setupget_theme_scriptget_usagelist_componentssearch_componentsScored across 7 tools
Each tool has a fairly clear purpose, but three tools (list_components, get_category, search_components) all act as discovery entry points and could be confused by an agent. get_component vs get_usage is also a mild overlap since both take a component and return related content (markup vs docs).
All seven names follow a strict snake_case verb_noun pattern (get_*, list_*, search_*). The verbs map predictably to the return shape, making the set easy to scan.
Seven tools is well-scoped for a component-library documentation server; each tool covers a distinct facet (code, docs, setup, theming, discovery). Nothing feels padded or missing at the count level.
The surface covers discovery, component markup, usage docs, CSS setup, and theme script, which is solid for a UI library. Minor gaps: no way to retrieve full example pages or framework-specific snippets, and category listing partially duplicates list_components.
React + Tailwind UI components and recipes your AI coding tool can search and install.
React, Tailwind CSS and shadcn/ui components, sections and landing pages for coding agents.
Free premium UI components in plain HTML, CSS and vanilla JS, for AI coding assistants.
Serves your design system and coding standards to coding agents, so they stop guessing.
