Discover the toolingbehind modern intelligence
The operating system for AI infrastructure discovery. Search a live map of MCP servers, AI agents, LLM tools, automation systems, and developer infrastructure.
magic-mcp
It's like v0 but in your Cursor/WindSurf/Cline. 21st dev Magic MCP server for working with your frontend like Magic
5kstars
351forks
TypeScript
Quality signals
StaleNo testsNo CIThin docsNo licensePopular
AI summary
Auto-generated overview of what this skill does and when to reach for it.
AI agent that generates polished React UI components from plain English in Cursor, Windsurf, or VS Code with Cline.
Use this when
- you need a responsive navbar quickly
- prototyping a dashboard layout
- adding a modern button with hover effects
- iterating on a component’s design in real time
- building a landing page hero section
Don't use when
- you need backend logic or API routes
- working on non-React projects
- editing existing non-UI files
Capabilities
- generates React components from natural language prompts
- supports Cursor, Windsurf, VS Code, and Cline IDEs
- provides real-time preview of generated components
- includes TypeScript type definitions with components
- accesses 21st.dev’s component library for inspiration
- adds components directly to your project folder
InstallMCPRun via npx (Node)
Universal installANY TOOL
$ npx skillcity@latest 21st-dev/magic-mcpAuto-detects the skill or MCP server in this repo and installs it for Claude Code, Codex, Cursor or Cline.
Requires Node.js 18+ (ships with npx).
Or install manually
npx -y magic-mcp
MCP Configuration
Add this to your claude_desktop_config.json
{
"mcpServers": {
"magic-mcp": {
"command": "npx",
"args": [
"-y",
"magic-mcp"
]
}
}
}Loading README…
Ask a simulated agent to run this skill. It loads the real SKILL.md and reasons over your task with NVIDIA.
magic-mcp — sandboxAI sandbox
Pick a quick prompt below or type your own — watch the agent execute this skill step by step.
guest@skillcity:~$Try a prompt