# 21st.dev MCP server > Search 21st.dev React UI components and themes, fetch their code, and generate new UI from your editor. - Listing: https://mcp.tc/i/21st-dev - Connect: use the server's own URL `https://21st.dev/api/mcp` (OAuth sign-in at the server); clients connect to it directly. The listing link is a page, not an MCP endpoint. - Type: remote (Streamable HTTP) - Auth: OAuth sign-in - Category: [Design, Websites & CMS](https://mcp.tc/c/design) - Vendor: 21st.dev - Homepage: - Repository: - Package: npm `@21st-dev/magic` ## About Connects an MCP client such as Cursor, Claude Code, Windsurf or VS Code to the 21st.dev catalog of React and Tailwind components, themes and templates. You can search the catalog, retrieve component code, and generate new UI with hosted 21st AI when it is enabled on the account. It succeeds the Magic MCP (@21st-dev/magic). The server is hosted at https://21st.dev/api/mcp over streamable HTTP. Users sign in with OAuth, or send an x-api-key header with a key created at 21st.dev/mcp. Generation tools are listed only when hosted AI is enabled for the account. The @21st-dev/magic npm package remains as a stdio proxy for old configurations. ## What it can do - Search the catalog for components, themes and templates - Retrieve component code to adapt in your own project - Generate new UI with hosted 21st AI when enabled - Iterate on earlier generations - Check account usage and whether AI access is enabled ## Example prompts - "Search 21st.dev for a pricing table component with three tiers" - "Get the code for a dark-themed login form from 21st.dev" - "Generate a React dashboard sidebar using 21st" - "Find themes on 21st.dev with a minimal look" ## Install ### Claude Code 1. Run this in a terminal, in your project folder: ```bash claude mcp add --transport http 21st-dev https://21st.dev/api/mcp ``` 2. Start Claude Code, type `/mcp`, pick **21st-dev** and choose **Authenticate**. A browser window opens for the 21st.dev sign-in. Add `--scope user` to make it available in every project, not just this one. ### Claude Desktop 1. Open **Settings → Connectors** and click **Add custom connector**. 2. Name it **21st.dev** and paste this URL: ```url https://21st.dev/api/mcp ``` 3. Click **Add**, then **Connect**, and sign in when 21st.dev asks. Claude Desktop’s JSON config file only starts local servers. Remote servers go through Connectors, and connectors you add on claude.ai show up here too. ### claude.ai 1. Open the connector form on claude.ai. This button fills in the name and URL for you: [Add to claude.ai]() (opens connector settings) 2. Check that the URL reads `https://21st.dev/api/mcp` and click **Add**. 3. Click **Connect** and sign in when 21st.dev asks. Free plans allow one custom connector. On Team and Enterprise plans an owner adds it under **Organization settings → Connectors**. ### ChatGPT 1. On chatgpt.com, open **Settings → Security and login** and turn on **Developer mode**. 2. Go to `chatgpt.com/plugins` and click **+** to create an app for a remote MCP server. 3. Paste `https://21st.dev/api/mcp` as the server URL and choose **OAuth**. ChatGPT sends you to 21st.dev to sign in. Developer mode is available on the web for Plus, Pro, Business, Enterprise and Education accounts. ### Cursor [Add to Cursor]() (opens Cursor) Or add it by hand to `~/.cursor/mcp.json` (all projects) or `.cursor/mcp.json` (this project): `mcp.json`: ```json { "mcpServers": { "21st-dev": { "url": "https://21st.dev/api/mcp" } } } ``` Cursor shows **Needs login** next to the server. Click it to sign in. ### VS Code [Install in VS Code]() (opens VS Code) Or from a terminal: ```bash code --add-mcp '{"name":"21st-dev","type":"http","url":"https://21st.dev/api/mcp"}' ``` Or commit it to the repo in `.vscode/mcp.json`: `.vscode/mcp.json`: ```json { "servers": { "21st-dev": { "type": "http", "url": "https://21st.dev/api/mcp" } } } ``` VS Code asks you to sign in the first time the server starts. ### Devin Desktop 1. Add it to `~/.config/devin/mcp_config.json` (macOS and Linux) or `%APPDATA%\devin\mcp_config.json` (Windows): `mcp_config.json`: ```json { "mcpServers": { "21st-dev": { "serverUrl": "https://21st.dev/api/mcp" } } } ``` 2. Refresh the MCP server list in Cascade and sign in when asked. Devin Desktop is the new name for Windsurf. It reads `serverUrl` (or `url`) for remote servers. ### Codex ```bash codex mcp add 21st-dev --url https://21st.dev/api/mcp codex mcp login 21st-dev ``` Or edit `~/.codex/config.toml` directly: `config.toml`: ```toml [mcp_servers.21st-dev] url = "https://21st.dev/api/mcp" ``` ### Gemini CLI ```bash gemini mcp add --transport http 21st-dev https://21st.dev/api/mcp ``` Then, inside Gemini CLI, run `/mcp auth 21st-dev` to sign in. This adds it to the current project. Add `-s user` to use it everywhere. ### Any client Most clients accept this shape. Some name the URL field differently: `serverUrl` in Devin Desktop, `httpUrl` in Gemini CLI’s settings file. ```json { "mcpServers": { "21st-dev": { "type": "http", "url": "https://21st.dev/api/mcp" } } } ``` Zed puts servers under `context_servers` in its settings. Cline needs `"type": "streamableHttp"`, or it assumes SSE. Client only starts local servers? Bridge it with `npx -y mcp-remote https://21st.dev/api/mcp`. ## Details - Server version: 1.0.1 - Last checked: 2026-10-03 (reachable, asks for credentials) - Listed: 2026-10-03 - Updated: 2026-10-03 --- Source: https://mcp.tc/i/21st-dev (mcp.tc is an independent directory, not affiliated with this server's publisher). Corrections: https://mcp.tc/report