21st.dev Magic

## What can you do with 21st Dev Magic MCP? - **Search the 21st.dev catalog**— find components, themes, or templates by describing what you need with the`search`tool. - **Generate UI components from a prompt**— ask for a React component matching a description and receive ready-to-use code via`generate`. - **Get component inspiration**— retrieve curated component examples for a given use case with`get_inspiration`. - **Look up company logos**— find SVG logos by company name using`search_logo`(one query per call). - **Retrieve paid code**— access premium components you have purchased through the platform. **Magic MCP is now the 21st MCP.**The Magic MCP server (`@21st-dev/magic`) has been replaced by the unified**21st MCP**, installed via the**21st CLI**— setup at[21st.dev/mcp. This package remains published as a thin compatibility proxy so old configs keep working. ``` `npx @21st-dev/cli@latest init --client cursor # or: claude | vscode | windsurf | codex` ``` Or add it manually — it is a plain HTTP MCP server: ``` `{ "mcpServers": { "21st": { "url": "https://21st.dev/api/mcp", "headers": { "x-api-key": "YOUR_21ST_API_KEY" } } } }` ``` **Old Magic API keys were reset.**Keys issued by the old Magic console no longer work anywhere. Generate a fresh key at](https://21st.dev/mcp)[21st.dev/mcp. `npx -y @21st-dev/magic@latest API_KEY="..."`still works: since v0.2.0 it is a small stdio proxy that forwards every MCP message to the 21st MCP server. Existing`mcp.json`entries that reference`@21st-dev/magic`keep functioning — but they now speak to the same server as the 21st CLI, with the full current toolset. The API key is accepted in all the historical forms: positional`API_KEY="..."`,`--API_KEY=...`,`/API_KEY:...`,`-API_KEY ...`, or the`TWENTY_FIRST_API_KEY`/`API_KEY_21ST`environment variables. The 21st MCP still accepts the legacy Magic tool names and translates them, so agents that remember the old names keep working. Prefer the new names: The current server exposes much more than the old four tools: catalog search across components/themes/templates, paid code retrieval, bookmarks, team libraries, UI generation with variants, profile management, and more. Connect and call`tools/list`to see the full set. - 21st MCP setup & API keys:](https://21st.dev/mcp)[https://21st.dev/mcp - 21st CLI on npm:](https://21st.dev/mcp)[https://www.npmjs.com/package/@21st-dev/cli - 21st.dev — discover, publish, and generate UI components:](https://www.npmjs.com/package/@21st-dev/cli)[https://21st.dev **Why did my old Magic MCP stop working?**The Magic backend (`magic.21st.dev`) was superseded by the unified 21st MCP, and all old API keys were reset for security. Update to a fresh key from](https://21st.dev)[21st.dev/mcp— your existing`@21st-dev/magic`config will then work again through this compatibility proxy, though we recommend switching to`npx @21st-dev/cli@latest init`. **Is`/ui`still a thing?**Use natural language: ask your agent to search 21st for components (`search`), or generate new UI (`generate`). The old`/ui`,`/21`trigger phrases were a convention of the legacy tools' descriptions, not the protocol. This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases. AI-powered SVG animation generator that transforms static files into animated SVG components using the Allyson platform Get access to MCP server SVG and MCP server PNG icons in your vibe-coding projects An MCP server that allows AI assistants to interact with Adobe After Effects. The industry-standard doctrine for safe, observable, and steerable AI agent UX — browse 10 principles, curated examples, and application guides via MCP. Assists with aki-ui component development and usage. 745+ CSS3 animations and 9,000+ real SVG icons for AI coding agents. 10 MCP tools. Zero-clone setup via npx. Access comprehensive documentation for Ant Design components, including examples, API references, and best practices. Provides instant access to Apple's Human Interface Guidelines, with content auto-updated periodically. Design system MCP server — query tokens, components, icons, and WCAG contrast data from Git-backed design systems.](https://21st.dev/mcp)