MCP server / 21st Labs

21st.dev Magic MCP Server for Codex

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 —...

Docs reviewedChecked 2026-09-20Runtime not tested

What it adds

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

21stclaudecursormodel-context-protocolreacttailwindcss

Get set up

Run the install command below to register the server with Codex.
Restart Codex or start a new thread so the tools load.

npx -y @21st-dev/magic

Review before running

Read the installation source

Before you install

YOUR_21ST_API_KEY
API_KEY
TWENTY_FIRST_API_KEY

Compatibility & limitations

Documented for ChatGPT desktop app, Codex CLI, Codex IDE extension

Cursor: Not confirmed for Cursor.

This listing is based on source documentation. We have not installed or runtime-tested this asset.

How it fits together

Test Driven Development · SkillUse when implementing any feature or bugfix, before writing implementation code.Web Artifacts Builder · SkillSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS,...Figma Code Connect Components · SkillConnects Figma design components to code components using Code Connect mapping tools.Figma Context · MCP serverMCP server to provide Figma layout information to AI coding agents like Cursor.AntV Chart · MCP serverA visualization mcp & skills contains 25+ visual charts using @antvis. Using for chart generation and data analysis.Mermaid · MCP serverGenerate mermaid diagram and chart with AI MCP dynamically. Also you can use.

Sources & provenance

Reviewed 2026-09-20. Source revision: main (mutable; commit not pinned).