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 init --client cursor # or: claude | vscode | windsurf | codexTools exposed
logo_search
Tested with
Claude Code, Cursor, Windsurf, 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
Open-source & AI alternatives
Swap-in tools that solve the same job. Weigh the trade-offs before you commit.
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.
Jpisnice/shadcn-ui-mcp-server
Various
A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation,compaitable with react,svelte 5,vue & React Native
karyaboyraz/mockit-mcp
Various
MCP server that turns text prompts into premium iOS mobile UI mockups (PNG + HTML). Powered by Claude (Opus 4.7) + Playwright. Two backends: local CLI or Anthropic API. MIT.
sarveshsea/m-moire
Various
Shadcn-native Design CI for Tailwind apps: export registries that work with shadcn, v0, AI editors, and npm.
HalidSaglam/saglitzdesign-mcp
Various
Expert design & marketing knowledge for AI agents — an MCP server for web, iOS, Android & macOS design: UI, UX, SEO, GEO, copywriting, roadmaps & real-world patterns.
ng-galien/maket
Various
Visual design workspace for AI assistants: create posters, flyers, labels and social posts as multi-page HTML/CSS documents with live preview, annotations, brand guides, asset libr
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.