How It Works
- Start a project — Open Magic Chat and describe what you want to build
- AI generates code — Magic Chat creates a sandboxed React project with a live preview
- Iterate in chat — Refine the result with follow-up messages, add context, attach images
- Copy the code — Take the generated code into your project or continue editing with AI
What Makes It Different
- Community-powered — Magic Chat can use any component from the 21st Community as building blocks
- Live preview — See your component rendered in real time as the AI works
- Multiple variants — Generate several variations at once and pick the best one
- Site cloning — Provide a URL and Magic Chat will recreate the design (Pro plans)
- Context-aware — Add images, community components, and reference designs to guide the AI
Key Features
| Feature | Description |
|---|---|
| AI Chat | Describe changes in natural language; the agent edits files, runs commands, and searches for components |
| Live Preview | Real-time iframe preview with viewport controls (desktop, tablet, mobile) |
| Multiple Variants | Generate several approaches at once and compare side by side |
| Community Context | Reference any component from the 21st library as a building block |
| Image Uploads | Attach screenshots or mockups to guide the AI |
| Site Clone | Recreate any website’s design from a URL (Pro plans) |
| Copy Prompt | Export a prompt for use in Cursor, Claude Code, or other AI tools |
| Version History | Restore any previous checkpoint during your session |
| Keyboard Shortcuts | Full shortcut support for power users |
Get Started
Quick Start
Create your first project in minutes.
Pricing & Plans
Free tier, Pro plans, and how credits work.
Manage Subscription
Change your plan or cancel your subscription.
Keyboard Shortcuts
All shortcuts at a glance.