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
- 6.0k
- Last commit
- 29d ago
- Category
- Developer Tools
What it does
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
The receipts
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
Connect it
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
CoinGate Gift Cards Buy gift cards from 6,000+ brands by asking Claude or ChatGPT. Visit SponsoredQuestions
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.
How we know
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 on 2026-10-08, and again every six hours.
- Vendor docs checked by hand on 2026-09-29.
Spotted something out of date? Tell us — corrections ship same-day.