21st.dev Magic MCP
OfficialGenerate beautiful, modern UI components from natural-language descriptions inside your IDE.
Add to your client
Copy the config for your MCP client and paste it into its config file.
npx @21st-dev/cli@latest install <client> --api-key <key>Paste into ~/Library/Application Support/Claude/claude_desktop_config.json
{
"mcpServers": {
"21st-dev-magic-mcp": {
"command": "npx",
"args": [
"-y",
"@21st-dev/magic@latest",
"API_KEY=\"your-api-key\""
]
}
}
}Step-by-step guides: Add to Claude Desktop · Add to Cursor · Add to Windsurf
Before you start
- Node.js (latest LTS version recommended)
- One of the supported IDEs: Cursor, Windsurf, or VSCode (with Cline extension)
- A 21st.dev Magic API key generated at https://21st.dev/magic/console
About 21st.dev Magic MCP
Magic Component Platform (MCP) is an AI-powered tool for generating modern UI components from natural-language descriptions directly inside supported IDEs. Type /ui in your AI agent's chat, describe the component, and Magic instantly builds a polished, fully customizable component inspired by 21st.dev's library and integrates it into your project. It supports Cursor, Windsurf, VSCode, and VSCode + Cline (Beta), provides real-time preview and full TypeScript support, and includes SVGL integration for professional brand assets and logos.
Tools & capabilities (4)
21st_magic_component_builderCreates a new, polished UI component from a natural-language description and adds it to your project (the `/ui` create workflow).
21st_magic_component_inspirationFetches UI component inspiration and pre-built, customizable components from the 21st.dev library.
21st_magic_component_refinerImproves and refines existing UI components with advanced features and enhancements.
logo_searchSearches and integrates professional brand assets and logos via SVGL.
When to use it
- Quickly scaffolding modern React/TypeScript UI components from plain-English descriptions
- Building a responsive navigation bar, forms, or other UI elements without writing them from scratch
- Drawing on the 21st.dev community component library for inspiration and ready-made patterns
- Adding professional brand logos and icons to a project via SVGL
- Enhancing existing components with animations and advanced features
Security notes
Requires a 21st.dev Magic API key generated at https://21st.dev/magic/console. In the primary manual config the key is passed as a command-line argument (API_KEY="your-api-key"); the VS Code setup instead reads it from an env var via a prompted input. Magic AI Agent only writes or modifies files related to the components it generates.
21st.dev Magic MCP FAQ
How does Magic AI Agent handle my codebase?
Magic AI Agent only writes or modifies files related to the components it generates. It follows your project's code style and structure and integrates with your existing codebase without affecting other parts of your application.
Can I customize the generated components?
Yes. All generated components are fully editable and come with well-structured code, so you can modify styling, functionality, and behavior like any other React component.
What happens if I run out of generations?
If you exceed your monthly generation limit you'll be prompted to upgrade your plan. You can upgrade at any time, and existing components remain fully functional.
Is there a limit to component complexity?
Magic AI Agent can handle components of varying complexity, from simple buttons to complex interactive forms. For best results, break down very complex UIs into smaller, manageable components.
Alternatives to 21st.dev Magic MCP
Compare all alternatives →
Popular community server that feeds Figma layout data to coding agents via a Figma API token.
Give AI assistants full access to shadcn/ui v4 components, blocks, demos, and metadata across React, Svelte, Vue, and React Native.
Official MiniMax server for TTS, voice cloning, music, image, and video generation.
Compare 21st.dev Magic MCP with: