LabscoMCP early access ↗
21st-devMCP SERVER · OFFICIAL PROJECT

21st.dev Magic UI Builder

Describe a UI component and get one built from a curated modern component library.

by 21st-dev ↗Design Systems & UI Component Libraries✓ Official

LABSCO SUMMARY

Generating from a curated library beats generating from nothing, and that is the real difference here.

A model asked to write a component from scratch produces something plausible and inconsistent with everything around it. Drawing from a maintained set of pieces means the output shares conventions with itself, which is most of what "looks designed" means. The preview matters more than it sounds: UI is the one thing you cannot evaluate by reading the diff.

What it is

A component generator wired into the editor: you describe what you want in words and it produces a modern, typed component, drawing on a library of pre-built pieces rather than inventing from scratch.

What you get

  • Components generated from a natural-language description
  • A library of pre-built, customisable components to draw from
  • Real-time preview as the component takes shape
  • TypeScript throughout
  • A collection of brand assets and logos available alongside

Requirements

A 21st API key from 21st.dev/mcp; keys from the old Magic console were reset and no longer work. The 21st CLI sets it up for Cursor, Claude, VS Code, Windsurf and Codex; added by hand, the key goes in the x-api-key header, and the older @21st-dev/magic package still takes it on the launch line. MIT licensed.

Setup effort

One command plus a key — npx @21st-dev/cli@latest init --client cursor, then supply credentials

See installation options