Quick Start

Create your first Magic Chat project in minutes

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.