21st.dev Magic MCP Server
21st.dev Magic hands a library of 10,000+ React/UI components to your AI coding agent. While building an interface you can have the AI search for a fitting component and generate the code — similar to v0, but happening inside your Cursor / Claude Code / Windsurf rather than in a separate product.
For frontend work this removes the find-on-a-component-site, copy, adapt loop — the AI drops the component straight into the file you're writing.
What it does for you
Lets your AI generate polished UI components — describe the interface you want and get usable React component code.
Capabilities
- Generate UI components from a description
- Draw on ready-made component libraries
Once installed, try asking your AI
Say this directly in Claude / Cursor or any client with this server connected
- ›“Build me a pricing card component with a search box”
Install / Connect
claude mcp add magic -- npx -y @21st-dev/magicFollow the official README; env and args vary per server.
Works with these clients
- Claude Desktopnpx
- Claude Codenpx
- Cursornpx
- VS Codenpx
- Windsurfnpx
Derived from the registry manifest (package type and transport) — we have not installed it ourselves. Check the official README before relying on it.
Why use it
Good for: developers using AI for frontend work who assemble UI components often and want to stay in their editor.
Before connecting: it talks to 21st.dev's component service and needs an API key. Maintenance signals and client compatibility are below; this server has an external-service dependency, so mind the key's scope.
Similar / alternative servers
ai.tradesearcher/mcp-server
Search TradeSearcher strategies and backtests from Claude Code, Cursor, Codex, a
io.github.chrischall/groupon-mcp
Groupon deals for Claude — search and browse local, goods, and travel deals
io.github.ouestcharlie/ouestcharlie-woof
An MCP server and app to search and browse your photos while preserving your pri
io.github.chrischall/gogcli-mcp-drive
Google Drive via gogcli for Claude — search, upload, download, permissions
Frequently Asked Questions
Does it draw the components itself?
It searches a component library for matches and generates the integration code — it doesn't paint pixels from scratch. The library's quality sets the ceiling on results.
Which editors are supported?
It targets Cursor, Claude Code and Windsurf and other MCP-capable editors. See the compatibility section below.