The 21st.dev MCP server,
connected in one click.
Search 21st.dev UI components & themes, get their code, and generate new ones with 21st AI. Connect the official 21st.dev MCP server to Claude, ChatGPT, or Cursor through gate — one gateway URL, no config files, security-checked.
Free to start · No credit card · No hosting needed
Add 21st.dev to your AI in one minute
Pick your client. Copy, paste, done — or let gate handle sign-ins and policies for you.
claude mcp add --transport http 21st-dev https://21st.dev/api/mcpRun in your terminal, then restart Claude Code. The client will open the vendor's sign-in the first time you use it.
21st.dev · https://21st.dev/api/mcp
What your AI can do with 21st.dev
Real prompts you can type the moment it's connected — no setup, no docs to read.
“What can 21st.dev do for me?”
“Show me the tools 21st.dev exposes.”
How secure is the 21st.dev MCP server?
Every server in the gate directory has to pass the same four checks before your AI can touch it. Here's how 21st.dev holds up.
Official endpoint
Operated by 21st.dev (21st.dev) at its documented MCP endpoint — not a third-party mirror or community re-host.
OAuth sign-in — your account, your rules
You grant access from your own 21st.dev account and can revoke it there at any time. gate never sees your password.
Scanned before it goes live
gate checks every tool for prompt injection, hidden instructions, data-exfiltration hints, and over-broad permissions before the server is available through your gateway.
Watched for drift
If 21st.dev adds or changes tools later, gate re-scans and alerts you — before your AI acts on the change.
21st.dev's server requires OAuth, so it can't be scanned anonymously — connect it in gate and the same scan runs automatically before it goes live.
Connected in three steps
Connect your gate
Add one gateway URL to Claude, ChatGPT, or any MCP client. One-time setup, about two minutes.
Pick 21st.dev
Choose 21st.dev in the gate directory. Sign in to your 21st.dev account to grant access.
Use it anywhere
21st.dev's tools are live in every AI client you've connected — with rules and logging built in.
Free to start · No credit card · No hosting needed
Who runs the 21st.dev MCP server?
The 21st.dev MCP server at a glance
https://21st.dev/api/mcpQuestions, answered
Is there an official 21st.dev MCP server?
Yes — 21st.dev operates its own remote MCP server at 21st.dev. gate connects you to that official endpoint and adds security scanning, per-tool access rules, and an activity log on top.
How do I connect 21st.dev to Claude or ChatGPT?
Add gate's gateway URL to your AI client once, then pick 21st.dev in the directory. You sign in to 21st.dev via OAuth to grant access. From then on, 21st.dev's tools are available in every client you've connected to gate.
Do I need to host anything?
No. 21st.dev runs the server, and gate is fully managed. You just connect one URL — there's nothing to install, deploy, or maintain.
Is the 21st.dev MCP server safe to connect?
It's the vendor's official endpoint, and gate scans its tools for prompt injection and hidden instructions before it goes live, re-checks it whenever it changes, and lets you allow, block, or require approval for every single tool.
Is it free?
Yes — you can get started with gate for free and connect 21st.dev in minutes. No credit card required.
Connect more than just 21st.dev
Every server below works through the same gateway URL — connect once, add tools anytime.
Squarespace DomainsDesignView →Set up 21st.dev in: Claude · Claude Code · ChatGPT · Cursor · VS Code