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):** ```bash # Cursor, Claude Code, Windsurf, etc. npx -y @heroui/react-mcp@latest ``` **For React Native:** ```bash 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 ```bash # 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:** ```bash pnpm build # Build all packages pnpm build:react # Build React MCP only pnpm build:native # Build Native MCP only ``` **Development Servers:** ```bash 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:** ```bash 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:** ```bash pnpm extract:react # Extract React component data pnpm extract:native # Extract Native component data ``` **Code Quality:** ```bash 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](CODE_OF_CONDUCT.md) in all interactions. ## Support - 📖 [Documentation](https://heroui.com) - 💬 [Discord Community](https://discord.gg/9b6yyZKmH4) - 🐦 [X (Twitter)](https://x.com/hero_ui) - 🐛 [GitHub Issues](https://github.com/heroui-inc/heroui-mcp/issues) - 📧 [Email Support](mailto:support@heroui.com) ## License [MIT](https://choosealicense.com/licenses/mit/)