PlugWiki
magic-mcp logo

Magic MCP (21st.dev): Setup for Claude Code, Cursor and Other Apps

Official · by 21st.devLocal
Getnpm@21st-dev/magic21st-dev/magic-mcp
Tools
7
5 read · 2 change
Stars
6.3K
on GitHub
Works in
12
apps
Risk
Low
read only
Auth
API key

Lets your coding assistant search UI components from 21st.dev and generate new React and Tailwind UI.

Magic MCP is now part of the 21st MCP from 21st.dev. This package stays on npm only so old setups keep working, and it passes every request to the 21st MCP server. It needs a 21st.dev API key, and the old Magic keys were reset, so make a new one. For a fresh setup, the README recommends the 21st CLI or the hosted address instead of this package.

Good for

  • Frontend developers who want the assistant to find ready-made React components
  • People who still have a Magic MCP config and want it to keep working

Works in

12 should work

Tap an app to see how to set it up and any known problems.

Install magic MCP

Claude Code

  1. 1

    Copy this prompt.

    Add the magic MCP server to Claude Code. Run this command:

claude mcp add magic -e TWENTY_FIRST_API_KEY=YOUR_21ST_API_KEY -- npx -y @21st-dev/magic@latest

Ask me for TWENTY_FIRST_API_KEY and only put the values in that config, nowhere else.

Then check that it loaded and tell me if I need to sign in or restart.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

This package only forwards requests to the 21st MCP. For a new setup, the README recommends running npx @21st-dev/cli@latest init or using the hosted 21st address.

From the project README. Source.

Tools

  • Searches components, themes and templates

    Searches the 21st catalog of components, themes and templates.

    Try: “Search 21st.dev for a pricing table component.”

    Network · search

  • Gets the code for a component

    Retrieves the code for a component. Some code is paid.

    Try: “Get the code for that pricing table.”

    Network · get_component

  • Generates new UI

    Creates UI from your prompt. It only shows up when AI access is on for your account.

    Try: “Generate a signup form with a dark theme.”

    Write · generate

  • Refines a generated design

    Improves an earlier generation. It only shows up when AI access is on.

    Try: “Make the signup form more compact.”

    Write · iterate_generation

  • Shows design inspiration

    Returns component inspiration for a design idea.

    Try: “Show me inspiration for a hero section.”

    Network · get_inspiration

  • Finds a company logo

    Searches for a logo, one query per call.

    Try: “Find the GitHub logo.”

    Network · search_logo

  • Shows your usage and AI access

    Reports your usage, including whether AI generation is enabled.

    Try: “Is AI generation turned on for my account?”

    Network · get_usage

Read from the source code

Permissions

low risk · 3 things to watch

Low risk

It sends your prompts and component requests to 21st.dev and returns code, and its listed tools search and generate rather than edit your files. Keep the API key private.

What it can do

  • Read your data
  • Create and change things
  • Delete things
  • Read-only mode

Watch out for

  • Old Magic API keys no longer work

    Make a new key at 21st.dev/mcp. An old config starts working again once it has a fresh key.

  • Your requests go to 21st.dev

    This package is a proxy. Every message is forwarded to the 21st MCP server, so do not include secrets in prompts.

  • AI generation may need a paid plan

    The README says the generate tools only appear when AI access is enabled on your account. Without it, use search and get component.

Security advisories

No published security advisories as of Nov 1, 2026.

Technical details
Talks to21st.dev servers (every request is forwarded there)
Scopes

  • 21st.dev API key

Questions

Why did my old Magic MCP stop working?

Old Magic API keys were reset. Make a new key at 21st.dev/mcp and put it in your config, and the package works again as a proxy.

How is this different from the 21st.dev server?

This package is a small local proxy that forwards to the same service. The hosted 21st.dev server connects directly and is what the README recommends for new setups.

Do I need an API key?

Yes. Get a free key at 21st.dev/mcp. The package reads it from an environment variable or from a command argument.

Is it official?

Yes. It is published by 21st.dev.

Does it generate code for free?

Search and get component work without AI access. The README says generation only appears when AI access is enabled for your account, so check your usage first.

Which tool names do the old prompts use?

The old names still work and map to new ones. For example, the old component builder maps to generate, and the logo search maps to search_logo.

Does the tool list on this page show every tool?

No. These 7 tools are the ones the README names. It says the current 21st server offers many more, such as catalog search, bookmarks and team libraries, and that you see the full list for your account after you connect.

Information

updated Nov 2, 2026

Publisher
21st.dev (official)
Package
@21st-dev/magic
Registry
npm
Transport
stdio
Auth
API key
Version
0.2.3
License
ISC
Last commit
Sep 9, 2026
Open issues
6

WebsiteGitHubnpmChangelogIssues

Other 21st.dev Magic MCP servers

See all

Sources

Docs, issue trackers and discussions this page is built from. Issues, quotes and findings above link to their own source.

Show all 1
  1. Magic MCP README · github.com

Facts from the official MCP registry, GitHub, npm, PyPI and the Docker catalog. Updated Nov 2, 2026.