# Vibecode Sandbox

<figure><img src="https://1853893129-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIwdOpuF1335HFzmxcH8N%2Fuploads%2FZ99sqo78MfUzeC6gnAnH%2Fimage.png?alt=media&#x26;token=d97eeb6d-d35b-4b7d-b28e-94a18e740073" alt=""><figcaption></figcaption></figure>

Welcome to **Vibecode Terminal,** the most accessible, delightful way to use world-class agents in a sandboxed and safe environment.&#x20;

If you’ve ever wanted to build amazing apps or web experiences, but *hate* the friction of complex developer tooling, infrastructure setup, and escaping dependency hell, you’re in the right place. All the confusing, technical stuff is handled **automatically** by Vibecode Terminal, along with the additions of a few more added quality of life features meant to aid you in your vibecoding journey, such as a run button, a save button, and a spare terminal.

All of the most popular Terminal Agents are here, in the Vibecode Terminal, including:

* **Claude Code**&#x20;
* **Codex with GPT-5**&#x20;
* **Gemini CLI** (Coming Soon)
* **OpenCode** (Coming Soon)
* **Cursor Agent** (Coming Soon)

**Sandboxing, and why it is important:**\
These AI tools are powerful out of the box, but their full potential can only be brought out by YOLO mode. Unfortunately, YOLO mode can be dangerous on your personal computer, and so you often see warnings like this:

