feat(playground): Add doc

.gitignore

@@ -0,0 +1,2 @@
+# Claude Code settings
+.claude/

datasets/quick-start.mdx

@@ -2,6 +2,9 @@
 title: "Quick Start"
 ---
 
+Datasets are simple data tables that you can use to manage your data for experiments and evaluation of your AI applications.
+Datasets are available in the SDK, and they enable you to create versioned snapshots for reproducible testing. 
+
 <Frame>
   <img
     className="block dark:hidden"
@@ -10,9 +13,6 @@ title: "Quick Start"
   <img className="hidden dark:block" src="/img/dataset/dataset-list-dark.png" />
 </Frame>
 
-Datasets are simple data tables that you can use to manage your data for experiments and evaluation of your AI applications.
-Datasets are available in the SDK, and they enable you to create versioned snapshots for reproducible testing. 
-
 <Steps>
 <Step title="Create a new dataset">
 

mint.json

@@ -151,6 +151,20 @@
       "group": "Prompt Management",
       "pages": ["prompts/quick-start", "prompts/registry", "prompts/sdk-usage"]
     },
+    {
+      "group": "Playgrounds", 
+      "pages": [
+        "playgrounds/quick-start", 
+        {
+          "group": "Columns",
+          "pages": [
+            "playgrounds/columns/data-columns",
+            "playgrounds/columns/prompt",
+            "playgrounds/columns/column-management"
+          ]
+        }
+      ]
+    },
     {
       "group": "Datasets",
       "pages": ["datasets/quick-start", "datasets/sdk-usage"]

playgrounds/columns/column-management.mdx

@@ -0,0 +1,48 @@
+---
+title: "Column Management"
+description: "Learn all columns general functionalities"
+---
+
+Columns in the Playground can be reordered, edited, or deleted at any time to adapt your workspace as your analysis evolve. Understanding how to manage columns effectively helps you maintain organized and efficient playgrounds.
+
+## Columns Settings
+Column Settings lets you hide specific columns from the Playground and reorder them as needed. To open the settings, click the Playground Action button and select Column Settings
+<img
+  className="block dark:hidden"
+  src="/img/playground/play-action-light.png"
+/>
+<img className="hidden dark:block" src="/img/playground/play-action-dark.png" />
+
+To change the column order, use the six-dot handle on the right side of each column to simply drag the column into the desired position. 
+
+To hide a column, toggle its switch in the menu.
+<img
+  className="block dark:hidden"
+  src="/img/playground/play-column-settings-light.png"
+  style={{maxWidth: '600px'}}
+/>
+<img 
+    className="hidden dark:block" 
+    src="/img/playground/play-column-settings-dark.png" 
+    style={{maxWidth: '600px'}}
+/>
+
+
+## Columns Actions
+
+Each column has a menu that lets you manage and customize it. From this menu, you can:
+- Rename the column directly by editing its title
+- Edit the column configuration
+- Duplicate the column to create a copy with the same settings
+- Delete the column if it’s no longer needed
+
+<img
+  className="block dark:hidden"
+  src="/img/playground/play-column-options-light.png"
+  style={{maxWidth: '350px'}}
+/>
+<img 
+  className="hidden dark:block" 
+  src="/img/playground/play-column-options-dark.png"
+  style={{maxWidth: '350px'}}
+/>

playgrounds/columns/data-columns.mdx

@@ -0,0 +1,116 @@
+---
+title: "Data Columns"
+---
+
+Columns are the building blocks of playgrounds, defining what kind of data you can store, process, and analyze. 
+
+
+<img
+  className="block dark:hidden"
+  src="/img/playground/play-column-list-light.png"
+/>
+<img className="hidden dark:block" src="/img/playground/play-column-list-dark.png" />
+
+
+<Tip>
+**Need to reorder, edit, or delete columns?**
+
+ Learn how to effectively manage your columns in the [Column Management](./column-management) guide.
+</Tip>
+
+## 📝 Data Input Columns
+Store and manage static data entered manually or imported from external sources.
+
+### Text field
+Free-form text input with multiline support
+
+### Numeric
+Numbers, integers, and floating-point values
+
+<img
+  className="block dark:hidden"
+  src="/img/playground/play-number-col-light.png"
+  style={{maxWidth: '300px'}}
+/>
+<img 
+  className="hidden dark:block" 
+  src="/img/playground/play-number-col-dark.png"
+  style={{maxWidth: '300px'}}
+/>
+
+The last row allows you to choose a calculation method for the column, such as average, median, minimum, maximum, or sum.
+
+
+<img
+  className="block dark:hidden"
+  src="/img/playground/play-number-col-summary-light.png"
+  style={{maxWidth: '300px'}}
+/>
+<img 
+  className="hidden dark:block" 
+  src="/img/playground/play-number-col-summary-dark.png"
+  style={{maxWidth: '300px'}}
+/>
+
+
+
+
+### Single select
+Single-choice columns let you define a set of predefined options and restrict each cell to one selection. 
+To create one, set the column name and add options in the Create Column drawer. 
+In the values box, type an option and press Enter to save it—once added, it will appear as a colored label.
+
+In the table, each cell will then allow you to select only one of the defined options.
+This column type is especially useful for manual tagging with a single tag.
+
+
+<img
+  className="block dark:hidden"
+  src="/img/playground/play-single-select-creation-light.png"
+/>
+<img 
+  className="hidden dark:block" 
+  src="/img/playground/play-single-select-creation-dark.png"
+/>
+
+
+
+<img
+  className="block dark:hidden"
+  src="/img/playground/play-single-select-dark.png"
+/>
+<img 
+  className="hidden dark:block" 
+  src="/img/playground/play-single-select-dark.png"
+/>
+
+
+### Multi select
+Multi-select columns let you define a set of predefined options and allow each cell to contain multiple selections. The setup process is the same as for single-select columns: define the column name, add options in the Create Column drawer, and save them as labels.
+
+In the table, each cell can then include several of the defined options. This column type is especially useful for manual tagging with multiple tags.
+
+<img
+  className="block dark:hidden"
+  src="/img/playground/play-multi-select-light.png"
+/>
+<img 
+  className="hidden dark:block" 
+  src="/img/playground/play-multi-select-dark.png"
+/>
+
+
+### JSON
+A JSON column allows you to store and edit structured JSON objects directly in the Playground. Each cell can contain a JSON value, making it easy to work with complex data structures.
+
+When editing a cell, an Edit JSON panel opens with syntax highlighting and formatting support, so you can quickly add or update fields.
+
+
+<img
+  className="block dark:hidden"
+  src="/img/playground/play-json-light.png"
+/>
+<img 
+  className="hidden dark:block" 
+  src="/img/playground/play-json-dark.png"
+/>

playgrounds/columns/prompt.mdx

@@ -0,0 +1,75 @@
+---
+title: "Prompt Column"
+description: "Execute LLM prompts with full model configuration"
+---
+
+### Prompt
+A Prompt column allows you to define a custom prompt and run it directly on your Playground data. 
+You can compose prompts with messages (system, user, assistant or developer), insert playground variables, and configure which model to use. 
+Each row in your playground will be passed through the prompt, and the model’s response will be stored in the column.
+
+<Info>
+Prompt columns make it easy to test different prompts against real data, compare model outputs side by side.
+</Info>
+
+<img
+  className="block dark:hidden"
+  src="/img/playground/play-prompt-column-light.png"
+  style={{maxWidth: '400'}}
+/>
+<img 
+  className="hidden dark:block" 
+  src="/img/playground/play-prompt-column-dark.png"
+  style={{maxWidth: '400'}}
+/>
+
+## Prompt Writing
+
+Write your prompt messages by selecting a specific role—System, User, Assistant, or Developer. 
+
+You can insert variables into the prompt using curly brackets (e.g., `{{variable_name}}`). These variables can then be mapped to existing column data, allowing your prompt to dynamically adapt to the playground
+
+
+<img
+  className="block dark:hidden"
+  src="/img/playground/play-prompt-write-light.png"
+  style={{maxWidth: '400'}}
+/>
+<img 
+  className="hidden dark:block" 
+  src="/img/playground/play-prompt-write-dark.png"
+  style={{maxWidth: '400'}}
+/>
+
+## Configuration Options
+
+### Model Selection
+Choose from supported LLM providers and models:
+- **OpenAI**: GPT-5, GPT-5-Mini, GPT-5-Nano, GPT-4o, GPT-4o-mini and more
+- **Anthropic**: Claude-3-Opus, Claude-3-5-Sonnet, Claude-3-5-Haiku and more
+- **Gemini**: Gemini-2.5-Flash, Gemini-2.5-Pro and more
+
+### Structured Output
+Structured output can be enabled for models that support it. You can define a schema either by writing a JSON structure in the JSON editor or by using the Visual editor to add parameters, specifying their names and types.
+
+## Tools
+Tools let you extend prompts by allowing the model to call custom functions with structured arguments. Instead of plain text, the model can return a validated tool-call object that follows your schema.
+
+To create a tool, give it a name and description so the model knows when to use it. Then define its parameters with a name, description, type (string, number, boolean, etc.), and whether they are required.
+### Advanced Settings
+Fine-tune model behavior options:
+- **Temperature** (0.0-1.0): Control randomness and creativity
+- **Max Tokens**: Limit model output length (1-8000+ depending on model)
+- **Top P**: Nucleus sampling parameter (0.0-1.0)
+- **Frequency Penalty**: Reduce repetition (0.0 to 1.0)
+- **Presence Penalty**: Encourage topic diversity (0.0 to 1.0)
+- **Logprobs**: When enabled, returns the probability scores for generated tokens
+- **Thinking Budget** (512-24576): Sets the number of tokens the model can use for internal reasoning before producing the final output
+A higher budget allows more complex reasoning but increases cost and runtime
+- **Exclude Reasoning from Response**: If enabled, the model hides its internal reasoning steps and only outputs the final response
+
+## Prompt Execution
+
+A prompt can be executed across all cells in a column or on a specific cell. 
+
+Prompt outputs can be mapped to different columns by clicking a cell and selecting the mapping icon, or by double-clicking the cell

playgrounds/quick-start.mdx

@@ -0,0 +1,54 @@
+---
+title: "Quick Start"
+---
+
+Playgrounds are interactive spreadsheet where you can organize your data and experiment with LLMs, evaluate outputs, and analyze data. 
+Think of them as powerful workbenches for AI development that combine the flexibility of a spreadsheet with the power of LLM evaluation and execution.
+It’s designed for everyone, from product managers and analysts to QA, data engineers, and software developers.
+
+<Frame>
+  <img
+    className="block dark:hidden"
+    src="/img/playground/play-list-light.png"
+  />
+  <img className="hidden dark:block" src="/img/playground/play-list-dark.png" />
+</Frame>
+
+## Playground Structure
+
+A playground is organized as a table-like structure with three fundamental components: **rows**, **columns**, and **cells**. Understanding how these work together is essential for effective playground usage.
+
+### Rows
+
+Rows represent individual **data points** or **test cases** in your playground. Each row is a complete record that spans across all columns.
+
+### Row Characteristics
+Each row in the Playground is independent and can be executed on its own, maintains an order that can be rearranged as needed.
+
+### Row Operations
+- **Add Row**: Create new rows manually or through bulk operations
+- **Delete Row**: Remove unwanted rows individually or in bulk
+- **Duplicate Row**: Copy existing rows to create variations
+- **Reorder Rows**: Drag and drop to change row order
+- **Generate Rows**: Use AI to generate multiple similar rows based on patterns
+
+## Create A Playground
+
+Data can be imported from different sources: 
+
+1. CSV files
+2. JSON file
+3. From A Dataset
+4. From production spans
+
+You can create a Playground from scratch and import data later. Simply set a name for the Playground and start adding columns, rows, and data.
+<Frame style={{margin: '80px'}}>
+  <img
+    className="block dark:hidden"
+    src="/img/playground/play-empty-table-light.png"
+  />
+  <img className="hidden dark:block" src="/img/playground/play-empty-table-dark.png" />
+</Frame>
+
+
+Ready to build more sophisticated playgrounds? Dive into the [complete documentation](./index) or explore specific [column types](./columns/data-columns) to unlock the full power of Traceloop Playgrounds!