Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

AI blocks

Pro

API Playground AI Block for Svelte

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let developers try an API's settings before they write code, with this request playground for Svelte with Ark 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.

What does changing a control do to the response?

It clears it, since the response no longer belongs to the request on screen, and the usage list goes back to dashes. Reset returns every control to its first value.

How does it look on a phone?

The controls come first and the tabs under them, each tab body at the same height. The Send request button and Reset sit side by side at the end, with the status line above them.

All 100 ai blocks