MCP Server
Access HeroUI Pro documentation directly in your AI assistant
The HeroUI Pro MCP server lets your AI agent look up @heroui-pro/react component docs, browse the full CSS styling system (design tokens, component BEM classes, theme variants), and read setup guides — all without leaving your editor.
For @heroui/react base components (Button, Card, Modal, etc.), use the separate heroui-react MCP. Both run side by side.
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 heroui-pro --transport http --url https://mcp.heroui.pro/mcp --header "x-heroui-personal-token: HEROUI_PERSONAL_TOKEN"Or add to .mcp.json:
{
"mcpServers": {
"heroui-pro": {
"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.
Get your HEROUI_PERSONAL_TOKEN from the Pro dashboard.
Available Tools
| Tool | Description |
|---|---|
list_components | List all @heroui-pro/react components by category |
get_component_docs | Full component documentation: anatomy, compound API, props, examples |
get_css | CSS system: base design tokens, component BEM styles, theme variants |
get_docs | Guides: installation, theming, styling, composition, animation |
The get_css tool supports three modes:
get_css()— base design tokens + list of available styles and themesget_css({ components: ["sheet", "sidebar"] })— BEM CSS for specific componentsget_css({ theme: "brutalism" })— full theme variant (variables, fonts, overrides)
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