MCP Alpha
Use the Hummingbird UI MCP server to integrate UI components into your AI development workflow from Cursor, Windsurf, Claude and other MCP client providers.
Overview
Hummingbird UI MCP server seamlessly connects AI assistants like Claude, Cursor, Windsurf, and GitHub Copilot to the entire Hummingbird UI ecosystem. No API keys, no accounts, your AI tools can instantly access a rich library of components, forms, layouts, theming options, content utilities, and framework-specific guides.
Built as an open-source solution, Hummingbird UI MCP enhances how LLM understand UI context, resulting in more accurate, consistent, and production-ready code generation.
Quick Start
The fastest way to get started is with npx:
npx @hummingbirdui/mcpConfiguring MCP client
Claude Desktop
Add the following to your claude_desktop_config.json:
{
"mcpServers": {
"hummingbird-mcp": {
"command": "npx",
"args": ["-y", "@hummingbirdui/mcp@latest"]
}
}
}Fully quit and reopen Claude Desktop to apply the changes.
Cursor
Add the following to your .cursor/mcp.json:
{
"mcpServers": {
"hummingbird-mcp": {
"command": "npx",
"args": ["-y", "@hummingbirdui/mcp@latest"]
}
}
}After saving, enable the server in Cursor Settings under the MCP section. You should see a green dot next to hummingbird-mcp when it’s connected.
Windsurf
Add the following to your mcp_config.json:
{
"mcpServers": {
"hummingbird-mcp": {
"command": "npx",
"args": ["-y", "@hummingbirdui/mcp@latest"]
}
}
}VS Code (GitHub Copilot)
Add the following to your .vscode/mcp.json:
{
"servers": {
"hummingbird-mcp": {
"command": "npx",
"args": ["-y", "@hummingbirdui/mcp@latest"]
}
}
}Open the file and click Start next to the hummingbird-mcp server.
Learn More
- GitHub Repository — Source code and issue tracker
- MCP Specification — Learn about the Model Context Protocol