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

Data as of

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

Cursor: 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 Cursor

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

  • Preview a component while iterating on its design.
  • Use SVGL logos and brand assets in interface work.

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

  • 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 Cursor configuration

  1. Choose Cursor configuration scope

    For 21st.dev Magic AI Agent, open Project: .cursor/mcp.json User: ~/.cursor/mcp.json. Merge into mcpServers at project or user scope.

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

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

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

    21st.dev Magic AI Agent: Enable in Cursor’s MCP settings; inspect tools.

Config file · Project: .cursor/mcp.json

User: ~/.cursor/mcp.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 Cursor

  • Cursor must find npx @21st-dev/magic@latest (Node.js/npm) for 21st.dev Magic AI Agent. Enable the project/user entry in MCP settings and inspect its tools.
  • Review API_KEY for 21st.dev Magic AI Agent before sharing project .cursor/mcp.json; project scope travels with the repository.
  • 21st.dev Magic AI Agent uses stdio here: Cursor 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 Cursor troubleshooting lives in the /clients/cursor guide.

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

Frequently asked questions

Cursor's 21st.dev Magic AI Agent entry belongs under mcpServers in .cursor/mcp.json (project) or ~/.cursor/mcp.json (user). Confirm the active scope in MCP settings.

Cursor's magic-mcp example uses stdio.

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

Cursor'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.

The README says changes are confined to files associated with generated components and follow the project's existing structure.

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