1. Home
  2. 21st.dev Magic AI Agent
  3. 21st.dev Magic AI Agent for Windsurf: Setup & Config

Data as of

21st.dev Magic AI Agent for Windsurf: Setup & Config

Windsurf: 21st.dev Magic AI Agent turns natural-language requests into customizable UI components inside supported coding tools.

What you can do with 21st.dev Magic AI Agent in Windsurf

Generate customizable UI components in your editor with previews and 21st.dev design inspiration.

  • Customize generated React component styling and behavior.
  • Use SVGL logos and brand assets in interface work.

Before you start: 21st.dev Magic AI Agent in Windsurf

  • Node.js, with the latest LTS recommended
  • A supported IDE or MCP client
  • An API key from the Magic console

This follows the README's manual VS Code server configuration. Other supported clients also have installation instructions. Named MCP tools are not stated in the README.

21st.dev Magic AI Agent Windsurf configuration

  1. Choose Windsurf configuration scope

    For 21st.dev Magic AI Agent, open macOS/Linux: ~/.codeium/windsurf/mcp_config.json Windows: %USERPROFILE%\.codeium\windsurf\mcp_config.json. Merge into mcpServers; remote endpoints use serverUrl.

  2. Add 21st.dev Magic AI Agent to Windsurf

    Use the magic-mcp entry below in mcpServers. Keep 21st.dev Magic AI Agent's documented stdio connection fields and your other Windsurf entries.

  3. Check 21st.dev Magic AI Agent in Windsurf

    21st.dev Magic AI Agent: Refresh MCP in Windsurf settings and inspect Cascade’s tools.

Config file · macOS/Linux: ~/.codeium/windsurf/mcp_config.json

Windows: %USERPROFILE%\.codeium\windsurf\mcp_config.json

JSON
{
  "mcpServers": {
    "magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@latest"
      ],
      "env": {
        "API_KEY": "<your 21st.dev Magic API key>"
      }
    }
  }
}

Troubleshooting 21st.dev Magic AI Agent in Windsurf

  • Check npx @21st-dev/magic@latest (Node.js/npm) on the machine running Windsurf's MCP integration for 21st.dev Magic AI Agent; refresh MCP and inspect Cascade's tools.
  • Check API_KEY for 21st.dev Magic AI Agent; do not bypass a Windsurf permission error with a broad administrator token.
  • 21st.dev Magic AI Agent uses stdio here: Windsurf must keep the configured process running; protocol output belongs on stdout and diagnostics on stderr.
  • Known limitation: Requires an API key and a supported development environment.
  • Known limitation: The README labels the product beta and some enhancement features as coming soon.
  • Known limitation: Generation limits are mentioned without exact allowances.
  • General Windsurf troubleshooting lives in the /clients/windsurf guide.

21st.dev Magic AI Agent — details. Windsurf guide

Frequently asked questions

Windsurf reads 21st.dev Magic AI Agent under mcpServers in ~/.codeium/windsurf/mcp_config.json on macOS/Linux; Windows uses %USERPROFILE%\.codeium\windsurf\mcp_config.json.

Windsurf's magic-mcp example uses stdio.

21st.dev Magic AI Agent's Windsurf configuration invokes npx @21st-dev/magic@latest (Node.js/npm).

Windsurf's 21st.dev Magic AI Agent example references API_KEY. Check these names if startup or authentication fails; the example alone does not distinguish required from optional values.

Yes. Generated components are editable, including their presentation, functionality, and behavior.

The feature list marks advanced component enhancement and animation improvements as coming soon.