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.
Once connected, the assistant can call this tool directly:
logo_search — search_logo (one query per call)The server is distributed via npm as @21st-dev/cli, so most clients can run it without a manual build step. Add it to your MCP client's configuration and restart the client to pick it up — the copy-paste configs for Claude Desktop, Claude Code and Cursor are on this page.
Before the server will start you need to supply 2 environment variables: YOUR_21ST_API_KEY, TWENTY_FIRST_API_KEY. Keep credentials in your client's env block or a secrets manager rather than committing them.
Developer-tool servers are usually the first ones people connect, because they turn "help me with this code" into an assistant that can actually read the repo and act on it. 21st.Dev Magic sits in that group, and the shape of its toolset — logo_search — tells you what it is really for. Worth comparing against the other developer tools servers in this directory before you commit to one, since several overlap in scope but differ sharply in setup cost and 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 |
|---|---|---|
| YOUR_21ST_API_KEY | Credential the server authenticates with. | Yes |
| TWENTY_FIRST_API_KEY | Credential the server authenticates with. | Yes |
Kill hallucinated APIs — version-accurate, up-to-date library documentation injected straight into context.
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
GitHub's official server — repos, issues, pull requests, Actions and code security, straight from your assistant.
Issue tracking at the speed of conversation — Linear's official hosted server with OAuth and zero install.
Local repository surgery — status, diffs, commits, branches and history for any repo on disk.
Timezone sanity for AI — current time anywhere and correct conversions, without the model doing date math.