MCP

The 21st MCP server exposes the marketplace and 21st AI as tools your editor and AI agent can call directly. Search for components, pull code, generate UI, and manage your own items without leaving your workflow.

Endpoint

URL: https://21st.dev/api/mcp (HTTP, JSON-RPC 2.0)
Auth: header x-api-key with a 21st API key from 21st.dev/settings/api-keys

Set it up

The fastest way is the CLI:

21st init --client cursor --write

Supported clients: cursor, claude, codex, vscode, devin. This merges a 21st server into your client config without touching other MCP servers you already have. Windsurf became Devin Desktop in June 2026, and --client windsurf still works as an alias.

Cursor
VS Code
Devin Desktop
Claude
Codex

Writes .cursor/mcp.json:

{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": { "x-api-key": "${API_KEY_21ST}" }
    }
  }
}

Writes .vscode/mcp.json. VS Code has its own schema: servers live under servers, and the key comes from an input it prompts for once and then stores securely, so nothing secret ends up in a file you commit.

{
  "inputs": [
    {
      "type": "promptString",
      "id": "21st-api-key",
      "description": "21st API key (https://21st.dev/settings/api-keys)",
      "password": true
    }
  ],
  "servers": {
    "21st": {
      "type": "http",
      "url": "https://21st.dev/api/mcp",
      "headers": { "x-api-key": "${input:21st-api-key}" }
    }
  }
}

Writes .devin/mcp_config.local.json, the config Devin Local reads. It is gitignored, so a personal key is safe to keep there:

{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "transport": "http",
      "headers": { "x-api-key": "${API_KEY_21ST}" }
    }
  }
}

Devin’s docs describe ${env:VAR} expansion for OAuth fields but say nothing about header values, so if the server answers 401, paste the key itself in place of ${API_KEY_21ST}.Still on the legacy Cascade agent? It reads ~/.codeium/windsurf/mcp_config.json instead, and calls the url field serverUrl there.

Writes .mcp.json:

{
  "mcpServers": {
    "21st": {
      "type": "http",
      "url": "https://21st.dev/api/mcp",
      "headers": { "x-api-key": "${API_KEY_21ST}" }
    }
  }
}

Add to ~/.codex/config.toml:

[mcp_servers.21st]
url = "https://21st.dev/api/mcp"
bearer_token_env_var = "API_KEY_21ST"

Set API_KEY_21ST in your environment to the key from your settings. VS Code is the exception: it prompts for the key instead of reading the environment.

What the tools do

Search & browse (free)

search — find components, themes, and templates with filters, as plain data
search_picker — same as search, but renders an inline picker in hosts that support it (use when you want to browse and pick a result visually)
search_logo — find brand and UI SVG logos by name (returns the SVG urls)
get_component / get_theme — fetch code / CSS

21st AI (credits)

generate — start a sketch or code generation
get_generation — list a generation’s drafts (free)
iterate_generation — refine a draft
get_take — fetch a draft’s code + copy-prompt (free)

Bookmarks, lists & teams

list_bookmarks, bookmark, create_bookmark_list, add_to_list
list_teams, list_team_libraries, list_team_components

Manage your own items (API key required)

edit_component / delete_component, edit_theme / delete_theme, edit_template / delete_template
get_profile / edit_profile / upload_profile_media

Account

get_usage — tier and remaining credits / daily quota

Search and metadata tools are free. Generation and iteration require a paid plan and available credits; code retrieval is free on paid plans and metered on the free tier. See credits.

Getting Started

FAQ

21st AI

CLI

Marketplace

Publishing

Endpoint

Set it up

What the tools do

​Endpoint

​Set it up

​What the tools do

Endpoint

Set it up

What the tools do