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.
Connect
- 1Connect 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.
- 2Or add it to Codex or the API
codex mcp add 21st-magic --url https://21st.dev/api/mcp --bearer-token-env-var API_KEY_21ST
Configs are generated from the publisher's documented endpoint. Check their docs for plan requirements and scopes. New to this? Read the step-by-step tutorial.
Tools 7
searchget_componentgenerateiterate_generationget_inspirationsearch_logoget_usageThings to ask
- “Find a pricing table component”
- “Generate a modern login form with social buttons”
- “Search for a logo of Stripe”
- “Show me hero section inspiration”