MCP Server
Access HeroUI Native Pro and OSS documentation from a single AI assistant connection
The HeroUI Native Pro MCP server gives your AI agent access to both heroui-native-pro (Pro) and heroui-native (OSS) — component docs, theme variables, and setup guides — all from a single connection.
You do NOT need the separate @heroui/native-mcp (OSS MCP) installed. This Pro MCP covers both packages.
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.
Add to your ~/.codex/config.toml (or a project-scoped .codex/config.toml):
[mcp_servers.heroui-native-pro]
url = "https://native-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-native-pro (Pro) and heroui-native (OSS) |
get_component_docs | Full component documentation for any Pro or OSS native component |
get_docs | Guides from both Pro and OSS native documentation |
get_theme_variables | Native theme tokens (default theme) |
get_theme_variables
get_theme_variables()— list available themesget_theme_variables({ theme: "default" })— default native theme tokens
get_docs
Pro and OSS docs use distinct path prefixes so there's no ambiguity:
- Pro:
/pro/docs/native/getting-started/theming - OSS:
/docs/native/getting-started/theming
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