servers / 21st-dev-magic

magic-mcp

communitystdiolocalhealthyhealthy

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

Is it safe?Setup guide Alternatives Claim this server

01Tools · 4

How to read this: tool names here are observed from a live tools/list handshake. The Risk label is a heuristic inferred from the tool name (write/destructive verbs), not from executing the tool — a conservative guess, not a verified capability. We never escalate risk from a description. Found one that's wrong? Tell us — we fix on report.

Tool	Risk	Side effects	Approval
logo_search Search and return logos in specified format (JSX, TSX, SVG). Supports single and multiple logo searches with category filtering. Can return logos in different themes (light/dark) if available. When to use this tool: 1. When user types "/logo" command (e.g., "/logo GitHub") 2. When user asks to add a company logo that's not in the local project Example queries: - Single company: ["discord"] - Multiple companies: ["discord", "github", "slack"] - Specific brand: ["microsoft office"] - Command style: "/logo GitHub" -> ["github"] - Request style: "Add Discord logo to the project" -> ["discord"] Format options: - TSX: Returns TypeScript React component - JSX: Returns JavaScript React component - SVG: Returns raw SVG markup Each result includes: - Component name (e.g., DiscordIcon) - Component code - Import instructions	read	false	unknown
21st_magic_component_refiner "Use this tool when the user requests to re-design/refine/improve current UI component with /ui or /21 commands, or when context is about improving, or refining UI for a React component or molecule (NOT for big pages). This tool improves UI of components and returns redesigned version of the component and instructions on how to implement it."	read	false	unknown
21st_magic_component_builder "Use this tool when the user requests a new UI component—e.g., mentions /ui, /21 /21st, or asks for a button, input, dialog, table, form, banner, card, or other React component. This tool ONLY returns the text snippet for that UI component. After calling this tool, you must edit or add files to integrate the snippet into the codebase."	read	false	unknown
21st_magic_component_inspiration "Use this tool when the user wants to see component, get inspiration, or /21st fetch data and previews from 21st.dev. This tool returns the JSON data of matching components without generating new code. This tool ONLY returns the text snippet for that UI component. After calling this tool, you must edit or add files to integrate the snippet into the codebase."	read	false	unknown

02Install & source

npx -y @21st-dev/magic@latest

npx

npx -y @21st-dev/cli@latest

npx

repohttps://github.com/21st-dev/magic-mcp
homepagehttps://21st.dev/mcp
adoption5676 stars · 431 forks

03Access granted

Manage GitHub · writeSend chat messages · write

The access this server can exercise, inferred from its verified tools — not a declared OAuth scope.

05Provenance & freshness

sourcesGitHub repo search [p4] · Awesome MCP Servers (wong2) [p6]

last_checked2026-08-16 18:31Z

next_check2026-08-16 21:31Z

cadenceevery 3h

verifiedhandshake:skipped metadata:passed handshake:skipped metadata:passed handshake:skipped metadata:passed handshake:skipped metadata:passed handshake:skipped metadata:passed

index_statusindex — 8 unique facts >= 5

06Badge

Add the “as seen on MCPExplorer” badge to your README.

[![magic-mcp MCP — as seen on mcpexplorer.com](https://mcpexplorer.com/badge/21st-dev-magic.svg)](https://mcpexplorer.com/servers/21st-dev-magic)

Next step

This is one server. A loadout combines the right servers, governance, and proven plays for a whole job — assembled deliberately, not tool-dumped.

Explore loadouts →