MCP Server

The herocn MCP Server gives AI assistants direct access to the herocn documentation and component registry, making it easier to build with herocn in AI-powered development environments.

The MCP server uses stdio transport. Published at @herocn/mcp on npm.

As we add more components to the herocn registry, they'll be available in the MCP server too.

Quick Setup

OpenCode

Add the herocn server to your project's opencode.json configuration file:

opencode.json

{
	"$schema": "https://opencode.ai/config.json",
	"mcp": {
		"herocn": {
			"type": "local",
			"command": ["npx", "-y", "@herocn/mcp@latest"]
		}
	}
}

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

See the OpenCode MCP documentation for more details.

Claude Code

Run this command in your terminal:

claude mcp add herocn -- npx -y @herocn/mcp@latest

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

.mcp.json

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

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

See the Claude Code MCP documentation for more details.

Codex

Add the herocn server to your ~/.codex/config.toml (or a project-scoped .codex/config.toml):

config.toml

[mcp_servers.herocn]
command = "npx"
args = ["-y", "@herocn/mcp@latest"]

After adding the configuration, restart Codex and run /mcp in the TUI to verify the server is active.

See the Codex MCP documentation for more details.

Cursor

Add the herocn server to your project's .cursor/mcp.json configuration file:

.cursor/mcp.json

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

Alternatively, add it through Cursor Settings → Tools → MCP Servers. After adding the configuration, restart Cursor to activate the MCP server.

See the Cursor MCP documentation for more details.

Claude Desktop

Add the herocn server to your claude_desktop_config.json configuration file:

claude_desktop_config.json

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

After adding the configuration, restart Claude Desktop to activate the MCP server.

See the Claude Desktop MCP documentation for more details.

VS Code

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

.vscode/mcp.json

{
	"servers": {
		"herocn": {
			"type": "stdio",
			"command": "npx",
			"args": ["-y", "@herocn/mcp@latest"]
		}
	}
}

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

See the VS Code MCP documentation for more details.

Windsurf

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

.windsurf/mcp.json

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

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

See the Windsurf MCP documentation for more details.

Zed

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

settings.json

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

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

See the Zed MCP documentation for more details.

Usage

Once configured, ask your AI assistant questions like:

"Show me all herocn components"
"Get the complete documentation for the Button component"
"Give me an example of using the Card component"
"Get the source code for the Button component"
"What's the install command for the Dialog component?"
"Show me the herocn installation guide"
"Search the docs for RTL support"

Available Tools

The MCP server provides these tools to AI assistants:

Tool	Description
`list_docs`	List all available herocn documentation pages
`get_doc`	Fetch the full markdown content of a documentation page
`search_docs`	Keyword search over the documentation with ranked results and snippets
`list_components`	List all available herocn registry components
`get_component`	Fetch a component package including source, dependencies, CSS variables, and the install command
`get_install_command`	Get the install command for a registry component

Troubleshooting

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

Need help? Open an issue on GitHub.