21st.dev Magic MCP Server
Create crafted UI components inspired by top design engineers. Production-ready React components from descriptions.
- Maintained by
- 21st.dev
- Hosting
- Hosted by the vendor
- Authentication
- API key
- Last checked
Magic MCP (@21st-dev/magic) was replaced by the unified 21st MCP; old Magic API keys were reset, so generate a new key at 21st.dev/mcp.
How to connect the 21st.dev Magic MCP server
Pick your AI client and paste the snippet. Swap the YOUR_… placeholders for your own values. New to this? Our guide to how MCP clients and servers fit together explains what each piece does.
Claude Code
claude mcp add --transport http 21st-dev-magic https://21st.dev/api/mcp \
--header 'x-api-key: YOUR_API_KEY'Claude Desktop and claude.ai
Custom connectors in Claude accept OAuth or no-auth servers only.
This server expects an API key in a header, so use Claude Code,
Cursor or VS Code instead.Cursor
{
"mcpServers": {
"21st-dev-magic": {
"url": "https://21st.dev/api/mcp",
"headers": {
"x-api-key": "YOUR_API_KEY"
}
}
}
}VS Code
{
"servers": {
"21st-dev-magic": {
"type": "http",
"url": "https://21st.dev/api/mcp",
"headers": {
"x-api-key": "YOUR_API_KEY"
}
}
}
}Frequently asked questions
What is the 21st.dev Magic MCP server?
It is a Model Context Protocol (MCP) server — a small piece of software that gives AI assistants like Claude a secure, governed connection to 21st.dev Magic. Create crafted UI components inspired by top design engineers. Production-ready React components from descriptions.
Is there an official 21st.dev Magic MCP server?
Yes. The 21st.dev Magic MCP server is an official integration, maintained by the vendor or the Model Context Protocol project, which makes it the safest default for business use. It is maintained by 21st.dev.
Is the 21st.dev Magic MCP server hosted, or do I run it myself?
It is hosted. 21st.dev Magic runs the endpoint at https://21st.dev/api/mcp, so there is nothing to install: you add the URL to your AI client and supply an API key.
Do I need an API key for the 21st.dev Magic MCP server?
Yes. The hosted server expects an API key from your 21st.dev Magic account, sent in the x-api-key header. Store it in your client's secret settings rather than pasting it into shared config files.
What can an AI assistant actually do with 21st.dev Magic?
Through this server an assistant can work with ui components, react, design system, code generation — reading from and acting on 21st.dev Magic directly instead of you copy-pasting between windows. What you allow it to do is controlled by the permissions you grant.
How do I set this up for my business?
The setup section above has copy-paste config for Claude Code, Claude Desktop, Cursor and VS Code. If you want it rolled out across a team with permissions, governance and support handled, that is what Crox's Build engagement covers.
New to MCP? Start with our plain-English guide to the Model Context Protocol or see how to connect AI to your business tools without writing code .
Want this connected to your business — with governance handled?
Crox maps your processes, connects AI to the tools you already use, and keeps it working as models change. Start with a readiness assessment or talk to us about a build.