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

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

Locate the config file

Continue reads MCP server configuration from the following file:

~/.continue/config.yaml

Create this file if it does not already exist.

Add the configuration

Add the following to your Continue config file:

yaml

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

← Back to Magic MCP (21st.dev)