MCP Server
Access HeroUI Pro and OSS documentation from a single AI assistant connection
The HeroUI Pro MCP server gives your AI agent access to both @heroui-pro/react (Pro) and @heroui/react (OSS) — component docs, CSS styles, theme variables, source code, and setup guides — all from a single connection.
You do NOT need the separate @heroui/react-mcp (OSS MCP) installed. This Pro MCP covers both packages.
Setup
Add the Pro MCP to your editor:
Add to .cursor/mcp.json or Settings > Tools > MCP Servers:
{
"mcpServers": {
"heroui-pro": {
"url": "https://mcp.heroui.pro/mcp",
"headers": {
"x-heroui-personal-token": "HEROUI_PERSONAL_TOKEN"
}
}
}
}Make sure the heroui-pro connection is enabled in Settings > Tools & MCPs.
claude mcp add --transport http heroui-pro https://mcp.heroui.pro/mcp --header "x-heroui-personal-token: HEROUI_PERSONAL_TOKEN"Or add to .mcp.json:
{
"mcpServers": {
"heroui-pro": {
"type": "http",
"url": "https://mcp.heroui.pro/mcp",
"headers": {
"x-heroui-personal-token": "HEROUI_PERSONAL_TOKEN"
}
}
}
}Restart and run /mcp to verify.
Add to .vscode/mcp.json:
{
"servers": {
"heroui-pro": {
"url": "https://mcp.heroui.pro/mcp",
"headers": {
"x-heroui-personal-token": "HEROUI_PERSONAL_TOKEN"
}
}
}
}Open the file and click Start next to heroui-pro.
Add to .windsurf/mcp.json:
{
"mcpServers": {
"heroui-pro": {
"url": "https://mcp.heroui.pro/mcp",
"headers": {
"x-heroui-personal-token": "HEROUI_PERSONAL_TOKEN"
}
}
}
}Restart Windsurf to activate.
Add to settings.json (Cmd-,):
{
"context_servers": {
"heroui-pro": {
"url": "https://mcp.heroui.pro/mcp",
"headers": {
"x-heroui-personal-token": "HEROUI_PERSONAL_TOKEN"
}
}
}
}Restart and check the Agent Panel for a green indicator.
Add to your ~/.codex/config.toml (or a project-scoped .codex/config.toml):
[mcp_servers.heroui-pro]
url = "https://mcp.heroui.pro/mcp"
http_headers = { "x-heroui-personal-token" = "HEROUI_PERSONAL_TOKEN" }Restart Codex and run /mcp to verify.
Get your HEROUI_PERSONAL_TOKEN from the Pro dashboard.
Available Tools
| Tool | Description |
|---|---|
list_components | List all components from both @heroui-pro/react (Pro) and @heroui/react (OSS) |
get_component_docs | Full component documentation for any Pro or OSS component |
get_css | Component BEM CSS for both Pro and OSS components |
get_docs | Guides from both Pro and OSS documentation |
get_component_source_code | View OSS component source code (Pro source not exposed) |
get_theme_variables | Theme tokens and Pro theme variants (default, brutalism, glass, mouve) |
get_css
get_css()— list available Pro + OSS component namesget_css({ components: ["sheet", "sidebar"] })— Pro BEM CSSget_css({ components: ["button", "card"] })— OSS BEM CSS
get_theme_variables
get_theme_variables()— list available themesget_theme_variables({ theme: "default" })— Pro base tokens + OSS default tokensget_theme_variables({ theme: "brutalism" })— full Pro theme variant CSS
get_docs
Pro and OSS docs use distinct path prefixes so there's no ambiguity:
- Pro:
/pro/docs/react/getting-started/theming - OSS:
/docs/react/getting-started/theming
Start Prompting
Build a settings page with a Sidebar, CellSwitch toggles, CellSelect dropdowns, and a CellSlider for font sizeCreate a dashboard with KPI cards, TrendChips, and an AreaChart for weekly revenueShow me the BEM classes for the Sheet component — I want to customize the overlay and content stylesWhat props does the Command component accept? Show me an example with keyboard shortcuts