Overview

HeroUI Pro provides three tools to help AI assistants build better UIs with @heroui-pro/react. Use them together for the best results.

Quick Setup

Get your HEROUI_PERSONAL_TOKEN from the Pro dashboard, then:

1. MCP Server

Gives your agent live access to docs, CSS, and theme variables at runtime. Add to your editor's MCP config:

{
  "mcpServers": {
    "heroui-pro": {
      "url": "https://mcp.heroui.pro/mcp",
      "headers": {
        "x-heroui-personal-token": "HEROUI_PERSONAL_TOKEN"
      }
    }
  }
}

Full MCP setup guide

2. React Pro Skill

Teaches your agent @heroui-pro/react conventions, compound patterns, and common mistakes.

curl -fsSL https://heroui.pro/docs/install | HEROUI_PERSONAL_TOKEN=your_token bash -s -- heroui-react-pro

Full skills guide

3. Design Taste Skill

Helps your agent better use the HeroUI design system and produce polished UIs.

curl -fsSL https://heroui.pro/docs/install | HEROUI_PERSONAL_TOKEN=your_token bash -s -- heroui-pro-design-taste

Full design taste guide

What Each Tool Does

	MCP Server	React Pro Skill	Design Taste Skill
Purpose	Live access to docs, CSS, and themes	Teaches component patterns and v3 conventions	Teaches design system principles and visual polish
How it works	Remote tools your agent calls at runtime	Static instructions loaded into agent context	Static instructions loaded into agent context
Install	Add URL to editor MCP config	One-line `curl` install	One-line `curl` install
Offline	No (requires network)	Yes	Yes
Best for	"Look up the Sheet API"	"Build a dashboard with KPI cards"	"Make this look production-quality"

Skills teach, MCP does. Skills give your agent knowledge of patterns and conventions. The MCP server gives it live access to component documentation, CSS files, and theme variables.

Recommended Stack

For best results, install all three:

MCP Server — your agent can look up any component API, browse the CSS system, and read guides in real time
React Pro Skill — your agent knows @heroui-pro/react conventions, compound patterns, and common mistakes without needing to look them up
Design Taste Skill — your agent produces polished, well-designed UIs instead of generic layouts

Using with `@heroui/react`

The Pro tools cover @heroui-pro/react components. For @heroui/react base components (Button, Card, Modal, TextField, etc.), use the separate heroui-react MCP and skills. Both run side by side.