distiliaa Learn
Module 6 25 min Run it in Colab

The Prompt Playground

A full interactive playground: prompts, parameters, streaming, cost.

Reading about API parameters is one thing; feeling them respond under your fingers is another. Every model provider ships a "playground" — a UI wrapped around the raw API — because it's the fastest way to develop intuition and debug prompts. This lesson gives you one, running entirely in your browser (simulated, free, unbreakable), and teaches you the workflow professionals use it for.

Why does this exist?

Playgrounds exist because prompt engineering is empirical. You can't reason your way to the perfect system prompt from first principles — you try one, watch the output, tweak, retry. Providers built playgrounds so developers could iterate in seconds instead of writing code for every experiment. Knowing your way around one (and understanding every knob on it) is table stakes for AI engineering interviews and daily work alike.

Your playground

Everything below is simulated locally — no API key, no network, no cost. But every control behaves like the real thing: token counts, cost estimates, streaming, latency differences between models, truncation by max tokens.

Prompt Playground

simulated — no API calls

Run a prompt to start the conversation.

prompt ≈ 19 tok · est. $0.00050 · 2.5s

Parameters

Low temperature: expect a focused, repeatable reply. Max tokens caps the reply length — the response is cut off when the budget runs out.

A guided tour of the knobs

Work through these experiments in order — each one anchors a concept from earlier lessons:

  1. Run the default prompt. Watch the response stream word by word. That's autoregressive generation made visible — the same typewriter effect as stream: true in the API.
  2. Switch models from swift-2 to nano-1, run again, then try titan-3. Watch two things: the streaming speed (small models generate more tokens per second) and the cost estimate (the price gap between model tiers is often 10–30x). Model choice is your biggest lever.
  3. Drag temperature to 1.5 and run. The simulated response turns florid and metaphor-heavy — a caricature of what real high-temperature sampling does to tone and risk-taking.
  4. Drop max tokens to 20 and run. The reply cuts off mid-thought with an ellipsis. That's finish_reason: "length" — truncation, not summarization.
  5. Toggle JSON mode. The output becomes a machine-parseable object regardless of other settings. This is how real structured-output modes constrain generation (next lesson goes deep on this).
  6. Delete the system prompt and run. Notice the response flags the missing instructions. Real models don't announce this, but their behavior visibly drifts to a generic default persona.
  7. Watch the token/cost readout as you type longer prompts and accumulate history — the meter is doing prompt_tokens × input_price + max_tokens × output_price, the same arithmetic your production budget will.

The professional playground workflow

Playgrounds aren't toys; they're where prompts get engineered. The loop looks like this:

  1. Draft the system promptPersona, rules, output format, refusal behavior. Start explicit and specific — vague prompts produce vague behavior.
  2. Probe with hard inputs
  3. Tune one knob at a time
  4. Pin down the regression set
  5. Export to code

That last step matters: a playground session is an API call under the hood. The real OpenAI and Anthropic playgrounds even have a "view code" button that emits the equivalent Python — because the mapping is one-to-one:

response = client.chat.completions.create(
    model="gpt-4o-mini",              # the model dropdown
    messages=[
        {"role": "system", "content": SYSTEM_PROMPT},   # system box
        {"role": "user", "content": user_input},        # user box
    ],
    temperature=0.7,                  # the slider
    max_tokens=300,                   # the slider
    stream=True,                      # the typewriter
)

Playground success is not production success

The playground shows you one response to one input. Production is thousands of users, adversarial inputs, and tail-case prompts you never imagined. Treat playground iteration as prototyping; systematic evaluation (Module 12) is how you actually know a prompt works.

Build it yourself

This whole course builds toward you making tools like the one above. As an exercise, recreate a minimal version: two textareas, three sliders, and a fake generateResponse(params) function that streams a canned string word-by-word with setTimeout. You'll discover the UI state management (streaming, history, cancellation) that real AI products wrestle with daily. Then, if you have an API key, swap the fake function for a real fetch — the interface doesn't change.

Summary

  • A playground is a UI over the raw API — every control maps one-to-one to a request field.
  • Model choice dominates cost and speed; temperature shapes tone; max tokens truncates; JSON mode constrains format.
  • Iterate like an engineer: hard test inputs, one variable at a time, keep a regression set of past failures.
  • Token/cost meters in the playground do the same arithmetic as your production budget.
  • Playground wins are prototypes; systematic evals decide what ships.