> For the complete documentation index, see [llms.txt](https://help.smartico.ai/welcome/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.smartico.ai/welcome/products/vibe-studio-beta/vibe-studio-interface.md).

# Vibe Studio Interface

The Studio is where you build and edit one project. It opens when you create or open a [Widget](/welcome/products/vibe-studio-beta/widgets.md), [Promotion](/welcome/products/vibe-studio-beta/promotions.md), Landing, or Custom Game. This article is a tour of every part of it.

<div data-with-frame="true"><figure><img src="/files/ak0pSl3vDxg7UA0f3Dma" alt=""><figcaption></figcaption></figure></div>

The Vibe Studio editor with its four areas

### The workspace (four areas)

The **View** buttons in the top bar choose which areas are visible:

* **File tree** - every file in the project. Click one to open it.
* **Code editor** - you can edit code by hand here, but most changes are easier to just ask the AI for.
* **Preview** - a live render of your page; it rebuilds automatically after edits.
* **AI chat** - where you talk to the assistant and watch what it does.

**View** offers a few layouts: editor + preview, a preview-focused layout, preview-only, and a full-screen preview. Pick whatever fits the task.

### The panel tabs

Below the chat are six tabs:

<div data-with-frame="true"><figure><img src="/files/6vme1vFpmenAn1DstYL7" alt=""><figcaption></figcaption></figure></div>

* **Chat** - the conversation with the assistant.
* **Todos -** the list of to-do items you can manage manually.
* **Trace** - a detailed log of the assistant's last run: each step, the tools it used, tokens, and screenshots. Open it to see exactly what happened.
* **Console** - browser console output from the preview (errors, warnings, logs). A red badge shows the error count.
* **Memory** - the project notes the assistant keeps and re-reads each turn: a summary, what each file is for, decisions, and a to-do list.
* **Build** - the build log for the preview, with a **Rebuild** button. If a build fails, you automatically land here.
* **Help** - the in-product guide, always one click away.

Top-right of the tab bar: a **context bar** shows how full the conversation is (it auto-summarizes near 100%) and a running **token count**. Run `/clear` to start a fresh task and keep usage down (your project memory is kept).

### The top toolbar

The Vibe Studio toolbar

<div data-with-frame="true"><figure><img src="/files/wuMK6ZTDbVUM6xGMS67T" alt=""><figcaption></figcaption></figure></div>

* **Preview as user** - pick a real (test) player so the page renders with their data. Some templates also show a **Brand** picker (visitor-mode landings) or an **extra-field** picker.
* **Desktop / Mobile** - switch the preview between a desktop view and a phone frame.
* **View** - choose the workspace layout.
* **Setting**s - the additional settings for Vibe Studio, you can download/upload the whole project in a zip, change dark/light theme, suspend popups/inbox/mini-games
* **Versions** - save a named snapshot and switch between earlier ones.
* **Publish** - push the current files live to the CDN (disabled while the AI runs).
* **Get link** (pages) or **Widget Layout** + **Get Code** (widgets) - get the public URL, or the layout controls and embed snippet.
* **Close** - leave the editor and return to where you opened it from.

### The preview

Above the preview, a status line shows whether it is building or live. A reload button refreshes it, and if the page has translations, a language dropdown lets you preview each one.

The 'Annotate' option lets you select UI elements in your widget/page/game and ask the AI model to change them.

<div data-with-frame="true"><figure><img src="/files/AkAxFYuFAvohdV879kfc" alt=""><figcaption></figcaption></figure></div>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.smartico.ai/welcome/products/vibe-studio-beta/vibe-studio-interface.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.