21st-dev/magic-mcp — reverse-engineered prompt

Build me a TypeScript tool called Magic AI Agent that works as an MCP server for frontend developers inside Cursor, Windsurf, VS Code, Cline, and Claude.

The main idea is simple. A developer should type something like /ui create a modern responsive navbar in their AI coding chat, and the tool should generate a polished, editable React UI component that fits into the existing project. It should use a 21st.dev style component library, support TypeScript, and be able to include professional brand logos through SVGL when needed.

Please include a smooth setup flow where the user adds their 21st.dev API key, then installs the server with one command or by copying a small config block into their IDE settings. Make the README really clear for non experts, with setup steps, examples, supported editors, FAQ, and beta notice.

Keep the code clean, safe, and focused on only creating or changing component related files. Look up current MCP docs online if you need to.