> ## Documentation Index
> Fetch the complete documentation index at: https://runcrate.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Playground

> Test models interactively in your browser with auto-generated code examples.

export const RuncrateStyles = () => {
  if (typeof document !== 'undefined' && !document.getElementById('runcrate-overrides')) {
    const s = document.createElement('style');
    s.id = 'runcrate-overrides';
    s.textContent = `
      /* Match Runcrate's rounding scale (--radius: 0.75rem) */
      .rounded-sm { border-radius: 0.5rem !important; }   /* 8px */
      .rounded-md { border-radius: 0.625rem !important; } /* 10px */
      .rounded-lg { border-radius: 0.75rem !important; }  /* 12px */
      .rounded-l-sm { border-top-left-radius: 0.5rem !important; border-bottom-left-radius: 0.5rem !important; }
      .rounded-r-sm { border-top-right-radius: 0.5rem !important; border-bottom-right-radius: 0.5rem !important; }
      .rounded-l-md { border-top-left-radius: 0.625rem !important; border-bottom-left-radius: 0.625rem !important; }
      .rounded-r-md { border-top-right-radius: 0.625rem !important; border-bottom-right-radius: 0.625rem !important; }
      .rounded-l-lg { border-top-left-radius: 0.75rem !important; border-bottom-left-radius: 0.75rem !important; }
      .rounded-r-lg { border-top-right-radius: 0.75rem !important; border-bottom-right-radius: 0.75rem !important; }

      /* Cards: never pure white in light mode */
      .card { background-color: #fcfcfc !important; border-radius: 0.75rem !important; }
      html.dark .card { background-color: #141414 !important; }

      /* Docs hero box */
      .rc-hero { background-color: #fcfcfc; border: 1px solid #e0e0e0; }
      html.dark .rc-hero { background-color: #141414; border-color: #242424; }
      html.dark .rc-hero h1 { color: #f5f5f5; }

      /* Runcrate scrollbar — thin, transparent track, hide-until-hover thumb */
      ::-webkit-scrollbar { width: 6px; height: 6px; background-color: transparent; }
      ::-webkit-scrollbar-track { background-color: transparent; }
      ::-webkit-scrollbar-thumb { background-color: rgba(155, 155, 155, 0.5); border-radius: 10px; transition: opacity 0.3s ease; opacity: 0; }
      ::-webkit-scrollbar-thumb:hover { background-color: rgba(155, 155, 155, 0.7); }
      *:hover::-webkit-scrollbar-thumb,
      *:focus::-webkit-scrollbar-thumb,
      *:active::-webkit-scrollbar-thumb { opacity: 1; }
      * { scrollbar-width: thin; scrollbar-color: rgba(155, 155, 155, 0.5) transparent; }
    `;
    document.head.appendChild(s);
  }
  return null;
};

<RuncrateStyles />

Every model on Runcrate has an interactive playground in the dashboard. Test models, experiment with parameters, and get auto-generated code — without writing any code yourself.

## Accessing the Playground

1. Go to **Dashboard → Models**
2. Click on any model
3. The playground opens with the model ready to use

## Playground Types

The playground adapts to the model's category:

### Chat Playground

For Chat, Code, Reasoning, and Vision models.

* **Real-time streaming** — Responses appear token-by-token
* **System prompt** — Set the model's behavior
* **Multi-turn conversation** — Full conversation history
* **Temperature and max tokens** — Adjustable via settings panel
* **Image uploads** — For vision-capable models, attach images to your messages
* **Reasoning blocks** — For reasoning models, thinking steps are shown in collapsible blocks

### Image Playground

For image generation models.

* **Prompt input** — Describe the image you want
* **Parameter controls** — Aspect ratio, steps, guidance, seed, and model-specific settings
* **Live preview** — Generated images display inline
* **Reference images** — Upload images for img2img, editing, and Kontext models

### Video Playground

For video generation models.

* **Prompt input** — Describe the video
* **Duration selector** — Choose from available durations (buttons or slider depending on model)
* **Async status** — Shows job status (queued → processing → completed)
* **Video player** — Watch the result directly in the browser
* **Download** — Save the MP4

### TTS Playground

For text-to-speech models.

* **Text input** — Enter the text to speak
* **Voice selector** — Choose from available voice presets
* **Audio player** — Listen to the result with streaming playback

### ASR Playground

For speech-to-text models.

* **File upload** — Upload an audio file (MP3, WAV, etc.)
* **Transcription output** — View the transcribed text
* **Duration and language** — Shows detected language and audio duration

## Auto-Generated Code

Every playground shows a **code panel** with working examples in three languages:

* **curl** — Direct HTTP request
* **Python** — Using the OpenAI SDK
* **JavaScript** — Using the OpenAI SDK

The code updates automatically based on your selected model and parameters. Copy it directly into your application.

## API Key

The playground uses your workspace's default API key. If you don't have one yet, it's created automatically when you first open a model.