# AI Hero
Source: https://ui.spencerwueste.com/docs/blocks/ai-hero/
Markdown: https://ui.spencerwueste.com/llm/blocks/ai-hero.md

> Landing hero with a rotating-placeholder prompt input, suggestion chips, and a streamed sample reply.

> Live preview: https://ui.spencerwueste.com/preview/ai-hero

## What's inside

- **Prompt Input** with a typewriter placeholder that cycles through example prompts.
- **Suggestions** as outline chips under the input.
- **Message** markdown renders the streamed sample reply in a card.

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/ai-hero.json
```

Manual install dependencies: `@heroicons-animated/react motion`

Registry JSON: https://ui.spencerwueste.com/r/ai-hero.json

The registry item pulls in every component it depends on.

## Usage

```tsx
import AIHero from "@/components/blocks/ai-hero/ai-hero";

export default function Page() {
  return (
    <div className="h-dvh p-4">
      <AIHero />
    </div>
  );
}
```

Give the parent a bounded height. The block fills it and scrolls internally.

## Going live

Wire `submit` to open your real chat or redirect to signup with the prompt prefilled. The `headline` and `subhead` props cover the copy; edit the rotating prompts array to match your product.