> ## Documentation Index
> Fetch the complete documentation index at: https://help.21st.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Generate UI from a prompt, compare multiple drafts, and copy production-ready code.

<Frame>
  <video autoPlay muted playsInline className="w-full rounded-2xl" src="https://mintcdn.com/21st/uLCB5kikM-FHl_zp/videos/21st-ai.mp4?fit=max&auto=format&n=uLCB5kikM-FHl_zp&q=85&s=33554fe3ce5f629fd9c44413dde30a3b" data-path="videos/21st-ai.mp4" />
</Frame>

**21st AI** turns a text prompt into working UI. Instead of one answer, it generates several drafts at once so you can compare and pick the direction you like, then refine your choice in plain language.

## The core loop

<Steps>
  <Step title="Describe what you want">
    Write a prompt — a landing hero, a pricing table, a settings page. Attach
    images or reference a marketplace component as a starting point.
  </Step>

  <Step title="Get multiple drafts">
    21st generates several variations in parallel so you can compare approaches
    side by side instead of iterating on a single guess.
  </Step>

  <Step title="Pick and refine">
    Choose your favorite draft and refine it with follow-up instructions
    ("make it bolder", "add a toggle", "use this theme").
  </Step>

  <Step title="Take the code">
    Copy the code or a paste-ready prompt and drop it into your project, editor,
    or AI agent.
  </Step>
</Steps>

## Two ways to generate

<CardGroup cols={2}>
  <Card title="Sketch mode" icon="https://mintcdn.com/21st/uLCB5kikM-FHl_zp/icons/nav/sketch.svg?fit=max&auto=format&n=uLCB5kikM-FHl_zp&q=85&s=bc36a205d059b7ce5959f6eb69ade101" href="/ai/generation#sketch-mode" width="24" height="24" data-path="icons/nav/sketch.svg">
    Fast HTML/Tailwind drafts rendered in the browser. Best for exploring layout
    and visual direction quickly.
  </Card>

  <Card title="Code mode" icon="https://mintcdn.com/21st/uLCB5kikM-FHl_zp/icons/nav/code.svg?fit=max&auto=format&n=uLCB5kikM-FHl_zp&q=85&s=83ac6893f55365e9010dc4f453c3ff28" href="/ai/generation#code-mode" width="24" height="24" data-path="icons/nav/code.svg">
    Full React/shadcn components with a live preview and multi-turn editing. Best
    when you want real, installable code.
  </Card>
</CardGroup>

## Where you can use it

<CardGroup cols={3}>
  <Card title="Web" icon="https://mintcdn.com/21st/uLCB5kikM-FHl_zp/icons/nav/globe.svg?fit=max&auto=format&n=uLCB5kikM-FHl_zp&q=85&s=36c2d03033c42d6dc19d1a06b6ec77d9" href="https://21st.dev/ai" width="24" height="24" data-path="icons/nav/globe.svg">
    Generate and refine at 21st.dev/ai.
  </Card>

  <Card title="CLI" icon="https://mintcdn.com/21st/uLCB5kikM-FHl_zp/icons/nav/terminal.svg?fit=max&auto=format&n=uLCB5kikM-FHl_zp&q=85&s=13207e3f98dae6e6cb5a5d8c5c81b297" href="/cli" width="24" height="24" data-path="icons/nav/terminal.svg">
    `21st generate`, `iterate`, and `take` from your terminal.
  </Card>

  <Card title="MCP" icon="https://mintcdn.com/21st/uLCB5kikM-FHl_zp/icons/nav/cable.svg?fit=max&auto=format&n=uLCB5kikM-FHl_zp&q=85&s=f782045c79c2ffa04e192209e563f025" href="/ai/mcp" width="24" height="24" data-path="icons/nav/cable.svg">
    The same generation tools inside Cursor, Claude, and VS Code.
  </Card>
</CardGroup>

<Info>
  Generation uses **credits**. Search and browsing are free; each generation and
  refinement draws from your monthly credits. See [Pricing & Credits](/ai/pricing).
</Info>