MCP

​

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

21st init --client cursor --write

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

{
  "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}" }
    }
  }
}

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

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

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

​

What the tools do

• 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 — fetch a component’s code and its demo (on the free tier the result also says how many retrievals are left today)
• get_theme — fetch a theme’s CSS (free and unmetered, no quota attached)

• generate — start a sketch or code generation (shown when AI is enabled)
• get_generation — list a generation’s drafts (free)
• iterate_generation — refine a draft (shown when AI is enabled)
• get_generation_job — poll an accepted refinement by its job ID (free)
• get_take — fetch the exact saved take/version, code, copy-prompt, agent prompt and structure (free, with the existing Remix trial take-out wall)
• get_notes, update_note — read sent editor notes and report progress on their existing IDs (free)
• get_changes — read saved edits and a change plan since a version or the last pull (free)
• edit_take — apply deterministic Sketch edits using stable target IDs and an exact current version (free)
• record_take_outcome — report landed, adapted or abandoned after taking out that exact version (free)
• send_feedback — forward the user’s requested feedback with server-derived take context (free)

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

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

• get_usage — account tier, aiGenerationEnabled, free daily component-code retrieval quota, and AI credits balance, reset time and personal/team scope

​

Draft and hand off