heroui-v2-mcp
Click on "Install 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., "@heroui-v2-mcpShow me the documentation for the 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.
heroui-v2-mcp
MCP (Model Context Protocol) server for HeroUI v2 (https://v2.heroui.com) component documentation, source code, style definitions and theme tokens.
Unlike the official @heroui/react-mcp — which targets HeroUI v3 and needs a
deployed Cloudflare Worker + R2 bucket + PostHog project behind it — this is a standalone local server:
it fetches everything on demand directly from heroui-inc/heroui@main (the branch that tracks v2.x) and
raw.githubusercontent.com, caching results in memory for the life of the process. No cloud account,
API deployment or extraction pipeline required.
Why a separate project
HeroUI v3 (branch v3, site heroui.com) and v2 (branch main, site v2.heroui.com) are different,
incompatible component models — different package layout, no llms.txt on the v2 site, different docs
folder structure (/docs/components/* vs /docs/react/*), different styling approach (tailwind-variants
files under packages/core/theme/src/components vs whatever v3 uses). The official MCP explicitly refuses
to serve v2 docs, so this project mirrors its tool surface but points at the v2 data sources.
Related MCP server: UI Toolkit MCP Server
Tools
Tool | Purpose |
| List all v2 component slugs (matches |
| Description, install command, imports, usage guidance, props/API table |
| React/TypeScript source from |
| tailwind-variants style definition from |
| General guides: installation, frameworks, theming, CLI, HeroUIProvider, etc. |
| Default semantic colors + layout tokens |
Install & run
The package is published on npm as heroui-v2-mcp, so no
clone or build step is required to use it.
Use from Claude Code / Claude Desktop / Cursor
Add to your MCP config — npx downloads and runs it on demand:
{
"mcpServers": {
"heroui-v2": {
"command": "npx",
"args": ["-y", "heroui-v2-mcp"]
}
}
}Or install it globally and point at the binary directly:
npm install -g heroui-v2-mcp{
"mcpServers": {
"heroui-v2": {
"command": "heroui-v2-mcp"
}
}
}Local development (from source)
npm install
npm run dev # tsx --watch, runs src/server.ts directly (no build step)
npm run inspect # launches @modelcontextprotocol/inspector against src/server.ts
npm run build # emits dist/server.jsGitHub rate limits
Directory listings go through the GitHub REST API, which is capped at 60 requests/hour
unauthenticated. File contents (raw.githubusercontent.com) are not subject to that limit. If you hit
403s while browsing many components, set a token:
export GITHUB_TOKEN=ghp_xxx # no scopes needed, just raises the rate limit to 5000/hrHow data is resolved
Component list = files under
apps/docs/content/docs/components/*.mdxon themainbranch.Most doc slugs map 1:1 to a
packages/components/<slug>package. A handful of doc pages document sub-components bundled into another package (e.g.textareaships inside@heroui/input,checkbox-groupinside@heroui/checkbox) — seeCOMPONENT_PACKAGE_ALIASESinsrc/constants.ts.Props/API tables are parsed out of the
<APITable data={[...]} />JSX literal embedded in each.mdxdoc page (that array is evaluated as a JS literal — it's static data from the official repo, not arbitrary/untrusted input).Theme tokens come from
packages/core/theme/src/colors/{semantic,common}.tsanddefault-layout.ts.
Caching
Every GitHub response (file content or directory listing) is cached in-memory for 30 minutes
(CACHE_TTL_MS in src/constants.ts). Restart the process to force a refresh sooner.
Available Tools
6 toolsget_component_docsA
Get the full HeroUI v2 documentation for a single component: description, install command, import statements, usage guidance and the props/API reference table. Use list_components first to get valid slugs (e.g. "button", "date-range-picker").
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Component slug as returned by list_components, e.g. "button" or "date-picker". |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description must disclose behavioral traits. It does explain the output content (sections of documentation) which gives basic behavior, but does not mention performance characteristics (e.g., network call, latency), error conditions (e.g., invalid slug response), or any side effects. The description is transparent about what the tool returns but lacks deeper behavioral context.
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 two sentences long: the first clearly states the purpose and output, the second provides critical usage guidance. Every sentence earns its place with zero redundancy or filler. Information is front-loaded effectively.
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 has a single parameter, no output schema, and no annotations, the description covers the core purpose and prerequisite usage well. It could arguably benefit from mentioning that the output is text/markdown or that valid slugs are case-sensitive, but the description is sufficiently complete for an agent to invoke the tool correctly with the listed inputs.
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 has 100% coverage for its sole parameter 'component', including an explicit description and example values. The description echoes this by mentioning 'valid slugs (e.g. "button", "date-range-picker")' but does not add meaning beyond what the schema already provides. 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 clearly states the tool gets 'full HeroUI v2 documentation for a single component' and lists the specific content sections: description, install command, import statements, usage guidance, and props/API reference. This makes the verb and resource explicit and distinct from siblings like get_component_source_code or get_docs.
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 explicit guidance on when to use the tool and a prerequisite: 'Use list_components first to get valid slugs'. This tells the agent the required preparatory step and points to the sibling tool for obtaining valid input, effectively distinguishing usage from other documentation tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_component_source_codeA
Get the React/TypeScript source implementation of a HeroUI v2 component from packages/components//src on GitHub. Useful for understanding internals, hooks and ARIA wiring. Do NOT copy this directly — import the component from @heroui/react or its individual package instead. Use list_components first to get a valid slug.
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Component slug as returned by list_components, e.g. "button". |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It discloses the location on GitHub and the licensing/usage restriction (do not copy, import instead). However, it does not mention what the return format is (e.g., raw file content, lines of code) or if there are any rate limits or authentication requirements, leaving a minor transparency gap.
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?
Two sentences, front-loaded with purpose, followed by usage guidelines, and no wasted words. Every sentence is essential.
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 tool with 1 parameter and no output schema, the description covers purpose, usage guidance, and the source location. It provides a complete picture for an agent to use the tool effectively, though a brief mention of the return value (raw source code) would round it out.
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 there is only one parameter, so the baseline is 3. The description adds value by specifying that the component slug should be exactly as returned by list_components and gives 'button' as an example, which clarifies the expected format beyond the plain schema 'string' type.
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 the specific verb 'Get', the resource 'React/TypeScript source implementation of a HeroUI v2 component', and the location 'from packages/components/<pkg>/src on GitHub'. It clearly distinguishes from siblings like get_component_docs and list_components by specifying exactly what source code is retrieved.
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 explicitly states when to use the tool ('useful for understanding internals, hooks and ARIA wiring'), includes a critical 'not to do' (do NOT copy directly) with the correct alternative (import from package), and provides a prerequisite step ('Use list_components first to get a valid slug'). This is excellent usage guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_component_source_stylesA
Get the default tailwind-variants style definition for a HeroUI v2 component, from packages/core/theme/src/components on GitHub. HeroUI v2 has no separate CSS files — every component's slots/variants/compoundVariants are defined as a tailwind-variants ("tv") object in TypeScript. Use this to see which classes back each variant/color/size, useful when writing custom classNames or a custom theme. Use list_components first to get a valid slug.
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Component slug as returned by list_components, e.g. "button". |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description bears the full burden of behavioral disclosure. It states the tool retrieves a style definition from GitHub, implying a read-only operation, but does not mention what happens if the component slug is invalid, any rate limits, or the response structure. This is adequate but not comprehensive.
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 concise with four sentences, each serving a clear purpose: stating the action, providing background context, explaining the use case, and giving a prerequisite. No wasted words or redundant 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?
Given the tool's simplicity (one parameter, no output schema, no annotations), the description covers purpose, usage context, and a prerequisite. It does not describe the output format or error handling, but these are partially mitigated by the absence of an output schema. The description is fairly complete for its 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?
Schema description coverage is 100% and the parameter 'component' is already well-described in the schema. The description adds value by explicitly stating the prerequisite ('Use list_components first'), which goes beyond the schema's information. This lifts the score above the baseline of 3.
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 verb ('get'), the resource ('default tailwind-variants style definition'), and the specific context ('HeroUI v2 component'). It also distinguishes from siblings like 'get_component_source_code' by focusing on style definitions rather than source code, and mentions the location on GitHub.
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 a clear use case ('useful when writing custom classNames or a custom theme') and a prerequisite ('Use list_components first to get a valid slug'). However, it does not explicitly exclude alternatives or state when not to use this tool, so a small gap remains.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_docsA
Get general HeroUI v2 documentation (guides, customization, frameworks, API references) — NOT component docs. Fetches MDX content from heroui-inc/heroui@main (apps/docs/content/docs). For component documentation use get_component_docs instead. Example paths: guide/introduction, guide/installation, guide/cli, guide/tailwind-v4, guide/nextui-to-heroui.
| Name | Required | Description | Default |
|---|---|---|---|
| path | Yes | Doc path under apps/docs/content/docs, e.g. "guide/installation" or "customization/theme". Examples: guide/introduction, guide/installation, guide/cli, guide/tailwind-v4, guide/nextui-to-heroui, customization/theme, customization/colors, customization/dark-mode, customization/create-theme, frameworks/nextjs, frameworks/vite, api-references/heroui-provider, api-references/cli-api |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden. It discloses that the tool fetches MDX content from a specific repository (heroui-inc/heroui@main) and path (apps/docs/content/docs), which is valuable behavioral context. It does not mention error handling or return format, but for a simple read operation, this is sufficient.
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 concise, with three purposeful sentences plus a line of example paths. It is front-loaded with the key purpose and negative scope, and every sentence adds value.
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 is a simple single-parameter getter with no output schema, the description is largely complete: it explains what it retrieves, what it does not, and provides source and examples. It could be more explicit about the output format, but the current level is adequate for agent use.
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 schema already describes the 'path' parameter with examples. The description adds value by specifying the underlying repository and path structure ('apps/docs/content/docs'), providing context beyond the 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 verb 'Get' and the resource 'general HeroUI v2 documentation (guides, customization, frameworks, API references)' and explicitly excludes component docs, distinguishing it from the sibling tool get_component_docs.
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 explicitly says 'For component documentation use get_component_docs instead,' providing a direct alternative and clear usage context. It also gives example paths to guide the agent on valid inputs.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_theme_variablesA
Get HeroUI v2's default theme tokens: semantic colors (light/dark) and layout tokens (radius, border widths, opacity, font sizes, box shadows). Source: heroui-inc/heroui@main, packages/core/theme. Use get_docs({ path: "customization/theme" }) or get_docs({ path: "customization/colors" }) for the narrative guide on overriding these via tailwind.config / createTheme.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries full burden. It describes what the tool retrieves (theme tokens) and their categories, but does not disclose behavioral aspects such as response format (e.g., flat object vs nested), any potential side effects, authentication requirements, or performance implications. It is unambiguous that it is a read-only query, but more detail on the output structure would improve transparency.
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 two sentences: the first states the core purpose and lists included tokens; the second directs users to alternative tools for customization guides. Every sentence adds value, it is front-loaded with the main action, and there is no redundancy or filler.
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 output schema, the description covers what is returned by listing the major categories of tokens (semantic colors, layout tokens with specific sub-items). It also provides the source location. It does not specify the exact JSON structure or include an example, which would make it more complete, but it is sufficient for a simple retrieval tool with no parameters.
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 zero parameters and schema description coverage is 100%. With 0 parameters, baseline is 4. The description adds value by explaining exactly what the tool returns (semantic colors and layout tokens with examples), which clarifies the purpose 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 states the verb 'Get' and specifies the resource exactly: 'HeroUI v2's default theme tokens'. It further enumerates the types: semantic colors (light/dark) and layout tokens (radius, border widths, opacity, font sizes, box shadows). This clearly distinguishes it from sibling tools like get_docs or list_components which serve different purposes.
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 guidance by pointing to alternative tools: 'Use get_docs({ path: ... }) for the narrative guide on overriding these via tailwind.config / createTheme'. This clarifies when to use this tool (to get raw tokens) versus when to use another tool (for narrative override guidance). It could be more explicit about when not to use, but the context is clear.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_componentsA
List all HeroUI v2 components (from v2.heroui.com / heroui-inc/heroui@main). This MCP only covers HeroUI v2 — it does NOT know about HeroUI v3 (https://heroui.com, "v3" branch). Always call this first to get the exact slug to pass to get_component_docs / get_component_source_code / get_component_source_styles. Slugs are the same as the path segment in https://v2.heroui.com/docs/components/.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It discloses that the tool returns slugs matching path segments on the docs site. However, it does not detail the output format (e.g., JSON structure) or any ordering/consistency guarantees. The behavior is straightforward but could be slightly more explicit.
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 three concise sentences, each serving a clear purpose: stating function, version scope, and usage order with slug explanation. No waste.
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 output schema, the description could explicitly state the return format (e.g., array of objects with name and slug). It implies the output provides slugs but does not fully describe it. For a simple list tool with clear usage, it is mostly complete.
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?
There are zero parameters and schema coverage is 100%, so the baseline is 4. The description does not need to add parameter details, and it doesn't. No additional value is required here.
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 explicitly states it lists all HeroUI v2 components, distinguishes from v3, and clarifies it provides slugs for sibling tools. This is a specific verb+resource with clear differentiation from get_docs and other tools.
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 explicitly instructs 'Always call this first' to obtain slugs for get_component_docs and other tools. It also clarifies which version the MCP covers, providing clear when-to-use and when-not-to-use guidance.
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. Dates show when Glama detected each change.
6 tool updates
v0.1.1- First observed
get_component_docs - First observed
get_component_source_code - First observed
get_component_source_styles - First observed
get_docs - First observed
get_theme_variables - First observed
list_components
TDQS
Each tool targets a distinct purpose: component docs, source code, styles, general docs, theme tokens, and component listing. No overlap exists, and descriptions clarify boundaries (e.g., get_docs explicitly excludes component docs).
All tool names follow a consistent verb_noun pattern (get_component_docs, get_component_source_code, get_component_source_styles, get_docs, get_theme_variables, list_components). The verb 'get' or 'list' is consistently used, and nouns clearly describe the resource.
With 6 tools, the set is well-scoped for a documentation and source code MCP server. Each tool addresses a specific need (docs, source, styles, general docs, theme, component listing) without unnecessary bloat or missing essentials.
The tool surface covers core documentation retrieval (component docs, source code, styles, general docs, theme variables) and component listing. A minor gap is the lack of a tool to search or filter components, but the core lifecycle for accessing HeroUI v2 information is fairly complete.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
MCP server for innovationlab documentation, generated by doc2mcp.
MCP server for accessing curated awesome list documentation
MCP server for opencode documentation, generated by doc2mcp.
Create, deploy, and operate MCP servers directly from your GitHub repositories.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceA high-quality, open-source Model Context Protocol (MCP) server that bridges AI systems and HeroUI, enabling intelligent assistance for developers working with HeroUI components.1417MIT
- AlicenseNot gradedqualityFmaintenanceComprehensive MCP server for end-to-end UI development, offering tools to generate components, manage design tokens, audit accessibility, autofix issues, inspect live pages, compare screenshots, and more across multiple frameworks.20MIT
- AlicenseNot gradedqualityCmaintenanceLocal, free MCP server for brand logo search and shadcn/ui component search & source lookup, requiring no API keys or login.MIT
- AlicenseNot gradedqualityCmaintenanceA local MCP server that lets MCP clients inspect and edit the Figma document currently open in the Figma desktop app using a local bridge and development plugin.MIT
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/dmjacas/heroui-v2-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server