1. Open Magic Chat
Go to 21st.dev/magic-chat and sign in with your account.
2. Describe What You Want
Type a prompt describing the UI you want to build. Be as specific or as general as you like:
- “A pricing page with three tiers and a toggle between monthly and yearly”
- “A dashboard sidebar with collapsible navigation groups”
- “Recreate the hero section from linear.app”
3. Add Context (Optional)
Before sending your message, you can enrich it with context:
- Community components — Click the Context button (or the
@ icon) to browse and attach components from the 21st library. The AI will use them as building blocks.
- Images — Attach screenshots, mockups, or reference designs (up to 5 images, max 5 MB each). Supported formats: JPEG, PNG.
4. Watch the Preview
Once you send your message, Magic Chat creates a sandboxed project and streams the result in real time. You’ll see:
- A live preview of your component on the right
- The AI’s progress in the chat panel on the left (file edits, component searches, command execution)
5. Iterate
Send follow-up messages to refine the result:
- “Make the cards rounded with more padding”
- “Add a dark mode toggle”
- “Use the button component from shadcn”
Each message builds on the previous state of your project.
6. Get Your Code
When you’re happy with the result:
- Copy Code — Click the code icon in the preview header to view and copy the generated source
- Copy Prompt — Press
⌘X (Mac) or Ctrl+X (Windows) to copy a prompt you can paste into Cursor, Claude Code, or another AI assistant to continue building
Tips
Use community components as context — Adding well-built components from the library dramatically improves output quality. The AI understands their APIs and composes them together.
Try multiple variants — Magic Chat can generate several variations of your prompt. Use Tab / Shift+Tab to cycle between them and pick your favorite.
