Docs
MCP server
Searches first
Your agent finds the component or block before it writes UI, instead of inventing one.
Builds by the rules
Props, usage and the design rules come with every answer, so screens match the library.
Always current
The server ships with every release. New components and changed props show up without reinstalling.
Endpoint
Streamable HTTP
https://wingo-ui.com/mcp- Stateless Streamable HTTP. Clients on the 2025 protocol and on the 2026-07-28 revision both work.
- Without a key you get search, docs, props and design rules, but no source. A key from a free account (email only, no card) adds the source of every free item; a key from a Pro account adds Pro sources. Send it as
Authorization: Bearer wui_…. - Clients without remote servers use the local proxy:
npx -y wingo-ui@latest mcp(stdio, reads the key saved bywingo-ui login).
Quick setup
In your project, one command writes the rule file and the MCP config for your agent:
npx wingo-ui@latest login
npx wingo-ui@latest agents install claude # or codex, gemini, grok, cursor, allAPI key
The configs below read the key from the WINGO_UI_API_KEY environment variable, so it never lands in your repository. Create a key in your account (it is shown once) and export it in your shell profile.
export WINGO_UI_API_KEY=wui_...Per client
Prefer to set it up by hand? Pick your agent:
Terminal
claude mcp add --transport http wingo-ui https://wingo-ui.com/mcp --header "Authorization: Bearer $WINGO_UI_API_KEY".mcp.json
{
"mcpServers": {
"wingo-ui": {
"type": "http",
"url": "https://wingo-ui.com/mcp",
"headers": {
"Authorization": "Bearer ${WINGO_UI_API_KEY}"
}
}
}
}Terminal
codex mcp add wingo-ui --url https://wingo-ui.com/mcp --bearer-token-env-var WINGO_UI_API_KEY~/.codex/config.toml
[mcp_servers.wingo-ui]
url = "https://wingo-ui.com/mcp"
bearer_token_env_var = "WINGO_UI_API_KEY"Codex reads MCP servers from your user config; restart it after adding the server.
.gemini/settings.json
{
"mcpServers": {
"wingo-ui": {
"httpUrl": "https://wingo-ui.com/mcp",
"headers": {
"Authorization": "Bearer ${WINGO_UI_API_KEY}"
}
}
}
}Terminal
grok mcp add --transport http wingo-ui https://wingo-ui.com/mcp --header "Authorization: Bearer ${WINGO_UI_API_KEY}"Grok also reads .mcp.json and AGENTS.md in the project, so the Claude Code setup works for it too.
.cursor/mcp.json
{
"mcpServers": {
"wingo-ui": {
"url": "https://wingo-ui.com/mcp",
"headers": {
"Authorization": "Bearer ${env:WINGO_UI_API_KEY}"
}
}
}
}.mcp.json
{
"mcpServers": {
"wingo-ui": {
"command": "npx",
"args": [
"-y",
"wingo-ui@latest",
"mcp"
]
}
}
}Any client that runs local commands works with the stdio proxy. It mirrors the remote tools, so new tools appear without updating it.
Tools
search_componentsFind components, blocks, hooks and helpers by keywords.list_categoriesBrowse the categories with item counts.get_componentPro sourceProps, parts, usage, dependencies, the install command and the source.get_blockPro sourceA full screen or section and the components it composes.get_design_rulesTokens, backgrounds and contrast, sizes, motion, forms, overlays and mobile rules.get_theme_tokensThe CSS variables for light and dark mode.get_install_instructionsProject setup for Next.js or Vite.check_updatesCompare installed items with the latest release.get_changelogRecent releases and their notes.get_account_statusWhether the key has Pro, with the links to upgrade.
There is also a build_screen prompt that walks the agent through search, rules, install and composition.
Try it
Ask your agent in plain words. It picks the tools on its own:
- Build a sign-in page with an email code and passkeys using Wingo UI.
- Add a filterable orders table to this page with Wingo UI components.
- Turn this settings form into Wingo UI fields and follow its design rules.
- Check my Wingo UI components for updates and tell me what changed.
Staying current
- The server always serves the latest deployed release: components, props, rules and tokens update the moment a release ships.
check_updatescompares the versions in yourwingo-ui.jsonwith the latest release, andnpx wingo-ui@latest updatemerges the changes into your files.- The rule files stay short and stable.
npx wingo-ui@latest agents updaterefreshes them when they change.
Troubleshooting
- 401 invalid_api_key: the key was revoked or mistyped. Create a new one in your account.
- Items come back without source: no key was sent (create a free account and run
npx wingo-ui@latest login), or the item is Pro and the account is not.get_account_statusshows what the server sees. - 429 rate_limited: 60 requests a minute without a key, 600 with one. The response says when to retry.
- The environment variable is not picked up: start the agent from a shell that has
WINGO_UI_API_KEY, or use the stdio proxy, which reads the key saved bywingo-ui login.
Related guides
Building UI with AI agents
Antigravity MCP Setup: The Right Config Path and Prompts
Antigravity MCP setup tested on November 6, 2026: where mcp_config.json lives, remote vs npx entries, reloading, and prompts that install real components.
10 min read
Building UI with AI agents
OpenCode MCP Setup: opencode.json for v1 and v2
OpenCode MCP setup checked on November 6, 2026: local and remote entries in opencode.json for v1 and v2, API key headers vs OAuth, and prompts that install UI.
11 min read
Building UI with AI agents
Windsurf MCP Setup in 2026: New Config Path, Rules, Fixes
Windsurf MCP setup after the Devin Desktop rename: the mcp_config.json paths Devin Local reads, a working JSON entry, rules files and common error fixes.
10 min read