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
The 21st MCP server (formerly Magic MCP) brings a searchable library of over 10,000 React and Tailwind components directly into AI coding assistants like Cursor, Claude Desktop, and Windsurf. Developers can search the component catalog, generate new user interface elements with AI assistance, and access both free and premium UI resources without leaving their editor. The server operates as an HTTP-based MCP endpoint that exposes tools for component search, UI generation with variants, bookmarks, team libraries, and publishing custom components back to the 21st.dev platform.
Key Features
Use Cases
- 01Rapidly prototype interfaces by searching thousands of pre-built React components while coding
- 02Generate custom UI components from natural language prompts without context-switching to browsers
- 03Build design systems by discovering and bookmarking reusable Tailwind components
- 04Collaborate with team members through shared component libraries accessible in-editor
- 05Migrate from the deprecated Magic MCP to the unified 21st platform with zero config changes
- 06Publish your own React components to the 21st.dev catalog directly from your development environment
Related MCP Servers
View moremarkitdown
Python tool for converting files and office documents to Markdown.
firecrawl
The context API to search, scrape, and interact with the web at scale. 🔥
prompts.chat
f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.
langflow
Langflow is a powerful tool for building and deploying AI-powered agents and workflows.
magic-mcp — FAQ
What is the 21st MCP server?+
The 21st MCP server (previously Magic MCP) is an HTTP-based Model Context Protocol server that connects AI coding assistants to a catalog of over 10,000 React and Tailwind components. It enables component search, AI-driven UI generation, and publishing workflows directly within editors like Cursor, Claude Desktop, and Windsurf.
How do I install the 21st MCP server in Cursor or Claude Desktop?+
Run 'npx @21st-dev/cli@latest init --client cursor' (or replace 'cursor' with 'claude', 'vscode', 'windsurf', or 'codex'). Alternatively, manually add the HTTP server configuration to your MCP settings JSON with the URL 'https://21st.dev/api/mcp' and your API key in the headers.
Do I need an API key for the 21st MCP?+
Yes, you must obtain a free API key from 21st.dev/mcp. Old Magic MCP API keys were reset and no longer work; you need to generate a fresh key from the new platform.
Which AI clients support the 21st MCP server?+
The 21st MCP works with Cursor, Claude Desktop, Visual Studio Code (with MCP support), Windsurf, and Codex. The CLI installer supports all these clients with dedicated setup commands.
Is the 21st MCP server free to use?+
The MCP server connection is free with a registered API key. The catalog includes both free community components and paid premium components; search and generation tools are available, though some advanced features or premium code may require payment.
Will my old Magic MCP configuration still work?+
Yes, the @21st-dev/magic package now acts as a compatibility proxy that forwards all requests to the unified 21st MCP server. You must replace your old API key with a new one from 21st.dev/mcp, but your existing configuration will continue functioning.
How do I install magic-mcp?+
Open the source repository on GitHub and follow its README. magic-mcp is a mcp server — MCP Agents Market links you directly to the official repo.
Is magic-mcp free?+
magic-mcp is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.