Skip to main content
The workbench is the IDE-like panel that sits alongside chat. It gives you direct access to your project’s files, a code editor, and a live terminal — all running in the same WebContainer that the AI uses.

​
Preview

The Preview tab shows your running Expo app inside a device frame. It renders the web build of your project served by the Expo dev server. See Preview & devices for details on device frames, reload, and the element inspector.

​
Code editor

The code editor supports syntax highlighting for the file types you’ll encounter in an Expo project: TypeScript, TSX, CSS, JSON, Markdown, and more. File tabs at the top let you switch between open files quickly. You can make edits directly — changes you type are real files in the WebContainer and the AI will see them on its next turn via the file snapshot.
Use the editor for small, surgical fixes — a typo, a hardcoded string, a color value. For larger refactors or multi-file changes, use chat so the AI keeps context consistent across the codebase.

​
File tree

The file tree on the left lets you browse your project’s folder structure, open files, and perform context actions like renaming, deleting, or creating new files and folders (where enabled). A few things to keep in mind:
  • The AI uses the same filesystem. Any file you create or edit manually is immediately visible to it.
  • Avoid editing node_modules or other generated folders — changes there are overwritten by installs and are not part of your project’s source.

​
Terminal

The terminal is connected to your WebContainer and shows live output from:
  • npm / npx installs that the AI runs when adding or updating packages.
  • Expo CLI output — server start messages, bundle logs, and QR codes.
  • Build errors and TypeScript compiler output when something goes wrong.
You can also type commands directly in the terminal. For example, if the dev server stopped, run npx expo start to restart it.
If Preview looks stuck after a large dependency change, check the terminal for install errors before asking the AI to try again. Paste the error text into chat and ask for a fix — the AI can resolve most install failures directly.

​
Using the workbench alongside chat

The workbench and chat are designed to be used together. A typical pattern:
1

Send a prompt in chat

Ask the AI to add a feature or fix a bug. Watch the terminal for install and server output as it works.
2

Review changes in the editor

Open the modified files in the editor to read through what the AI changed before testing.
3

Check Preview

Switch to the Preview tab to see the result in the device frame. Use reload if the hot-reload didn’t pick up the change.
4

Make small manual tweaks

Use the editor directly for minor adjustments — color values, copy, layout constants. The AI will see your edits on the next message.

Chat & AI assistant

Learn how a message turn works and how to pick a model.

Preview & devices

Switch device frames, use reload, and use the element inspector.