Advertise
MCP.so
Sign In

21st.dev Magic AI Agent MCP ServerFeatured

@21st-dev

RepositoryHomepage

Basic information

Category

AI & Agents

Last updated

Transports

stdio

Author

21st-dev

About 21st.dev Magic AI Agent MCP Server

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

Before you connect

Documentation reviewed 2026-10-25

When to choose this server

Magic MCP has moved to the unified 21st MCP. The old package now acts as a compatibility proxy rather than a separate Magic backend.

Setup and limitations

The upstream README says old Magic API keys were reset. Obtain a new key from 21st.dev/mcp and follow the current 21st client setup. If an old configuration connects but authentication fails, check the key migration before changing transports.

These notes check the linked documentation, not a live authenticated connection. Suggested checks are steps for you to run.

Read upstream documentationCompare related servers

21st.dev Magic AI Agent MCP Server config

Add this server to your MCP-compatible client using the configuration below.

{
  "mcpServers": {
    "magic-mcp": {
      "command": "npx",
      "args": [
        "@21st-dev/cli@latest",
        "install",
        "<client>",
        "--api-key",
        "<key>"
      ]
    }
  }
}

21st.dev Magic AI Agent MCP Server tools

Tool list not available yet

This listing does not currently have a tool list to display. This does not mean the server has no tools; check its documentation for supported capabilities.

Fetch the live tool list by running this server in a temporary sandbox using the button above.

Overview

What is 21st.dev Magic AI Agent?

An AI-powered MCP server that creates modern UI components from natural language descriptions. It integrates with Cursor, Windsurf, and VSCode (including Cline) to generate polished, customizable React components in your IDE.

How to use 21st.dev Magic AI Agent?

Generate an API key at 21st.dev Magic Console, then install via one CLI command (npx @21st-dev/cli@latest install <client> --api-key <key>) or manually add an MCP config entry. In your AI Agent’s chat, type /ui followed by a description of the component you need.

Key features of 21st.dev Magic AI Agent

  • AI-powered UI generation from natural language descriptions.
  • Multiple IDE integrations (Cursor, Windsurf, VSCode, Cline).
  • Access to a library of pre-built, customizable components.
  • Real-time preview of components as you create them.
  • Full TypeScript support for type‑safe development.
  • SVGL integration for professional brand assets and logos.

Use cases of 21st.dev Magic AI Agent

  • Rapidly generate navigation bars, forms, or buttons by describing them.
  • Add modern UI patterns to an existing project without manual coding.
  • Prototype UI variations quickly inside your IDE.
  • Enhance existing components with advanced features (coming soon).

Frequently asked questions

1

How does Magic AI Agent handle my codebase?

It only writes or modifies files related to the components it generates, following your project’s code style and structure without affecting other parts of your application.

2

Can I customize the generated components?

Yes, all generated components are fully editable with well‑structured code, just like any other React component in your project.

3

What happens if I run out of generations?

You will be prompted to upgrade your plan if you exceed your monthly limit. Existing components remain fully functional.

4

Is there a limit to component complexity?

Magic AI Agent can handle components of varying complexity, from simple buttons to complex interactive forms. For best results, break very complex UIs into smaller components.

5

What runtime or dependencies are required?

Node.js (latest LTS recommended) and one of the supported IDEs (Cursor, Windsurf, or VSCode with Cline). The server only requires an API key from 21st.dev.

Comments

More AI & Agents MCP servers

L

Legion MCP

faulkj

MCP-native LLM councils for debates, juries, blind panels, voting, refinement, and custom multi-model deliberation.

1

Gemina

Gemina Tech Ltd.

Extract, search and tag any document — invoices, receipts, contracts, forms, or your own templates. 13 tools, one sign-in (OAuth 2.1) or API key, free FileTag tier, data residency in the EU, US, Israel or Asia.

Plainpaper

Plainpaper

The AI marketing canvas for Claude and MCP agents. Your agent drafts campaigns as cards on a shared board, briefed by your brand rules, approved by you.

kosa8

kosa8ai

Secure infrastructure for AI agents: sealed microVM sandboxes you can checkpoint, rewind and fork.

Verand

verand-ai

Verand for your site, from your AI assistant: content built on your expertise, daily Google rankings, where ChatGPT, Gemini, Perplexity and Claude cite you, and compliance checks before anything publishes.

Advertise