# AI chat

> A chat with streamed answers, model picker, suggestions and stop.

Block · Pro · https://lodeui.com/blocks/ai-chat

## When to use

- Assistants and support bots inside a product.

## When not to use

- Comparing models: use the AI playground.

## Installation

```bash
npx shadcn@latest add @lode/ai-chat
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { AiChat } from "@/components/blocks/ai-chat";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <AiChat />
    </main>
  );
}
```

Built from: Avatar group, Dropdown menu

## API reference

### AiChat

A chat with word-by-word streaming, stop generating, model picker, suggestions and copy. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter | Send |
| Shift+Enter | New line |
| Tab | Reach model picker, suggestions and copy |

## Accessibility

- The message list is aria-live="polite" so answers are announced.
- Copy and stop buttons are labelled.

## Motion

- Words stream in; new messages slide up.

## Responsive behavior

- Full height of its container; the composer stays pinned.

## Performance

- Streaming appends to one message; earlier messages don't re-render.

## Notes for AI

- Replace the fake stream with your model's token stream and keep the message shape.

## Related

- [Prompt input](https://lodeui.com/components/prompt-input) — Chat composer that grows, takes files by picker, paste or drop, and turns into Stop while generating.
- [AI reasoning](https://lodeui.com/components/ai-reasoning) — A collapsible thinking trace that folds into a summary when done.
- [Agent run](https://lodeui.com/blocks/agent-run) — An AI coding agent's run: steps stream in with search results, code and a diff.