# AI playground

> Compare two models on one prompt with parameters, reasoning, streaming, tokens and cost.

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

## When to use

- Prompt engineering and model evaluation tools.

## When not to use

- End-user chat.

## Installation

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

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 { AiPlayground } from "@/components/blocks/ai-playground";

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

Built from: AI reasoning, Badge, Button, Slider, Switch, Textarea

## API reference

### AiPlayground

Compare two models side by side on the same prompt with system prompt, temperature, reasoning trace, tokens and cost. 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 |
| --- | --- |
| Tab | Move through prompt, parameters and Run |
| ← / → | Adjust temperature |
| Space | Toggle reasoning |

## Accessibility

- Sliders and switches are labelled.

## Motion

- Both answers stream in parallel; reasoning folds away when done.

## Responsive behavior

- Model columns stack below 768px.

## Performance

- Streams are simulated; nothing is sent.

## Notes for AI

- Call your models from a server route and stream back to each column.

## Related

- [AI chat](https://lodeui.com/blocks/ai-chat) — A chat with streamed answers, model picker, suggestions and stop.
- [AI reasoning](https://lodeui.com/components/ai-reasoning) — A collapsible thinking trace that folds into a summary when done.
- [Slider](https://lodeui.com/components/slider) — Drag, click or use the keys. The value rides above the thumb while you drag.