Heroui Mcp

HeroUI MCP Monorepo

Model Context Protocol (MCP) servers for the HeroUI design system. Access HeroUI component documentation directly in your AI assistant.

MCPs

| MCP | Description | Docs | | --- | --- | --- | | @heroui/react-mcp | MCP server for web (@heroui/react) component docs, examples, and theme data | [README](apps/react-mcp/README.md) | | @heroui/native-mcp | MCP server for React Native (@heroui/native) component docs, examples, and theme data | [README](apps/native-mcp/README.md) |

Quick Start

Installation

Choose your package based on your platform:

For Web (React/Next.js):

# Cursor, Claude Code, Windsurf, etc.
npx -y @heroui/react-mcp@latest

For React Native:

npx -y @heroui/native-mcp@latest

See package-specific READMEs for detailed installation instructions for your IDE.

What's Included

• 🔍 Component Discovery - Search and browse all HeroUI components
• 📚 Complete Documentation - Props, types, and usage examples
• 🎨 Theme Information - Access theme variables and design tokens
• 💻 Source Code - View component implementation and styles
• 🔄 Always Up-to-Date - Latest component data fetched automatically

Local Development

# Clone and install
git clone https://github.com/heroui-inc/heroui-mcp.git
cd heroui-mcp
pnpm install

# Set up environment variables (required for data extraction)
cp .env.example .env
# Edit .env with your Cloudflare R2 and GitHub credentials

Available Scripts

Build Commands:

pnpm build                    # Build all packages
pnpm build:react              # Build React MCP only
pnpm build:native             # Build Native MCP only

Development Servers:

pnpm dev                      # Start all dev servers (excludes mastra)
pnpm dev:react                # React MCP API server (http://localhost:8787)
pnpm dev:native               # Native MCP API server (http://localhost:8788)
pnpm dev:mastra               # Mastra playground server (http://localhost:4111)

Testing & Inspection:

pnpm inspect:react            # Launch MCP Inspector for React
pnpm inspect:native           # Launch MCP Inspector for Native
pnpm lint                     # Run linting
pnpm typecheck                # Run type checking
pnpm test                     # Run tests

Data Extraction:

pnpm extract:react            # Extract React component data
pnpm extract:native           # Extract Native component data

Code Quality:

pnpm format                   # Format code with Prettier
pnpm clean                    # Clean build artifacts
pnpm release:check            # Pre-release validation

See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed development setup and architecture information.

Contributing

We welcome contributions! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for development setup, architecture details, and contribution guidelines.

Please adhere to our [Code of Conduct](CODEOFCONDUCT.md) in all interactions.

Support

• 📖 Documentation
• 💬 Discord Community
• 🐦 X (Twitter)
• 🐛 GitHub Issues
• 📧 [Email Support](mailto:support@heroui.com)

License

MIT

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: heroui-inc
• Source: heroui-inc/heroui-mcp
• License: MIT

Install and usage instructions live in the source repository linked above.