Magic Mcp

It's like v0, but in your Cursor / Claude Code / Windsurf: search 10,000+ React/Tailwind components, generate new UI with AI, and publish your own — right from your editor. Magic MCP is now the 21st MCP; this package keeps old configs working. Setup: 21st.dev/mcp

Open SourceLive

0 0

Add to your client

Add to Cursor Add to VS Code

Claude Code — run this in your terminal:

claude mcp add --transport http 21st https://21st.dev/api/mcp --header 'x-api-key: YOUR_X_API_KEY'

Claude Desktop and other clients: paste this into the configuration file

{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": {
        "x-api-key": "YOUR_X_API_KEY"
      }
    }
  }
}

After adding, fill in: x-api-key

Built from the configuration example in the project's README. The buttons open the app on your computer, which asks you to confirm before anything is added.

This remote server asks for a sign-in or a key before it lists its tools, so we cannot show them here.

Install

npx @21st-dev/cli@latest init --client cursor # or: claude | vscode | windsurf | codex

claude plugin marketplace add 21st-dev/magic-mcp # then: /plugin install 21st

Copied from the project's README. Read what it does before you run it.

README scanSafe

Nothing risky found in the commands its README asks you to run.

We scan the README only, not the code. A clean result is not proof of safety. How we scan

Alternatives to Magic Mcp

Listings of the same kind that share the most topics, most-starred first.

Reactive Resume

A one-of-a-kind resume builder that keeps your privacy in mind. Completely secure, customizable, portable, open-source and free forever. Try it out today!

46k