Open app

DocumentationIntegrations

Connect 21st.dev with your own API key

Search UI components and design inspiration through the official 21st MCP using your own 21st.dev account.

3 min readUpdated

What you can use

21st provides component search, design templates and code retrieval. The tools available depend on your account. AI generation also requires the relevant 21st access and may consume credits.

Connect from the catalog

  1. 01Create a current API key in your account at https://21st.dev/mcp.
  2. 02Open Apps > Connectors, find 21st.dev and choose Connect.
  3. 03Paste your key. The server address and x-api-key header are already configured.
  4. 04Test the connection, then save it. You can also use it in workflow steps.

Bring your own key. Usage and billing run through your 21st.dev account. Old Magic keys were reset and need to be recreated.

Alternatively, import JSON

You can import the same connection as a custom MCP. The standard mcpServers format also works inside a JSON code block. Replace the placeholder with your own key.

{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": {
        "x-api-key": "YOUR_21ST_API_KEY"
      }
    }
  }
}
  1. 01Add a custom MCP and choose Import JSON.
  2. 02Paste the configuration and choose Read configuration.
  3. 03Review the detected settings and choose Apply to form.
  4. 04Check your key, test the connection and save it. This hosted server does not need an npx package.

Access and tools

The remote server supplies the tool list, so this connection is not restricted to reading. Review write actions and paid generation before approving them. Your 21st account determines which features you can access.

Official setup

Related articles