TC
ToolCompared
MCP ServerFeatured

Magic MCP Server

by 21st.dev

Generate UI components from natural language inside your IDE.

OfficialTypeScriptDesign Tools
View RepositoryDocumentation

About Magic

Magic empowers developers to create modern UI components instantly using natural language descriptions. Integrates with Cursor, Windsurf, and VSCode (Cline). Offers a customizable component library inspired by 21st.dev, real-time preview, and full TypeScript and SVGL support.

Tags

ui-generationcomponentsidereact

How to install Magic

Add the following entry to your MCP client config (e.g. claude_desktop_config.json or .mcp.json). Refer to the official repository for the exact command, package name, and required environment variables.

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

Example shape only — see the repository for the canonical install command.

Related MCP servers in Design Tools

Figma MCP
Figma

Read frames and components and convert designs to code.

Canva MCP
Canva

Generate, edit, and export Canva designs from chat.

Penpot
Penpot

Open-source design and prototyping platform with native MCP.

Figma Context
Framelink

Simplified Figma layout data for AI coding agents.

← Back to MCP directory