# Prompt Playground
Source: https://ui.spencerwueste.com/docs/blocks/prompt-playground/
Markdown: https://ui.spencerwueste.com/llm/blocks/prompt-playground.md

> System prompt, parameter sliders, and side-by-side model comparison with latency and cost.

> Live preview: https://ui.spencerwueste.com/preview/prompt-playground

## What's inside

- **Model Selector** heads each output column.
- **Radix Slider** for temperature, max tokens, and top-p.
- **Message** markdown streams both outputs at model-specific speeds.
- **Usage Meter** tracks context consumption; the footer shows latency, tokens, and cost.

## Installation

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

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

Registry JSON: https://ui.spencerwueste.com/r/prompt-playground.json

The registry item pulls in every component it depends on.

## Usage

```tsx
import PromptPlayground from "@/components/blocks/prompt-playground/prompt-playground";

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

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

## Going live

Replace `runOne` with a call to your API per model. Keep the per-model pricing table in `models` so the cost footer stays accurate, and pass the slider values through as request parameters.