How to add 21st.dev Magic MCP to Cursor
Generate beautiful, modern UI components from natural-language descriptions inside your IDE. Paste the config into ~/.cursor/mcp.json and restart Cursor.
Last updated June 14, 2026 · 5.2k★ · stdio · apikey · official
Cursor config for 21st.dev Magic MCP
npx @21st-dev/cli@latest install <client> --api-key <key>{
"mcpServers": {
"21st-dev-magic-mcp": {
"command": "npx",
"args": [
"-y",
"@21st-dev/magic@latest",
"API_KEY=\"your-api-key\""
]
}
}
}Setup steps
- 1Open Cursor → Settings → MCP → Add new MCP server (or edit ~/.cursor/mcp.json directly).
- 2Paste the 21st.dev Magic MCP config below into the "mcpServers" object.
- 3Fill in placeholder secrets, then save.
- 4Cursor reloads MCP servers automatically — check Settings → MCP for a green status dot.
- 5Ask Cursor to use one of 21st.dev Magic MCP's tools to confirm it's connected.
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
What 21st.dev Magic MCP can do in Cursor
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.
Security
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 + Cursor FAQ
Where is the Cursor config file?
Cursor reads MCP servers from ~/.cursor/mcp.json. Paste the 21st.dev Magic MCP config there under the "mcpServers" key and restart the client.
Is 21st.dev Magic MCP safe to use with Cursor?
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.
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.