Skip to content
Agent Search Engine.
Submit a tool
Menu

Record · 21st-magic-mMCP serverCosts not checkedRecord checked Sep 23, 2026

21st MCP (Magic MCP)

Search and publish React and Tailwind components from your AI editor through 21st.dev's MCP server.

Visit 21st MCP (Magic MCP) →View repository

Sources and review

Checked against public documentation on . Suitability guidance is our editorial judgment; this is not a performance benchmark or an endorsement.

Best for

Front-end work in an AI editor where you want existing React and Tailwind components pulled in rather than written from scratch.

Avoid if

You need it without an account: the server requires a 21st.dev API key, and generation tools appear only when AI access is enabled.

About 21st MCP (Magic MCP)

21st.dev's MCP server, formerly Magic MCP, lets coding agents in Cursor, Claude Code, Windsurf and other clients search a library of more than 10,000 React and Tailwind components and publish their own; generation tools appear when AI access is enabled on the account. It is a hosted HTTP server authenticated with a 21st.dev API key. The open-source @21st-dev/magic package is now a thin proxy that keeps older configurations working.

21st MCP (Magic MCP) is listed in this index written primarily in TypeScript, with 6.3k stars on GitHub. Its latest recorded repository push was in September 2026; that is not an ASE editorial review date.

Before connecting: access and data

This record's specific permissions have not been reviewed by ASE. Read the publisher's documentation before copying setup or connecting.

  • List the accounts, files and services the enabled tools can read, change or execute. Check your actual credentials and discovered tools.
  • Use narrowly scoped credentials and read-only mode where supported. Review proposed writes before approving them; a generated configuration does not apply these limits for you.
  • Local launch is not local-only data processing. External services receive requests, and your client may pass tool results to its model provider. Check both destinations before sharing private data.
  • Keep keys and browser session files out of shared config, repositories and screenshots. Know how to disconnect the server and separately revoke its credentials or account sessions.

Read the setup guide →

Install

npx @21st-dev/cli@latest init --client cursor
For agent buildersMake your product part of the discovery.Explore advertising