MCP Server
Access HeroUI Native Pro documentation directly in your AI assistant
The HeroUI Native Pro MCP server lets your AI agent look up heroui-native-pro component docs, browse theme variables, and read setup guides — all without leaving your editor.
For heroui-native OSS components, use the separate heroui-native MCP. Both run side by side.
Setup
Add the Native Pro MCP to your editor:
Add to .cursor/mcp.json or Settings > Tools > MCP Servers:
{
"mcpServers": {
"heroui-native-pro": {
"url": "https://native-mcp.heroui.pro/mcp",
"headers": {
"x-heroui-personal-token": "HEROUI_PERSONAL_TOKEN"
}
}
}
}Make sure the heroui-native-pro connection is enabled in Settings > Tools & MCPs.
claude mcp add --transport http heroui-native-pro https://native-mcp.heroui.pro/mcp --header "x-heroui-personal-token: HEROUI_PERSONAL_TOKEN"Or add to .mcp.json:
{
"mcpServers": {
"heroui-native-pro": {
"type": "http",
"url": "https://native-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-native-pro": {
"url": "https://native-mcp.heroui.pro/mcp",
"headers": {
"x-heroui-personal-token": "HEROUI_PERSONAL_TOKEN"
}
}
}
}Open the file and click Start next to heroui-native-pro.
Add to .windsurf/mcp.json:
{
"mcpServers": {
"heroui-native-pro": {
"url": "https://native-mcp.heroui.pro/mcp",
"headers": {
"x-heroui-personal-token": "HEROUI_PERSONAL_TOKEN"
}
}
}
}Restart Windsurf to activate.
Add to settings.json (Cmd-,):
{
"context_servers": {
"heroui-native-pro": {
"url": "https://native-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-native-pro components by category |
get_component_docs | Full component documentation: anatomy, compound API, props, examples |
get_theme_variables | Theme variables for colors, typography, spacing with light/dark mode support |
get_docs | Guides: installation, theming, styling, composition, animation |
Start Prompting
Build a login screen with email and password fields, a "Sign in" button, social auth options, and a "Forgot password?" linkCreate a three-step onboarding flow with illustrations, progress dots, and a "Get Started" button on the last slideBuild a settings screen with profile avatar, account section with toggle switches, notification preferences, and a danger zone with "Delete Account"Show me how to build a bottom tab navigator with Home, Search, Notifications, and Profile tabs using HeroUI Native components