Find UI components and themes, retrieve code, and generate with hosted 21st AI when enabled.
Connect Remote server
claude mcp add --transport http mcp https://21st.dev/api/mcp --header "x-api-key: <X_API_KEY>"
{
"mcpServers": {
"mcp": {
"url": "https://21st.dev/api/mcp",
"headers": {
"x-api-key": "<X_API_KEY>"
}
}
}
}
{
"servers": {
"mcp": {
"type": "http",
"url": "https://21st.dev/api/mcp",
"headers": {
"x-api-key": "<X_API_KEY>"
}
}
}
}
Settings > Connectors > Add custom connector
URL: https://21st.dev/api/mcp
Replace the values in angle brackets with your own. Keys stay on your machine; we never see them.
Tools
This server asks for a key before it lists its tools. Connect it with your own key to see them.
Headers
| Name | Description |
|---|---|
x-api-keyRequired, secret | Your 21st.dev API key from https://21st.dev/settings/api-keys. Authentication is required for discovery and tool calls. Generation tools are listed only when the account has hosted AI access. |
Details
| Endpoint | https://21st.dev/api/mcp (Streamable HTTP) |
| First published | 9 Sep 2026 |
| Last updated | 9 Sep 2026 |
| Registry name | dev.21st/mcp |
More developer tools servers See all
Listing data from the official MCP registry. Status and tools from NestDaddy's daily check. Browse all MCP servers.
