shadcn.io is not affiliated with official shadcn/ui
API Playground AI Block for React
Build a completion request with a model select, temperature, max tokens and top-p sliders, a system prompt and a message, read the request JSON and cURL command made live from the controls, and send it for a typed response with a usage list.
Installation
Overview
Let developers try an API's settings before they write code, with this request playground for React with Base UI. Paramfield, an API workbench, puts the controls at the start: a Select for the model, three Sliders for temperature, max tokens and top-p with their numbers beside them, and two Textareas for the system prompt and the user message, with three chips that fill the message. At the end Tabs show the Request as JSON, the same call as a cURL command, the Response and the Headers, both code views in Syntax Text. The JSON and the cURL command are rebuilt from the controls on every change, with real shell quoting. The Shine Button sends the request, waits 800 milliseconds and shows a typed completion with a usage list. For API docs, model consoles and any form that ends in a request.
FAQ
What stays in the page, and how do I make it real?
The request JSON and the cURL command are real: they are built from the controls in the browser. The response is typed: three completions chosen by words in the message (a summary, a haiku or a translation, with a fallback), cut at the max tokens you set. Nothing is sent, as the line under the form says. To wire it for real, post bodyOf(settings) in the submit handler and put the reply in place of replyOf.
What if my message has a quote in it?
The cURL command wraps the JSON in single quotes and turns each single quote in it into a closed quote, an escaped quote and a new open quote, the way a shell expects, so the command stays valid when you paste it.
Where do the token counts come from?
From the text: about four characters per token, summed over the system prompt and the message for the prompt and over the reply for the completion. If the typed reply is longer than your max tokens it is cut with an ellipsis and the finish reason reads "length" instead of "stop". These are rough rules, not a tokenizer.
How do the sliders work for keyboard and screen reader users?
Each slider is named and reads its value aloud ("0.7"), the arrow keys move it by one step and Home and End jump to the ends. The number beside each slider is the same value in plain text.