Skip to main content
Glama
dmjacas
by dmjacas

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_components

List all v2 component slugs (matches v2.heroui.com/docs/components/<slug>)

get_component_docs

Description, install command, imports, usage guidance, props/API table

get_component_source_code

React/TypeScript source from packages/components/<pkg>/src

get_component_source_styles

tailwind-variants style definition from packages/core/theme/src/components

get_docs

General guides: installation, frameworks, theming, CLI, HeroUIProvider, etc.

get_theme_variables

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.js

GitHub 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/hr

How data is resolved

  • Component list = files under apps/docs/content/docs/components/*.mdx on the main branch.

  • 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. textarea ships inside @heroui/input, checkbox-group inside @heroui/checkbox) — see COMPONENT_PACKAGE_ALIASES in src/constants.ts.

  • Props/API tables are parsed out of the <APITable data={[...]} /> JSX literal embedded in each .mdx doc 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}.ts and default-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 tools
get_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").

ParametersJSON Schema
NameRequiredDescriptionDefault
componentYesComponent slug as returned by list_components, e.g. "button" or "date-picker".

TDQS

A4.2/5.0
Behavior3/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines5/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
componentYesComponent slug as returned by list_components, e.g. "button".

TDQS

A4.6/5.0
Behavior4/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. 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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines5/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
componentYesComponent slug as returned by list_components, e.g. "button".

TDQS

A4.2/5.0
Behavior3/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
pathYesDoc 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

A4.6/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines5/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4.2/5.0
Behavior3/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 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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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/.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4.6/5.0
Behavior4/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. 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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines5/5

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.

  1. 6 tool updatesv0.1.1
    • First observedget_component_docs
    • First observedget_component_source_code
    • First observedget_component_source_styles
    • First observedget_docs
    • First observedget_theme_variables
    • First observedlist_components

TDQS

A4.4/5.0
Disambiguation5/5

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).

Naming Consistency5/5

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.

Tool Count5/5

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.

Completeness4/5

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

ActivityMaintained
ResponsivenessNo issues

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

Related MCP Servers

  • A
    license
    Not graded
    quality
    D
    maintenance
    A high-quality, open-source Model Context Protocol (MCP) server that bridges AI systems and HeroUI, enabling intelligent assistance for developers working with HeroUI components.
    14
    17
    MIT
  • A
    license
    Not graded
    quality
    F
    maintenance
    Comprehensive 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.
    20
    MIT
  • A
    license
    Not graded
    quality
    C
    maintenance
    Local, free MCP server for brand logo search and shadcn/ui component search & source lookup, requiring no API keys or login.
    MIT
  • A
    license
    Not graded
    quality
    C
    maintenance
    A 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

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