MCP Directory

How to add 21st.dev Magic MCP to Windsurf

Generate beautiful, modern UI components from natural-language descriptions inside your IDE. Paste the config into ~/.codeium/windsurf/mcp_config.json and restart Windsurf.

Last updated June 14, 2026 · 5.2k★ · stdio · apikey · official

Windsurf 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

  1. 1Open Windsurf → Cascade → the hammer/MCP icon → Configure (or edit ~/.codeium/windsurf/mcp_config.json).
  2. 2Paste the 21st.dev Magic MCP config below.
  3. 3Fill in placeholder secrets, then save.
  4. 4Click Refresh in the MCP panel.
  5. 521st.dev Magic MCP's tools become available to Cascade.

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 Windsurf

21st_magic_component_builder

Creates a new, polished UI component from a natural-language description and adds it to your project (the `/ui` create workflow).

21st_magic_component_inspiration

Fetches UI component inspiration and pre-built, customizable components from the 21st.dev library.

21st_magic_component_refiner

Improves and refines existing UI components with advanced features and enhancements.

logo_search

Searches 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 + Windsurf FAQ

Where is the Windsurf config file?

Windsurf reads MCP servers from ~/.codeium/windsurf/mcp_config.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 Windsurf?

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.

View repo Full 21st.dev Magic MCP page