Does 21st.dev have an MCP server?
21st.dev maintains an official MCP server.
- Access
- Remote server
- Endpoint
- https://21st.dev/api/mcp
- Repository
- 21st-dev/magic-mcp
- Maintainer
- 21st Labs
- License
- ISC
- Language
- TypeScript
- Stars
- 5.9k
- Last commit
- 20d ago
- Category
- Developer Tools
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
Project site: 21st.dev
A remote server run by 21st.dev itself — nothing to install. Documented at 21st.dev.
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
Hosted by the vendor — no install, connect over HTTP with OAuth or a token.
Add it from the terminal, then restart your session:
claude mcp add --transport http 21stdev https://21st.dev/api/mcpAdd --scope user to make it available in every project.
- Open Settings → Connectors
- Click Add custom connector
- Paste
https://21st.dev/api/mcp - Finish the sign-in prompt, then enable it in the chat's tools menu
Add to .cursor/mcp.json in your project, or ~/.cursor/mcp.json for
every project:
{
"mcpServers": {
"21stdev": {
"url": "https://21st.dev/api/mcp"
}
}
}A green dot in Settings → MCP means it connected.
Add to .vscode/mcp.json:
{
"servers": {
"21stdev": {
"type": "http",
"url": "https://21st.dev/api/mcp"
}
}
}Then pick the server from the tools menu in Copilot's agent mode.
- Enable Developer mode under Settings → Apps & Connectors → Advanced
- Choose Create and paste
https://21st.dev/api/mcp - Complete sign-in, then enable the connector in a new chat
Does 21st.dev have an official MCP server?
Yes. 21st.dev maintains an official MCP server, hosted at https://21st.dev/api/mcp. The source lives at 21st-dev/magic-mcp on GitHub.
How do I connect 21st.dev to Claude?
Add https://21st.dev/api/mcp as a custom connector under Settings → Connectors in Claude Desktop or claude.ai, or run "claude mcp add --transport http 21st-dev https://21st.dev/api/mcp" in Claude Code.
Do I need to install anything to use the 21st.dev MCP server?
No. It is a remote server hosted by 21st.dev, so your MCP client connects to it over HTTP. You authenticate with the vendor rather than installing a package.
How is this verdict verified?
Published to the MCP Registry under 21st.dev's verified namespace dev.21st; 21st.dev/mcp documents the API-key hosted endpoint 21st.dev/api/mcp (answers MCP initialize with 401), and the 21st-dev/magic-mcp repo holds the legacy Magic MCP package that it replaced. GitHub metadata is refreshed every six hours.
Published to the MCP Registry under 21st.dev's verified namespace dev.21st; 21st.dev/mcp documents the API-key hosted endpoint 21st.dev/api/mcp (answers MCP initialize with 401), and the 21st-dev/magic-mcp repo holds the legacy Magic MCP package that it replaced.
- github data refreshed 2026-09-29, then every 6 hours
- vendor docs verified on 2026-09-29
Spotted something out of date? Tell us — corrections ship same-day.