Prompt playgroundPro

System prompt, messages, variables, tools and sampling on one screen, with Run streaming the reply, Stop, and Save as version.

Markdown

On this page

ProThe returns prompt with one variable still empty. Run streams the reply; Save as version names it.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/prompt-playground

Usage

tsx

import { PromptPlayground } from "@/components/ui/chatcn/pro/prompt-playground"

<PromptPlayground
  value={setup}
  onValueChange={setSetup}
  models={models}
  tools={tools}
  onRun={(request, { signal }) => streamReply(request, signal)}
  onSaveVersion={(setup, note) => versions.save(setup, note)}
/>

onRun gets the request with every {{variable}} filled in and empty messages dropped, and returns an async iterable of text deltas. Yield { usage } at the end for exact token counts; without it the playground estimates. Pass the signal to your fetch so Stop cancels the request.

Variables found anywhere in the system prompt or messages get a test value field. Missing ones turn amber in the text and are named under the fields, so nobody ships a prompt that sends {{return_window}} to the model. Cost uses the model's inputPrice and outputPrice per million tokens.

Built on the free model-parameters, markdown and popover; pair it with prompt-versions for history and model-compare to run the same setup across models.

Examples

States

ProA failed run with its fix, a reply stopped halfway, a fresh playground and locked.

Props

Prop	Type	Notes
`value`, `defaultValue`	`PlaygroundValue`	`{ model, system, messages, variables, tools, parameters }`
`onValueChange`	`(value) => void`	Every edit
`models`	`PlaygroundModel[]`	`{ id, label, inputPrice?, outputPrice? }`
`tools`	`PlaygroundTool[]`	`{ name, description? }`. Hidden when empty
`onRun`	`(request, { signal }) => AsyncIterable<string \| { usage }>`	Throw with a message that says how to fix it
`onSaveVersion`	`(value, note) => Promise<string \| void>`	Resolve with the label
`defaultRun`	`PlaygroundRun`	A reply, error or stop to show first
`disabled`	`boolean`	Locks every control

Keyboard

Key	Action
`Cmd/Ctrl+Enter`	Run, from anywhere in the playground
`Esc`	Stop a running reply
`Enter` in the save note	Save the version

Accessibility

The output is a labelled region that is busy while streaming; the free markdown announces the finished reply once.
Message role buttons say what they do: "User, switch role of message 1".
Missing variables are marked invalid on their fields and named in text, not only colored.

Motion

Popovers use the kit's 180 ms origin aware enter. The Thinking label waits 300 ms before it shows, so a fast first token never flashes a loader. Streaming text appends with no per word effects.