de en es ja ko ru zh

heroui-v2-mcp

Name: heroui-v2-mcp
Author: dmjacas

by dmjacas

Overview Schema Source Related Servers Discussions Admin

TypeScript

Remote

heroui-v2-mcp

HeroUI v2 (https://v2.heroui.com) 컴포넌트 문서, 소스 코드, 스타일 정의 및 테마 토큰을 위한 MCP(Model Context Protocol) 서버입니다.

공식 @heroui/react-mcp — HeroUI v3를 대상으로 하며 배포된 Cloudflare Worker + R2 버킷 + PostHog 프로젝트를 필요로 합니다 — 와 달리, 이 프로젝트는 독립형 로컬 서버입니다: 프로세스가 살아 있는 동안 모든 것을 heroui-inc/heroui@main(v2.x를 추적하는 브랜치) 및 raw.githubusercontent.com에서 직접 요청하여 가져오고 결과를 메모리에 캐시합니다. 클라우드 계정, API 배포, 추출 파이프라인이 필요 없습니다.

별도 프로젝트를 만드는 이유

HeroUI v3(브랜치 v3, 사이트 heroui.com)와 v2(브랜치 main, 사이트 v2.heroui.com)는 서로 다른, 호환되지 않는 컴포넌트 모델입니다 — 패키지 구조가 다르고, v2 사이트에는 llms.txt가 없으며, 문서 폴더 구조(/docs/components/* vs /docs/react/*)가 다르고, 스타일링 방식(packages/core/theme/src/components 아래의 tailwind-variants 파일 vs v3가 사용하는 방식)도 다릅니다. 공식 MCP는 v2 문서를 제공하지 않겠다고 명시적으로 거부하므로, 이 프로젝트는 도구 구성은 동일하게 유지하되 v2 데이터 소스를 가리킵니다.

Related MCP server: UI Toolkit MCP Server

도구

Tool	Purpose
`list_components`	모든 v2 컴포넌트 slug를 나열합니다(`v2.heroui.com/docs/components/<slug>`와 일치)
`get_component_docs`	설명, 설치 명령어, imports, 사용 가이드, props/API 테이블
`get_component_source_code`	`packages/components/<pkg>/src`의 React/TypeScript 소스
`get_component_source_styles`	`packages/core/theme/src/components`의 tailwind-variants 스타일 정의
`get_docs`	일반 가이드: 설치, 프레임워크, 테마, CLI, HeroUIProvider 등
`get_theme_variables`	기본 시맨틱 색상 + 레이아웃 토큰

설치 및 실행

이 패키지는 npm에 heroui-v2-mcp로 게시되어 있으므로, 사용하기 위해 클론하거나 빌드할 필요가 없습니다.

Claude Code / Claude Desktop / Cursor에서 사용하기

MCP 설정에 추가하세요 — npx가 요청 시 다운로드하여 실행합니다:

{
  "mcpServers": {
    "heroui-v2": {
      "command": "npx",
      "args": ["-y", "heroui-v2-mcp"]
    }
  }
}

또는 전역으로 설치한 뒤 바이너리를 직접 지정하세요:

npm install -g heroui-v2-mcp

{
  "mcpServers": {
    "heroui-v2": {
      "command": "heroui-v2-mcp"
    }
  }
}

로컬 개발 (소스에서)

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 속도 제한

디렉터리 목록은 GitHub REST API를 통해 가져오는데, 인증하지 않으면 시간당 60회 요청으로 제한됩니다. 파일 내용(raw.githubusercontent.com)은 이 제한에 적용되지 않습니다. 여러 컴포넌트를 탐색하다가 403 오류가 발생하면 토큰을 설정하세요:

export GITHUB_TOKEN=ghp_xxx   # no scopes needed, just raises the rate limit to 5000/hr

데이터 해석 방식

컴포넌트 목록 = main 브랜치의 apps/docs/content/docs/components/*.mdx 파일들.
대부분의 문서 slug는 packages/components/<slug> 패키지에 1:1로 매핑됩니다. 소수의 문서 페이지는 다른 패키지에 번들로 포함된 하위 컴포넌트를 설명합니다(예: textarea는 @heroui/input 안에, checkbox-group은 @heroui/checkbox 안에 있음) — src/constants.ts의 COMPONENT_PACKAGE_ALIASES를 참조하세요.
Props/API 테이블은 각 .mdx 문서 페이지에 포함된 <APITable data={[...]} /> JSX 리터럴에서 파싱됩니다(해당 배열은 JS 리터럴로 평가됩니다 — 공식 저장소의 정적 데이터이며, 임의의/신뢰할 수 없는 입력이 아닙니다).
테마 토큰은 packages/core/theme/src/colors/{semantic,common}.ts 및 default-layout.ts에서 가져옵니다.

캐싱

모든 GitHub 응답(파일 내용 또는 디렉터리 목록)은 30분 동안 메모리에 캐시됩니다(src/constants.ts의 CACHE_TTL_MS). 더 빨리 새로고침하려면 프로세스를 다시 시작하세요.

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

Name	Required	Description	Default
`component`	Yes	Component slug as returned by list_components, e.g. "button" or "date-picker".

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

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

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

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

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

Tool Schema Changelog

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

6 tool updatesv0.1.1Aug 18, 2026
- First observedget_component_docs
- First observedget_component_source_code
- First observedget_component_source_styles
- First observedget_docs
- First observedget_theme_variables
- First observedlist_components

Deploy Server

Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

TDQS

A4.4/5.0

Scored 2026-08-18 10:20 across 6 tools

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 recent community issues

Resources

Related MCP Connectors

StyleKitA
io.github.AnxForever
MCP server for StyleKit styles, tokens, recipes, lint and repair over stdio or HTTP.
Design Tools Developer Tools Code Analysis
51458
https://www.stylekit.top/mcp
innovationlab
io.github.doc2mcp
MCP server for innovationlab documentation, generated by doc2mcp.
Documentation Access Developer Tools
24
https://doc2mcp.site/api/mcp/07229b9b-be76-4823-b6ef-8e05641be899/mcp
Harshith Nayaka L portfolio docsA
io.github.HarshithNayakaL
Read-only MCP server over the developer docs for the portfolio's JSON API, MCP, A2A and NLWeb.
Documentation Access Developer Tools
31
https://harshith-nayaka-l-portfolio.vercel.app/mcp/docs
Context AwesomeA
io.github.bh-rat
MCP server for accessing curated awesome list documentation
Documentation Access Research & Data
2261
https://www.context-awesome.com/api/mcp

Related MCP Servers

HeroUI MCP Server
T-hash06
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.
Updated a year ago (2025-07-20 05:27 UTC)
2 npm
17
MIT
UI Toolkit MCP Server
Design Tools Developer Tools Testing & QA Tools
elsahafy
A
license
A
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.
Updated 5 months ago (2026-06-24 07:23 UTC)
13
10 npm
MIT
ui-toolkit-mcp
Design Tools Developer Tools
anomal3
A
license
Not graded
quality
D
maintenance
Local, free MCP server for brand logo search and shadcn/ui component search & source lookup, requiring no API keys or login.
Updated 4 months ago (2026-07-07 08:26 UTC)
MIT
Figma Native MCP
Design Tools Developer Tools
tomasmarekk
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.
Updated 4 months ago (2026-07-16 09:47 UTC)
MIT

heroui-v2-mcp

별도 프로젝트를 만드는 이유

도구

설치 및 실행

Claude Code / Claude Desktop / Cursor에서 사용하기

로컬 개발 (소스에서)

GitHub 속도 제한

데이터 해석 방식

캐싱

Available Tools

Tool Schema Changelog

TDQS

Maintenance

Resources

Related MCP Connectors

Related MCP Servers

HeroUI MCP Server

UI Toolkit MCP Server

ui-toolkit-mcp

Figma Native MCP