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

# Chat Playground

> Interactive environment for testing and experimenting with LLM models

<Frame>
  <img src="https://mintcdn.com/taamai-c8c27d6c/7tpU7wOp-rlopJuB/images/playground/chat-interface.png?fit=max&auto=format&n=7tpU7wOp-rlopJuB&q=85&s=45c8f3acdc8b539ccb646ce4b877e5a7" alt="Chat Playground Interface" width="4320" height="2700" data-path="images/playground/chat-interface.png" />
</Frame>

## Overview

The Chat Playground provides an interactive environment to test different LLM models and fine-tune their parameters for optimal results.

## Interface Components

<AccordionGroup>
  <Accordion title="Model Selection" icon="robot">
    Choose from available models:

    * GPT-4 Turbo
    * Claude 3
    * Gemini Pro
    * Custom Models

    <Frame>
      <img src="https://mintcdn.com/taamai-c8c27d6c/7tpU7wOp-rlopJuB/images/playground/model-select.png?fit=max&auto=format&n=7tpU7wOp-rlopJuB&q=85&s=217a39c658d7ce9bcb35b10e142c8be7" alt="Model Selection" width="2880" height="1620" data-path="images/playground/model-select.png" />
    </Frame>
  </Accordion>

  <Accordion title="Parameters" icon="sliders">
    Adjust model behavior:

    * Temperature
    * Max tokens
    * Top P
    * Frequency penalty
    * Presence penalty
  </Accordion>

  <Accordion title="System Prompt" icon="gear">
    Set the context and behavior instructions for the AI model
  </Accordion>
</AccordionGroup>

## Using the Playground

<Steps>
  <Step title="Select Model" icon="check-to-slot">
    1. Choose your preferred model
    2. Review model capabilities
    3. Check credit consumption rate
  </Step>

  <Step title="Configure Settings" icon="gear">
    1. Adjust temperature for creativity
    2. Set maximum response length
    3. Fine-tune other parameters
  </Step>

  <Step title="Test Prompts" icon="message">
    1. Enter your prompt
    2. View real-time responses
    3. Iterate and refine
  </Step>
</Steps>

## Features

<CardGroup cols={2}>
  <Card title="Save Templates" icon="bookmark">
    Save successful prompts for future use
  </Card>

  <Card title="Export Results" icon="file-export">
    Download conversations and settings
  </Card>

  <Card title="Share Sessions" icon="share-nodes">
    Collaborate with team members
  </Card>

  <Card title="API Preview" icon="code">
    View API calls for implementation
  </Card>
</CardGroup>

## Code Generation

```python theme={null}
# Example API call matching playground settings
from openai import OpenAI

client = OpenAI(
    api_key="your-api-key",
    base_url="https://api.gately.ai/v1"
)

response = client.chat.completions.create(
    model="gpt-4-turbo",
    messages=[
        {"role": "system", "content": "You are a helpful assistant."},
        {"role": "user", "content": "Tell me about AI."}
    ],
    temperature=0.7,
    max_tokens=150
)
```

<Note>
  The playground automatically generates API code based on your current settings and prompts.
</Note>

## Tips & Best Practices

<CardGroup cols={3}>
  <Card title="Start Simple" icon="play">
    Begin with basic prompts and iterate
  </Card>

  <Card title="Compare Models" icon="code-compare">
    Test same prompt across models
  </Card>

  <Card title="Save Versions" icon="clock-rotate-left">
    Track successful configurations
  </Card>
</CardGroup>

<Warning>
  Remember that playground usage consumes credits according to the selected model's pricing.
</Warning>
