▪️Vibe Studio Interface

The Studio is where you build and edit one project. It opens when you create or open a Widget, Promotion, Landing, or Custom Game. This article is a tour of every part of it.

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:

• 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

• 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.

• Settings - 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.