MCP Server

The HeroUI MCP Server gives AI assistants direct access to HeroUI Native component documentation, making it easier to build with HeroUI in AI-powered development environments.

The MCP server currently supports heroui-native and stdio transport. Published at @heroui/native-mcp on npm. View the source code on GitHub.

Quick Setup

Cursor:

Or manually add to Cursor Settings → Tools → MCP Servers:

{
  "mcpServers": {
    "heroui-native": {
      "command": "npx",
      "args": ["-y", "@heroui/native-mcp@latest"]
    }
  }
}

Alternatively, add the following to your ~/.cursor/mcp.json file. To learn more, see the Cursor documentation.

Claude Code: Run this command in your terminal:

claude mcp add heroui-native -- npx -y @heroui/native-mcp@latest

Or manually add to your project's .mcp.json file:

{
  "mcpServers": {
    "heroui-native": {
      "command": "npx",
      "args": ["-y", "@heroui/native-mcp@latest"]
    }
  }
}

After adding the configuration, restart Claude Code and run /mcp to see the HeroUI MCP server in the list. If you see Connected, you're ready to use it.

See the Claude Code MCP documentation for more details.

Windsurf: Add the HeroUI server to your project's .windsurf/mcp.json configuration file:

{
  "mcpServers": {
    "heroui-native": {
      "command": "npx",
      "args": ["-y", "@heroui/native-mcp@latest"]
    }
  }
}

After adding the configuration, restart Windsurf to activate the MCP server.

See the Windsurf MCP documentation for more details.

Zed: Add the HeroUI server to your settings.json configuration file. Open settings via Command Palette (zed: open settings) or use Cmd-, (Mac) / Ctrl-, (Linux):

{
  "context_servers": {
    "heroui-native": {
      "command": "npx",
      "args": ["-y", "@heroui/native-mcp@latest"],
      "env": {}
    }
  }
}

After adding the configuration, restart Zed and open the Agent Panel settings view. Check that the indicator dot next to the heroui-native server is green with "Server is active" tooltip.

See the Zed MCP documentation for more details.

VS Code: To configure MCP in VS Code with GitHub Copilot, add the HeroUI server to your project's .vscode/mcp.json configuration file:

{
  "mcpServers": {
    "heroui-native": {
      "command": "npx",
      "args": ["-y", "@heroui/native-mcp@latest"]
    }
  }
}

After adding the configuration, open .vscode/mcp.json and click Start next to the heroui-native server.

See the VS Code MCP documentation for more details.

Usage

Once configured, ask your AI assistant questions like:

• "Help me install HeroUI Native in my Expo app"
• "Show me all HeroUI Native components"
• "What props does the Button component have?"
• "Give me an example of using the Card component"
• "What are the theme variables for dark mode?"

Automatic Updates

The MCP server can help you upgrade to the latest HeroUI Native version:

"Hey Cursor, update HeroUI Native to the latest version"

Your AI assistant will automatically:

• Compare your current version with the latest release
• Review the changelog for breaking changes
• Apply the necessary code updates to your project

This works for any version upgrade, whether you're updating to the latest alpha, beta, or stable release.

Available Tools

The MCP server provides these tools to AI assistants:

Troubleshooting

Requirements: Node.js 22 or higher. The package will be automatically downloaded when using npx.

Need help? GitHub Issues | Discord Community

Links

• npm Package
• GitHub Repository
• Contributing Guide