21st.dev MCP: React components from the catalog into your editor

Search 21st.dev's catalog of 12,000+ React components and themes, pull their code into your project and, where your account offers it, generate new components with 21st's hosted AI. 21st.dev MCP, formerly Magic MCP, reaches Claude Code, Cursor, Claude and ChatGPT through ContextGate, which records each component your AI app fetches.

  • Ready to connect
  • Free

Set up 21st.dev in Cursor, Claude Code or ChatGPT

  1. 1Click Connect 21st.dev free and sign in with your 21st.dev account.
  2. 2Every tool is on when you connect, and you'll see the full list then. Keep the tools that search components and retrieve code; if you'd rather your AI app didn't generate components with 21st's hosted AI, switch that tool off.
  3. 3Add ContextGate to your AI app as a connector or MCP server. The steps for each app are on the Works with page.
  4. 4In Cursor, ask for a pricing table component from 21st.dev and its code, then open Activity to see which lookups ran.

Component work with 21st.dev in your editor

  • Search the 21st catalog of more than 12,000 React components for a navbar, card or form.
  • Find a theme and retrieve component code straight into Cursor or Claude Code.
  • Generate a new component with 21st's hosted AI when your account offers it.

Know where your UI code came from

  • Switch off the generation tool and your AI app sticks to existing catalog components; the tool is hidden and refused if called.
  • Activity shows each component search and code fetch, so you can trace where a component in your codebase came from.
  • Policies check every call, so a secret pasted into a prompt can be blocked before it reaches 21st.dev.

What you get with 21st.dev and ContextGate

  • Your AI apps can use 21st.devClaude, Cursor, ChatGPT and other AI apps reach 21st.dev through the one ContextGate connection you add to them.
  • You choose which tools they can useSwitch off any 21st.dev tool you don't want used. It's hidden from your AI apps and refused if called.
  • Every call is checked and recordedYour policies check each call (for example, personal data is hidden and secrets are blocked), and Activity keeps a record of it.

ContextGate sees only the tool calls that go through it, not your AI app's built-in tools or your chats.

21st.dev tools

21st.dev's own MCP server shows its tools once you sign in. When you connect it, they are listed and synced in your workspace.