Back
Marketplace/21st.dev Magic

TL;DR

21st.dev Magic is a Design MCP server that lets Claude Code, Cursor, Windsurf and any MCP-compatible AI agent create crafted UI components inspired by the best design engineers. Install in 1 minute with mcpizy install 21st-dev.

✨

21st.dev Magic

Verified

Design

Last updated May 30, 2026 · By MCPizy team

Create crafted UI components inspired by the best design engineers. AI-powered component generation.

Install 21st.dev Magic

Via MCPizy CLI (recommended):
mcpizy install 21st-dev
Or run directly:
npx -y @21st-dev/magic-mcp
View on GitHub

Works with

Claude Code
Claude Desktop
Cursor
Windsurf
VS Code + Copilot
Any MCP Client

More Design MCPs

📊

SlideSpeak

Create presentations and PowerPoints using AI. Generate professional slides from text prompts.

📈

ECharts

Generate beautiful interactive charts using Apache ECharts. Bar, line, pie, scatter, and more.

📉

Chart (AntV)

Generate visual charts using AntV visualization library. Data-driven chart creation.

🎨

FlyonUI

Build modern production-ready UI blocks and components. Tailwind-based design system.

Alternatives to 21st.dev Magic

If 21st.dev Magic doesn't fit your stack, these Design MCP servers solve similar problems.

🎨

Figma

Read Figma files, components, and design tokens

🧊

Blender

3D modeling and rendering via API

✏️

Excalidraw

Architecture and whiteboard diagrams

Key Takeaways

  • 21st.dev Magic exposes an MCP interface for design workflows in Claude Code, Cursor and Windsurf.
  • No authentication required — works out of the box once installed.
  • Install in 1 command: mcpizy install 21st-dev — config written to your client automatically.
  • Free and open source (GitHub source linked above) — verified compatible with every MCP client (Claude Code, Claude Desktop, Cursor, Windsurf, VS Code + Copilot).
  • Best use case: automate design workflows from your AI agent without leaving the editor.

Frequently asked questions

What is the 21st.dev Magic MCP server?

The 21st.dev Magic MCP server is an Design Model Context Protocol server that lets Claude Code, Cursor, Windsurf, VS Code with Copilot, and other MCP-compatible AI agents create crafted UI components inspired by the best design engineers. It exposes 21st.dev Magic's capabilities as tools the AI can call directly from your editor or CLI.

How do I install 21st.dev Magic MCP with Claude Code?

The fastest way is the MCPizy CLI: run `mcpizy install 21st-dev` and MCPizy will add the server to your `.claude.json` automatically. You can also install it manually by adding an entry under `mcpServers` in `.claude.json` with the command `npx -y @21st-dev/magic-mcp` and restarting Claude Code.

Is 21st.dev Magic MCP free?

Yes. The 21st.dev Magic MCP server is free and open source (see the GitHub repository linked on this page). You may still need a 21st.dev Magic account or API key to connect the server to the underlying service, but the MCP layer itself has no MCPizy subscription cost.

Does 21st.dev Magic MCP work with Cursor and Windsurf?

Yes. Any MCP-compatible client works — including Claude Code, Claude Desktop, Cursor (via `.cursor/mcp.json`), Windsurf, VS Code with Copilot Chat, and custom agents built on the MCP SDK. The same install command targets all of them; only the config file path differs.

Manage all your MCPs in one place

Monitor usage, track costs, and discover new MCPs.

Get Started Free
What can I do with 21st.dev Magic MCP?

Once installed, your AI agent can create crafted UI components inspired by the best design engineers directly inside your conversation. Typical use cases include asking Claude Code or Cursor to run 21st.dev Magic operations, inspect results, chain 21st.dev Magic with other MCP servers (see our Workflow Recipes), and automate repetitive design tasks without leaving your editor.