AgentIndex icon
AgentIndex
ToolsMCP ServersHOTCategoriesTrendingNewBest ListsCompareGuides
Submit Tool
ToolsMCP ServersHOTCategoriesTrendingNewBest ListsCompareGuides
Home/
Code Assistant/
magic-mcp
magic-mcp logo

magic-mcp

Active·★ 6.3k·MIT·Updated 2026-09-09

Magic from 21st.dev is an MCP tool that creates UI components from natural-language descriptions inside your IDE. You type `/ui` in your agent's chat and describe what you need, for example a modern responsive navigation bar. The IDE prompts you to use Magic, which builds a component inspired by the 21st.dev library and adds it to your project, where it stays fully customisable. The README lists TypeScript support, real-time preview, SVGL brand-asset and logo integration, and multi-IDE support for Cursor, Windsurf, VS Code and VS Code with Cline.

Setup needs Node.js and an API key generated in the 21st.dev Magic Console. The recommended install is one CLI command (`npx @21st-dev/cli@latest install` with your key) for Cursor, Windsurf, Cline or Claude; you can also edit the MCP config file by hand or use one-click install buttons for VS Code. Component enhancement, which would improve existing components with animations and advanced features, is marked as coming soon. The repository is MIT licensed.

This write-up is based on the project's README and public repository data. We have not hand-tested the tool. Data as of 2026-10-24.

License
ISC
Latest release
v0.2.3 · 2026-09-09
Last commit
2026-09-09
Contributors
7
Forks
506
Open issues and PRs
8
First published
2025-02-19

Source: GitHub, npm and PyPI public APIs.

#AI#UI Generation#IDE Integration#Developer Tools#Frontend Development#Coding
$ Install
$ npx @21st-dev/cli@latest install <client> --api-key <key>
↗ Visit site★ GitHub
01

Features

01AI-Powered UI Generation: Create UI components by describing them in natural language
02Multi-IDE Support: Cursor, Windsurf, VSCode, VSCode + Cline integration
03Modern Component Library: Access to a vast collection of pre-built, customizable components
04Real-time Preview: Instantly see your components as you create them
05TypeScript Support: Full TypeScript support for type-safe development
02

Why choose it

+Generates components from a short `/ui` description directly inside Cursor, Windsurf, VS Code or Cline.
+Output is TypeScript and customisable code added to your project, with real-time preview.
+One-command CLI install, or manual config and one-click VS Code buttons.
+SVGL integration gives access to brand logos and assets.
03

Trade-offs

!It needs an API key from the 21st.dev Magic Console, so generation goes through their service and may be limited by its plan (the README has an FAQ on running out of generations).
!Component enhancement for existing components is still listed as coming soon.
!Components are inspired by the 21st.dev library, so the look follows that style and still needs review before shipping.
04

Maintenance check

ActiveChecked: 2026-10-24
Last commit
2026-09-09
Commits, last 90 days
6
Releases, last 90 days
1
Latest release
v0.2.3 (2026-09-09)
Open issues
8
Recent issues with at least one comment
21/30
Commits per week, last 12 weeks
Commits per week, last 12 weeks: 0, 0, 0, 0, 3, 2, 0, 0, 0, 0, 0, 0

Oldest week on the left; the latest four weeks are orange. Source: GitHub commit activity.

Status rule: archived on GitHub = Archived; last commit within 90 days = Active; 91 to 365 days = Slowing; older = Stale. All figures come from the GitHub API on the date shown.

Most discussed open issues

  • #87 skeisan website0 comments · 2026-10-23
  • #85 Added 1-click config generator and setup guide for magic-mcp on MCP ServerList0 comments · 2026-10-18
  • #84 Listed on AgentHub — badge for your README0 comments · 2026-10-04
  • #82 Claude Code plugin: .mcp.json has "url" but no "type", so the 21st MCP server is skipped0 comments · 2026-09-16
  • #81 Claim / update your listing on MCPX (mcpx.digital)0 comments · 2026-09-13

Issue titles are quoted from GitHub. Open the link to check whether a problem still applies to the version you use.

05

Compatibility

Cursor
Supported
Verified via docs
Windsurf
Supported
Verified via docs
VS Code
Supported
Verified via docs
Cline
Beta Support
Verified via docs
Claude
Supported
Verified via docs
06

Quick start

1
$ npx @21st-dev/cli@latest install <client> --api-key <key>
07

Use cases

↳Quickly generate UI components from natural language descriptions within an AI Agent's chat.
↳Instantly build polished UI components inspired by 21st.dev's library.
↳Seamlessly integrate newly generated, customizable components into your project.
08

Alternatives

⚡Top VS:
VSdevin.cursorrules★6.0k→VSMysti★1.1k→VSContext7★63.8k→VSPocketFlow-Tutorial-Codebase-Knowledge★12.7k→
devin.cursorrules logo
devin.cursorrules★ 6.0k
Magic to turn Cursor/Windsurf as 90% of Devin
VSCompare→
Mysti logo
Mysti★ 1.1k
AI coding dream team of agents for VS Code. Claude Code + openai Codex collaborate in brainstorm mode, debate solutions, and synthesize the best approach for your code.
VSCompare→
Context7 logo
Context7★ 63.8k
MCP Server that provides up-to-date code documentation for LLMs and AI code editors.
VSCompare→
PocketFlow-Tutorial-Codebase-Knowledge logo
PocketFlow-Tutorial-Codebase-Knowledge★ 12.7k
Pocket Flow: Codebase to Tutorial
VSCompare→
pal-mcp-server logo
pal-mcp-server★ 11.8k
The power of Claude Code / GeminiCLI / CodexCLI + [Gemini / OpenAI / OpenRouter / Azure / Grok / Ollama / Custom Model / All Of The Above] working as one.
VSCompare→
DesktopCommanderMCP logo
DesktopCommanderMCP★ 10.1k
This is MCP server for Claude that gives it terminal control, file system search and diff file editing capabilities
VSCompare→
zcf logo
zcf★ 6.1k
Zero-Config Code Flow for Claude code & Codex
VSCompare→
awesome-vibe-coding logo
awesome-vibe-coding★ 5.4k
A curated list of vibe coding references, collaborating with AI to write code.
VSCompare→
See all alternatives →

Comments

Log in to leave a comment

No comments yet. Be the first!

On this page
01Features02Why choose it03Trade-offs04Maintenance check05Compatibility06Quick start07Use cases08Alternatives
21st-dev /
magic-mcp
↗

MCP server that generates UI components from a /ui prompt in your IDE

6.3k506MIT
Last commit1mo ago
StatusActive
CategoryCode Assistant
Contributors7
Latest releasev0.2.3
Links
Documentation↗Discussion↗Issues↗Releases↗
Cloud Infrastructure
Ad

Deploy on DigitalOcean

Host your MCP servers, Docker containers, and AI agents with $200 free credit over 60 days.

Claim $200 Free Credit
© 2026 AgentIndex.app|Built by a 10-year iOS Developer.
Best by use caseAboutContactAdvertisePrivacy PolicyTerms of UseQYSGitHubBuy me a coffee ☕

Browse by Category

MCP ServersCode AssistantWorkflow AutomationRAG / Knowledge BaseMulti-AgentBrowser AutomationLLM InfraDev ToolingObservability

Not affiliated with Anthropic, OpenAI or Microsoft.