21st.dev Magic AI Agent

Magic Component Platform (MCP) is an AI-powered tool designed to help developers create UI components using natural language. It offers seamless integration with IDEs like Cursor, Windsurf, and VSCode (via Cline).

Features

Key features include AI-powered UI generation, a modern component library inspired by 21st.dev, real-time previews, TypeScript support, and SVGL integration for brand assets. Component enhancement features are coming soon.

How It Works

Users describe the desired UI component using the /ui command in their AI Agent's chat. Magic then generates a polished UI component, automatically adding it to the project for immediate use and customization.

Getting Started

To get started, users need Node.js and a supported IDE. Installation involves generating an API key from the 21st.dev Magic Console and using the CLI command npx @21st-dev/cli@latest install <client> --api-key <key>. Manual configuration is also available by modifying the IDE's MCP config file.