# 21st MCP (Magic MCP) (MCP Server)

> Search and generate React/Tailwind UI components from your editor

- Type: MCP server
- Publisher: 21st.dev (official)
- Categories: Design, Development
- Website: https://github.com/21st-dev/magic-mcp
- Docs: https://21st.dev/mcp
- Source: https://github.com/21st-dev/magic-mcp
- Transport: streamable-http
- Server URL: https://21st.dev/api/mcp
- Sign-in: api-key
- Environment variables: API_KEY_21ST
- GitHub stars: 5956
- Listed: 2025-02-19

## About

21st.dev's MCP server (successor to Magic MCP) for searching thousands of React/Tailwind components, fetching component code and generating UI with AI. It is a hosted HTTP server; the legacy @21st-dev/magic npm package remains as a stdio proxy.

## Install

1. **Connect it in ChatGPT** Turn on Developer mode in ChatGPT (Settings → Security and login), open Plugins, select + and paste https://21st.dev/api/mcp as the MCP server URL. Add it to a chat from the composer's tools menu.

2. **Or add it to Codex or the API**

   Codex CLI:

   ```bash
   codex mcp add 21st-magic --url https://21st.dev/api/mcp --bearer-token-env-var API_KEY_21ST
   ```

   config.toml:

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

   Responses API:

   ```python
   import os
   from openai import OpenAI
   
   client = OpenAI()
   
   response = client.responses.create(
       model="gpt-6-astra",
       tools=[{
           "type": "mcp",
           "server_label": "21st_magic",
           "server_url": "https://21st.dev/api/mcp",
           "authorization": os.environ["API_KEY_21ST"],
           "require_approval": "never",
       }],
       input="Find a pricing table component",
   )
   print(response.output_text)
   ```

## Tools

- `search`
- `get_component`
- `generate`
- `iterate_generation`
- `get_inspiration`
- `search_logo`
- `get_usage`

## Example prompts

- "Find a pricing table component"
- "Generate a modern login form with social buttons"
- "Search for a logo of Stripe"
- "Show me hero section inspiration"

## Related

- [Chrome DevTools MCP](https://chatgptplugins.directory/mcp/chrome-devtools.md): Let coding agents control and debug a live Chrome browser
- [Playwright MCP](https://chatgptplugins.directory/mcp/playwright.md): Browser automation for agents via Playwright accessibility snapshots
- [GitHub](https://chatgptplugins.directory/mcp/github.md): Manage repos, issues, pull requests and Actions from your AI agent
- [Context7](https://chatgptplugins.directory/mcp/context7.md): Pull up-to-date, version-specific library docs into your coding agent
- [Excalidraw](https://chatgptplugins.directory/mcp/excalidraw.md): Draw hand-drawn Excalidraw diagrams live inside ChatGPT, Claude and VS Code
- [Supabase](https://chatgptplugins.directory/mcp/supabase.md): Manage Supabase databases, migrations, edge functions and logs

---
Source: https://chatgptplugins.directory/mcp/21st-magic · Index: https://chatgptplugins.directory/llms.txt · Independent and community-run. Not affiliated with or endorsed by OpenAI. ChatGPT is a trademark of OpenAI.