Find UI components and themes, retrieve code, and generate with hosted 21st AI when enabled.
Setup
Choose your client, copy the config, then fill in any required environment variables.
claude mcp add --transport http 21st-dev https://21st.dev/api/mcp --header 'x-api-key: <X_API_KEY>'~/.codex/config.toml
[mcp_servers.21st-dev]
url = "https://21st.dev/api/mcp"
http_headers = { x-api-key = "<X_API_KEY>" }
# codex mcp add 21st-dev --url https://21st.dev/api/mcp~/.cursor/mcp.json
{
"mcpServers": {
"21st-dev": {
"url": "https://21st.dev/api/mcp",
"headers": {
"x-api-key": "<X_API_KEY>"
}
}
}
}.vscode/mcp.json
{
"servers": {
"21st-dev": {
"type": "http",
"url": "https://21st.dev/api/mcp",
"headers": {
"x-api-key": "<X_API_KEY>"
}
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"21st-dev": {
"httpUrl": "https://21st.dev/api/mcp",
"headers": {
"x-api-key": "<X_API_KEY>"
}
}
}
}claude_desktop_config.json · Customize › Connectors › Add custom connector
{
"mcpServers": {
"21st-dev": {
"command": "npx",
"args": [
"-y",
"mcp-remote",
"https://21st.dev/api/mcp",
"--header",
"x-api-key:<X_API_KEY>"
]
}
}
}.trae/mcp.json
{
"mcpServers": {
"21st-dev": {
"url": "https://21st.dev/api/mcp",
"headers": {
"x-api-key": "<X_API_KEY>"
}
}
}
}