21st.dev

dev.21stPublished by 21st.devOfficial publisherv1.0.1Updated Oct 24, 2026

Find UI components and themes, retrieve code, and generate with hosted 21st AI when enabled.

VerifiedStreamable HTTPWeb executableDeveloper ToolsMedia & Design

Overview

AI-generated overview

21st.dev MCP lets an assistant search UI components and themes, fetch their code, and generate UI with hosted 21st AI when the account allows it.

What you can do
  • Search and discover UI components and themes on 21st.dev
  • Retrieve component code for use in a project
  • Generate UI with hosted 21st AI, when the account has hosted AI access
When to use it
Useful when building or styling a web interface and you want an assistant to pull ready-made components or themes from 21st.dev, or to generate UI directly, instead of writing markup from scratch.
Requirements
A remote MCP endpoint at 21st.dev over streamable HTTP. Authentication is required for discovery and tool calls: OAuth, or an API key sent in the x-api-key header, created in the 21st.dev account settings. Generation tools appear only if the account has hosted AI access.
Before you install
The API key is a secret sent in the x-api-key header; keep it out of shared logs and configs. Tool calls and discovery require an authenticated account, so usage is tied to that account. Generation depends on hosted AI access, which may be a paid account feature; check the plan before relying on it.

Installation

In SourceWeft

  1. Open 21st.dev in the dashboard and add it to a workspace.
  2. Connect the required credentials. They are stored privately and never shown on public pages.
  3. Enable the server for the chats that should use its tools.

Web executable via Streamable HTTP. Remote servers run from the web runtime once configured in a workspace.

Use with an agent

Paste this prompt into Claude Code, Codex, Cursor or another agent — or into SourceWeft chat. The agent reads this server's install guide, shows you its publisher, endpoint and sign-in, and adds it to your client once you agree. Keys never go into a command.

Read https://sourceweft.com/mcp/dev.21st%2Fmcp/install.md and connect the MCP server it describes to my client. Before changing any config, show me its publisher, endpoint and sign-in method and wait for my OK. Never put an API key in a command or in a file I would commit; ask me where it should come from.

Read the install guide the agent follows

Other MCP clients

Add this to your client's mcpServers config. The client completes OAuth sign-in on first connect.

{
  "mcpServers": {
    "21st-dev": {
      "type": "http",
      "url": "https://21st.dev/api/mcp"
    }
  }
}

Tools

0
This server asks you to sign in, so SourceWeft could not read its tools without an account and has not indexed them. What a connected account sees can depend on that account and its permissions.

Version history

1
  1. v1.0.1LatestSep 16, 2026

Score

56% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

  • Reached in the last 30 daysRequired25 pts
  • Auth declaredRequired10 pts
  • Tools listed15 pts

    Answer tools/list without a credential, or ship a package that starts in a sandbox without one.

  • DescriptionRequired15 pts
  • Logo10 pts

    Publish an icon in the registry entry.

  • Documentation15 pts

    Declare a GitHub repository with a README, or serve resource_documentation in the OAuth protected-resource metadata.

  • LicenseNot applicable

    A hosted service is used under its provider's terms, so no license is expected here. This check is left out of the percentage.