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

Data as of

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

VS Code: 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 VS Code

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

  • Generate a UI component from a description in an editor chat.
  • Preview a component while iterating on its design.

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

  • 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 VS Code configuration

  1. Choose VS Code configuration scope

    For 21st.dev Magic AI Agent, open Workspace: .vscode/mcp.json. Merge into servers; preserve existing inputs.

  2. Add 21st.dev Magic AI Agent to VS Code

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

  3. Check 21st.dev Magic AI Agent in VS Code

    21st.dev Magic AI Agent: Start in VS Code’s MCP controls; inspect output and trust prompts.

Config file · Workspace: .vscode/mcp.json

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

Troubleshooting 21st.dev Magic AI Agent in VS Code

  • Make npx @21st-dev/magic@latest (Node.js/npm) available in the workspace, container, or remote environment hosting 21st.dev Magic AI Agent. Start through VS Code's MCP controls; inspect output and trust prompts.
  • For 21st.dev Magic AI Agent, keep API_KEY out of version control; VS Code documents input variables and secret handling.
  • 21st.dev Magic AI Agent uses stdio here: VS Code 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 VS Code troubleshooting lives in the /clients/vscode guide.

21st.dev Magic AI Agent — details. VS Code guide

Frequently asked questions

For 21st.dev Magic AI Agent, edit workspace .vscode/mcp.json. VS Code requires servers rather than mcpServers; preserve the displayed type on each entry.

VS Code's magic-mcp example uses stdio.

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

VS Code'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 documented workflow uses /ui followed by a component description in the agent chat, then invokes Magic through the editor.

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