drio
Open app

21st.dev Magic AI Agent

Source

It's like v0 but in your Cursor/WindSurf/Cline. 21st dev Magic MCP server for working with your frontend like Magic

Catalog onlyCatalog onlySTDIO

Overview

Magic AI Agent is an AI-driven tool designed to assist developers in creating modern UI components through natural language descriptions, streamlining the UI development process.

To use Magic AI Agent, integrate it with your preferred IDE (Cursor, Windsurf, or VSCode with Cline) and describe the UI component you need in the chat by typing /ui followed by your description.

  • AI-Powered UI Generation: Create components using natural language. - Multi-IDE Support: Works with Cursor, Windsurf, and VSCode. - Modern Component Library: Access a collection of customizable components. - Real-time Preview: Instantly view components as they are created. - TypeScript Support: Ensures type-safe development. - SVGL Integration: Access professional brand assets and logos.
  1. Rapidly generating UI components for web applications.
  2. Enhancing existing components with new features and animations.
  3. Streamlining the development workflow in collaborative projects.

Add to your AI client

Use these steps to connect 21st.dev Magic AI Agent in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

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

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

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

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

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

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "magic-mcp-21st-dev": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-magic-mcp-21st-dev"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

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

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

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

FAQ

How does Magic AI Agent handle my codebase?

It modifies only the files related to the generated components, maintaining your project's code style.

Can I customize the generated components?

Yes! All components are fully editable and can be modified like any other React component.

What happens if I run out of generations?

You will be prompted to upgrade your plan to continue generating components.

Is there a limit to component complexity?

The agent can handle various complexities, but it's best to break down very complex UIs into smaller components.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":1246,"uuid":"a9cde3d6-a186-47b2-9575-7abb6021b2a4","name":"magic-mcp","title":"21st.dev Magic AI Agent","description":"It's like v0 but in your Cursor/WindSurf/Cline. 21st dev Magic MCP server for working with your frontend like Magic","avatar_url":"https://avatars.githubusercontent.com/u/199367026?v=4","created_at":"2025-02-20T14:09:50.033Z","updated_at":"2025-02-23T07:20:28.433Z","status":"created","author_name":"21st-dev","author_avatar_url":"https://avatars.githubusercontent.com/u/199367026?v=4","tags":"[]","category":"developer-tools","is_featured":true,"sort":1,"url":"https://github.com/21st-dev/magic-mcp","target":"_self","content":"$29","summary":"$2a","img_url":"https://camo.githubusercontent.com/def584ae0888afdd28ea5ccbe9b4bab468fecbeda70c3170868b1990c0d9d676/68747470733a2f2f323173742e6465762f6d616769632d6167656e742d6f672d696d6167652e706e67","type":null,"metadata":"{\"star\":\"2377\",\"license\":\"\",\"language\":\"TypeScript\",\"is_official\":false,\"latest_commit_time\":\"2025-05-02 02:43:14\"}","user_uuid":null,"tools":null,"sse_url":null,"sse_provider":null,"sse_params":null,"is_official":false,"server_command":null,"server_params":null,"server_config":null,"allow_call":false,"is_innovation":false,"is_dxt":false,"dxt_manifest":null,"dxt_file_url":null,"is_audit":false},"randomProjects":[],"currentServerKey":"$undefined"}]]}]

Developer tools