21st-dev/Magic-MCP
by Various
It's like v0 but in your Cursor/WindSurf/Cline. 21st dev Magic MCP server for working with your frontend like Magic
MCP
21st-dev/Magic-MCP
Added 1 June 2026
Overview
An MCP server that brings AI-assisted frontend development into editors like Cursor, Windsurf, and Cline. It generates and modifies frontend code based on natural language prompts, similar to v0 but integrated directly into the coding environment. Built with TypeScript, it leverages the Model Context Protocol to connect AI models with the editor.
Best for
Best for
Developers using AI-assisted editors who want to accelerate frontend prototyping and iteration
Use cases
- Generate UI components from natural language descriptions
- Modify existing frontend code with inline AI suggestions
- Prototype layouts and pages without leaving the editor
How to use
Install
npx @21st-dev/cli@latest install <client> --api-key <key>Tested with
Cursor, Windsurf, Cline, Continue, VS Code
Notes
An MCP server that brings AI-assisted frontend development into editors like Cursor, Windsurf, and Cline. It generates and modifies frontend code based on natural language prompts, similar to v0 but integrated directly into the coding environment. Built with TypeScript, it leverages the Model Context Protocol to connect AI models with the editor.
4,966 stars on GitHub. Last updated 2026-02-17.
Use cases
- Generate UI components from natural language descriptions
- Modify existing frontend code with inline AI suggestions
- Prototype layouts and pages without leaving the editor
Pros
- Integrates seamlessly with popular AI-powered editors
- Open-source with strong community adoption (nearly 5k stars)
- TypeScript codebase makes it easy to extend or customize
Cons
- Requires an editor that supports the Model Context Protocol
- Depends on external AI models for code generation
- Limited to frontend tasks; not a general-purpose coding assistant
Indexed from awesome-mcp-servers-punkpeye and enriched against its public facts.
Pros
- Integrates seamlessly with popular AI-powered editors
- Open-source with strong community adoption (nearly 5k stars)
- TypeScript codebase makes it easy to extend or customize
Cons
- Requires an editor that supports the Model Context Protocol
- Depends on external AI models for code generation
- Limited to frontend tasks; not a general-purpose coding assistant
Pairs with
Other entries in the index that connect to this one. Click through to see the chain.
AI-by-design/primitiv
Various
The design system infrastructure keeping teams and agents in sync.
GLips/Figma-Context-MCP
Various
MCP server to provide Figma layout information to AI coding agents like Cursor
MohamedAbdallah-14/prompt-to-asset
Various
MCP server + CLI for production-grade software assets (logos, app icons, favicons, OG, illustrations) — routes across 30+ image models, zero-key first, validates before shipping.
sarveshsea/m-moire
Various
Shadcn-native Design CI for Tailwind apps: export registries that work with shadcn, v0, AI editors, and npm.
musepy/genable
Various
Quality-first AI UI generator for Figma. Multi-protocol: Gemini · Claude · OpenAI-compatible.
public-ui/kolibri
Various
The accessible HTML-Standard
shadcn/studio MCP
Various
Integrate shadcn/studio MCP Server directly into your favorite IDE and craft stunning shadcn/ui Components, Blocks and Pages inspired by shadcn/studio.
Get the free Developer’s Field Guide
A 27-page field guide to the AI coding workflow with Claude. Claude Code, MCP servers, the prompt patterns that work, and what to delegate. Free.
Enter your work email. We send it straight over, plus a few short notes worth knowing. Unsubscribe any time.