MCP - 21st

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, windsurf. This merges a 21st server into your client config without touching other MCP servers you already have.

Cursor / VS Code / Windsurf
Claude
Codex

Writes .cursor/mcp.json:

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

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.

What the tools do

Search & browse (free)

search — find components, themes, and templates with filters
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 free quota

Search and metadata tools are free. Generation, iteration, and code retrieval draw from your credits.

​Endpoint

​Set it up

​What the tools do

Endpoint

Set it up

What the tools do