Set up Magic MCP (21st.dev) in Cursor

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

Locate the config file

Cursor reads MCP server configuration from the following file:

.cursor/mcp.json

Create this file if it does not already exist.

Add the configuration

Add the following to your Cursor config file:

json

{
  "mcpServers": {
    "magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "YOUR_TWENTY_FIRST_API_KEY"
      }
    }
  }
}

Set up environment variables

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

TWENTY_FIRST_API_KEYRequired

21st.dev API key

Verify it works

Restart Cursor. 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 Code VS Code Windsurf Claude Desktop Continue

← Back to Magic MCP (21st.dev)