21st.dev Magic

Left alone, AI-built interfaces tend to look the same. 21st.dev is a catalogue of well-designed React components, and this connector lets Claude search it and use them, so your pricing table or hero section starts from something good.

It is a thin bridge to 21st's hosted service. The catalogue is free with a key; generating brand-new components with their AI is a paid feature.

If you are not building in React with Tailwind, skip it.

• Search a catalogue of ready-made interface components
• Generate a new component from a plain description
• Pull in matching logos and icons
• Keep a bookmarked set of components for your team

Open your terminal in the project folder and run:

claude mcp add --env API_KEY_21ST=YOUR_API_KEY magic -- npx -y @21st-dev/magic@latest

Or add this to your project's .mcp.json:

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY_21ST": "YOUR_API_KEY" }
    }
  }
}

You'll be asked to sign in or paste an API key the first time you use it.

Builders making web apps in React who want them to look designed.

• Landing page sections
• Dashboards that look finished
• Consistent UI across an app