StackMCP

Set up Magic MCP (21st.dev) in VS Code

Generate professional React and Tailwind UI components using 21st.dev's component library and AI builder from your editor.

1

Locate the config file

VS Code reads MCP server configuration from the following file:

.vscode/settings.json → mcp section

Create this file if it does not already exist. For VS Code, this is inside your workspace .vscode/settings.json file under the mcp section.

2

Add the configuration

Add the following to your VS Code config file:

json
{
  "servers": {
    "magic-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "YOUR_TWENTY_FIRST_API_KEY"
      }
    }
  }
}
3

Set up environment variables

Magic MCP (21st.dev) requires the following environment variables:

TWENTY_FIRST_API_KEYRequired

21st.dev API key

4

Verify it works

Restart VS Code. Magic MCP (21st.dev) should appear in your MCP server list with 4 tools available.

This server adds approximately 2,060 tokens to your context window for tool definitions.

Set up Magic MCP (21st.dev) in other editors

Claude CodeCursorWindsurfClaude DesktopContinue
← Back to Magic MCP (21st.dev)