![](https://1853893129-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIwdOpuF1335HFzmxcH8N%2Fuploads%2FhwGz37T4T533Xt7a4HYE%2FCleanShot%202025-08-30%20at%2013.32.24%402x.png?alt=media\&token=26fcd151-80a1-4760-9771-b3377a8fed67)

**Vibecode Terminal** hosts an [isolated environment](https://blog.sigplan.org/2025/08/29/ai-models-need-a-virtual-machine/), AKA a sandbox, which is a virtual machine that lives on the cloud, and runs the CLI tool of your choice. The magic here is that even in yolo mode, if the AI agent corrupts files, or takes down the machine, it doesn't matter because it is not your personal computer and you can simply create another Vibecode terminal.

## Parts of Vibecode Terminal

The main interface is composed of the Agent Panel, the Terminal panel, and a Web preview, each working together to give you a full creative command center.

<figure><img src="https://1853893129-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIwdOpuF1335HFzmxcH8N%2Fuploads%2FMpiaHFdwSfx9SnfHJSUC%2Fimage.png?alt=media&#x26;token=b62586cc-c349-4e78-8f73-6cd047f69ea3" alt=""><figcaption></figcaption></figure>

### Parts of Vibecode Terminal

***The Agent Panel*** is where you will run Claude Code, Codex, Gemini CLI, or any of the most popular TUI's. This is where AI will generate, edit, or delete files just like the popular AI coding tools in your sandbox.&#x20;

***Below the Agent, you’ll find the Shell***. The shell is like the "control room." Here, important commands run like starting your app, saving your progress, or sending your project to GitHub. The shell takes the files created by the agent and makes them *work. T*t’s where all the behind-the-scenes actions happen to turn code into a real, working app.

***Finally, the webview is where you see the result***. It’s like a live preview window. As soon as the agent and shell do their jobs, the webview instantly shows what your app looks like and how it’s working. So you don’t just make files, you actually see your app in action, right away, with no extra steps.

### \[1] The Agent Panel

The **Agent Panel** is where you tap into the power of leading AI and coding models, making it the brain of your workspace. You can select from five top agent models.&#x20;

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td>Claude Code</td><td>Powered by Anthropic and Claude Sonnet / Opus. The most powerful TUI right now.</td><td><a href="https://1853893129-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIwdOpuF1335HFzmxcH8N%2Fuploads%2Fb3hgknLACwK3OEfiMjIb%2Fclaudecode.webp?alt=media&#x26;token=dd195595-57a2-4e32-a598-d43de8b859b4">claudecode.webp</a></td></tr><tr><td>Codex</td><td>By OpenAI. Powered by GPT-5 and other OpenAI models.</td><td><a href="https://1853893129-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIwdOpuF1335HFzmxcH8N%2Fuploads%2FuMvjsyMuVM3tSHa1rkL0%2Fcodex%20openai.jpg?alt=media&#x26;token=94cfb0c4-ee62-4513-b690-5819d30b0218">codex openai.jpg</a></td></tr><tr><td>Gemini CLI</td><td>Powered by Google and Gemini 2.5 and other powerful models</td><td><a href="https://1853893129-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIwdOpuF1335HFzmxcH8N%2Fuploads%2FwzZOYZN1riQCgXAyxW4H%2Fgeminicli.png?alt=media&#x26;token=a2264fd3-ab09-4bce-865b-2daa1cf3558f">geminicli.png</a></td></tr><tr><td>OpenCode</td><td>Open Sourced, can use basically any model</td><td><a href="https://1853893129-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIwdOpuF1335HFzmxcH8N%2Fuploads%2FaeNEieF1XUt9Up9qGdZ6%2Fopencode.webp?alt=media&#x26;token=f4673c56-3b79-4002-bc81-3a97ec2d91a7">opencode.webp</a></td></tr><tr><td>Cursor Agent</td><td>Cursor's new CLI tool similar to Claude Code.</td><td><a href="https://1853893129-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIwdOpuF1335HFzmxcH8N%2Fuploads%2FyPe7ybx6Ng2yB0xo8A9C%2Fnewyes.png?alt=media&#x26;token=4a72804c-7b69-4cdc-97cb-49524166c20e">newyes.png</a></td></tr></tbody></table>

These are called **Terminal User Interfaces** and TUI's are applications or interactive models that run entirely in the terminal but offer a more visual and navigable experience than raw command-line input.

Claude Code is the most popular TUI, and it exploded in popularity because it redefined what AI coding could mean for everyday developers and teams. Unlike traditional code assistants that simply suggest snippets, Claude Code acts as a fully autonomous agent, able to generate, refactor, debug, and manage multi-file projects directly from the terminal, all with natural language instructions.

Once you pick an agent, simply describe what you want to build or change. The agent can:

* Generate new project files or folders (React apps, websites, scripts, etc.)
* Edit and refactor your codebase automatically
* Add or remove features, fix bugs, or write documentation
* Install dependencies and set up starter projects
* Explain any code so you understand what’s happening

You can switch between models depending on your use case, making the Agent Panel extremely flexible for every coding or app-building need.

### \[2] The Shell

<figure><img src="https://1853893129-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIwdOpuF1335HFzmxcH8N%2Fuploads%2FYLkzCx9xPzcJKERvI9oH%2FScreenshot%202025-08-27%20at%201.34.34%E2%80%AFPM.png?alt=media&#x26;token=ebcb78ac-93ec-4fae-8abe-c7331c75bf57" alt=""><figcaption></figcaption></figure>

The **Shell** turns powerful commands into one-click actions. Instead of typing commands in the terminal which can be hard for beginners, we suggest all the commands you might need.&#x20;

* **Start Dev Server**: Instantly launch your app’s local server for live testing and development.
* **Deploy to Vercel**: Ship your app to the web or production in one tap—perfect for sharing with users or teammates.
* **Commit to GitHub**: Save changes, write a commit message, and push your latest edits—all handled for you in the background.
* **Clear Terminal**: Instantly clear the display if you want a fresh view or to reduce clutter.
* **Show Directory**: Browse and understand your project’s folder structure at a glance.

Everything in the Shell is designed to *demystify* developer workflows. Even advanced tasks (like running tests or installing new libraries) can be surfaced as easy buttons, letting anyone perform real developer actions without memorizing syntax—or messing up their setup.

***

### \[3] The Webview

The **Webview** is your “see it now” panel—displaying a live, interactive preview of whatever app, site, or tool you’re building. Common use cases include:

* Instantly seeing how your changes affect the app’s UI or behavior
* Checking error messages or debugging logs
* Previewing mobile, tablet, or desktop versions in real time
* Demonstrating your app to friends, users, or investors, all inside one window
* Iterating on your idea ultra-fast, with visual feedback each step of the way

No more guessing if your code works—you see it, test it, *and* launch it, all from the same dashboard.

Here’s a draft of those sections written in the same simple, friendly style you’ve been using:

***

## Important Commands

### **Deploying your app to Vercel:**&#x20;

Vibe Code Terminal makes shipping your app super easy. When you’re ready to put your project live, you don’t need to worry about complicated deploy scripts or servers.

* We use the **Vercel CLI** behind the scenes.
* Just click “Deploy to Vercel” or run the suggested button in the Shell.
* Your app gets pushed straight to Vercel’s hosting platform.
* Within seconds, you’ll get a live link to share with your team, friends, or customers.

No API keys to mess with, no setup required. Vibe Code Terminal handles it for you.

***

### **Saving (Commit) your app to Github:**

You don’t need to learn Git commands to save your work either. Vibe Code Terminal uses the **GitHub CLI** to handle all the Git magic for you.

* Tap “Commit to GitHub” in the Shell.
* We’ll ask you for a quick commit message (like “added login page” or “fixed button”).
* Your files get saved and pushed to your GitHub repo instantly.

Everything happens behind the scenes, but you stay in control. It’s the easiest way to version control your code and keep it backed up.

***

### **Why TUIs Can Be Unsafe (and Why Vibecode Terminal is Safe)**

The TUIs (Terminal User Interfaces) like Claude Code, Codex, Gemini CLI, and others are insanely powerful. They can generate and change files for you automatically. But with that power comes some risk.

* **Prompt Injections:** Bad prompts or hidden instructions in code can trick AI agents into doing things you didn’t ask for—like leaking secrets, deleting files, or running harmful commands.
* **No Safety Nets:** If you’re running these tools on your own machine without isolation, there’s nothing stopping a malicious command from messing with your system.

That’s why Vibe Code Terminal is built as a **sandbox**:

* Everything happens in an isolated environment. (A simulated computer in the cloud)
* Your real computer is never at risk
* Your files will not be accidentally moved or deleted

Think of Vibe Code Terminal as your **safe space** to use the most popular AI coding tools in the world.&#x20;

You get all the creative power, without the scary “what if this breaks my laptop?” worries.
