AI Playground Interface
Relevant source files
The following files were used as context for generating this wiki page:
- apps/dashboard/src/pages/Playground.tsx
- apps/dashboard/src/components/Playground/Sandbox/CodeSnippetsResponse.tsx
- apps/dashboard/src/pages/Onboarding.tsx
- libs/sdk-typescript/README.md
- guides/typescript/mastra/coding-agent/openai/src/mastra/agents/coding-agent.ts
- guides/typescript/agentkit-inngest/coding-agent/anthropic/src/index.ts
The AI Playground Interface is a centralized web-based environment within the Daytona dashboard designed for testing, debugging, and demonstrating the capabilities of Daytona's secure sandboxes. It serves as an interactive staging area where developers and AI agents can execute code, manage file systems, and perform Git operations in isolated environments.
The interface integrates multiple interaction modes, including a Sandbox code generator, a Web Terminal for direct shell access, and VNC support for visual desktop interactions. By providing real-time feedback and code snippet generation, it bridges the gap between manual development and automated AI agent workflows.
Sources: apps/dashboard/src/pages/Playground.tsx:1-133, README.md:30-40
Core Interface Architecture
The Playground is structured as a tabbed application that manages different interaction paradigms with the Daytona backend. It utilizes specialized providers to manage state across its sub-components.
Layout and Navigation
The interface is divided into three primary categories:
- Sandbox: Focuses on programmatic interaction via SDK-style code snippets.
- Terminal: Provides a direct
WebTerminalfor shell command execution. - VNC: Enables a
VNCDesktopWindowResponsefor interacting with GUI-based applications.
Sources: apps/dashboard/src/pages/Playground.tsx:24-28, apps/dashboard/src/pages/Playground.tsx:115-120
Component Relationship
The following diagram illustrates how the Playground UI routes user interactions to specific sandbox capabilities.
The UI uses AnimatePresence for smooth transitions between these modes.
Sources: apps/dashboard/src/pages/Playground.tsx:110-130
Sandbox Interaction and Code Generation
The Sandbox view provides an automated way to generate and execute Daytona SDK code for Python and TypeScript.
Dynamic Code Snippet Generator
The SandboxCodeSnippetsResponse component generates full-featured scripts based on user-configured parameters. It tracks the status of specific operations like file listing, folder creation, and Git cloning to include the relevant logic in the output.
Sources: apps/dashboard/src/components/Playground/Sandbox/CodeSnippetsResponse.tsx:135-170
Execution Flow
When a user clicks "Run", the interface performs a sequence of asynchronous operations:
- Sandbox Creation: Initializes a new isolated environment.
- Command Dispatch: Executes the logic defined in the parameters (e.g.,
sandbox.process.codeRun,sandbox.fs.createFolder). - Log Aggregation: Captures stdout, stderr, and success messages into a unified
ResponseCard.
Feature Summary
The Playground exposes several core Daytona features through its various modules.
| Feature Category | Components / Tools | Description |
|---|---|---|
| Code Execution | codeRun, executeCommand | Securely runs JS, TS, or Python snippets or shell commands. |
| File System | createFolder, listFiles, deleteFile | Full CRUD operations on the isolated sandbox disk. |
| Git Operations | clone, status, branches | Interacts with remote repositories and manages local branches. |
| Agent Integration | codingAgent, AgentKit | Supports autonomous agents that plan and execute multi-step tasks. |
| Visual Access | VNC, PreviewLink | Provides GUI desktop access and web server proxy URLs (e.g., port 80). |
Sources: libs/sdk-typescript/README.md:85-115, guides/typescript/mastra/coding-agent/openai/src/mastra/agents/coding-agent.ts:25-50, apps/dashboard/src/components/Playground/Sandbox/CodeSnippetsResponse.tsx:215-265
Integration with AI Agents
The Playground Interface mirrors the capabilities exposed to AI agents via frameworks like Mastra and AgentKit. Agents use tools corresponding to Playground UI elements to perform "Live Development Monitoring" and "Multi-stage build processes."
Tool Mapping
- UI File System Parameters map to agent tools like
writeFileandcreateDirectory. - UI Process Parameters map to agent tools like
runCodeandstartDevServerTool. - UI Terminal maps to the
shellToolfor raw command execution.
Sources: guides/typescript/mastra/coding-agent/openai/src/mastra/agents/coding-agent.ts:160-185, guides/typescript/agentkit-inngest/coding-agent/anthropic/src/index.ts:180-210
Onboarding Flow
New users are introduced to the Playground concepts through an Onboarding interface that highlights the progression from SDK installation to creating their first secure sandbox.
Sources: apps/dashboard/src/pages/Onboarding.tsx:165-200
Summary
The AI Playground Interface serves as the primary experimentation hub for the Daytona ecosystem. It allows users to switch between programmatic code generation, manual terminal control, and visual VNC interaction. By utilizing the Daytona SDK under the hood, it provides a consistent environment for validating logic that will eventually be automated by AI agents or integrated into production software via the TypeScript and Python SDKs.
Sources: apps/dashboard/src/pages/Playground.tsx:1-133, README.md:1-50