Create crafted UI components inspired by the best 21st.dev design engineers.
21st.dev magic mcp server connects 21st.Dev Magic to AI assistants that speak the Model Context Protocol. Create crafted UI components inspired by the best 21st.dev design engineers.
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.
Compare MCP servers by category, or browse hosted MCP servers if you prefer an endpoint over a local process.
Check the linked publisher documentation and your connected client's tool list. Names and availability can vary with the server version and account permissions.
| Tool | What it does |
|---|---|
| logo_search | search_logo (one query per call) |
{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@21st-dev/cli"],
"env": {
"YOUR_21ST_API_KEY": "your-value",
"TWENTY_FIRST_API_KEY": "your-value"
}
}
}
}Add to claude_desktop_config.json, then restart Claude Desktop.
| Variable | Description | Required |
|---|---|---|
| TWENTY_FIRST_API_KEY | Credential the server authenticates with. | Yes |
Feed real design data to your coding assistant — layout, tokens and components straight from Figma files.
Integrates Figma's API with Claude and other Model Context Protocol (MCP) compatible clients, providing read-only access to Figma files and projects.
AI-powered ERD design tool. Create and manage database schemas using DBML with real-time canvas.
Search a large 3D model library and download converted GLB/FBX/USDZ assets via signed URLs.
Local MCP canvas for Modellix image generation, editing, task recovery, and visual project work.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.