Skip to main content
The Vybe editor is your workspace for building apps. It combines a live preview, code browser, database explorer, and real-time logs — all in one interface alongside the AI chat panel.

​
Editor layout

The editor is split into two main areas:
  • Left panel — The AI chat, where you send messages and interact with the agent
  • Right panel — The multi-tab editor with your app’s preview, code, data, and more
You can resize the panels by dragging the divider between them. A sidebar on the left provides access to app settings, integrations, and recipe steps (when applicable).

​
Editor tabs

The editor provides multiple tabs across the top of the right panel. Each tab gives you a different view into your app.

​
Preview

The Preview tab shows a live, running version of your app. This is where you see your app exactly as your users will.
  • Auto-refresh — The preview updates automatically whenever the AI makes changes to your code
  • Page selector — A dropdown at the top lets you navigate between different pages and routes in your app
  • Runtime errors — When your app has errors, the preview displays error details. You can copy the error and paste it into the chat for the AI to diagnose and fix
  • Interactive — You can interact with your app directly in the preview (click buttons, fill forms, navigate between pages)
If the preview shows an error, copy the error message and send it to the AI chat. The AI will diagnose the issue and suggest a fix.

​
Code

The Code tab gives you a full view of your app’s source code.
  • File explorer — Browse the complete file tree of your project in the left sidebar
  • Syntax highlighting — View any file with full syntax highlighting for TypeScript, JSX, CSS, JSON, and more
  • Diff view — See exactly what the AI changed in each file after a modification
  • Read-only — The code editor is for viewing only. All code changes are made through the AI chat
You do not edit code directly in the Code tab. The AI is your code editor — describe what you want changed in the chat, and the AI modifies the files for you.

​
Data

The Data tab lets you explore and manage your app’s database.
  • Schema visualization — View an entity-relationship diagram (ERD) showing your database tables and their relationships
  • Table browser — Select any table to view its rows. You can add, edit, and delete rows directly from this interface
  • External databases — If you have connected external databases, their schemas appear here as well
The Data tab is essential for verifying that your database is structured correctly and that data is flowing as expected.

​
Logs

The Logs tab displays real-time output from your development server.
  • Server logs — See console output from your API routes and server-side code
  • Error tracking — Runtime errors and exceptions appear here with stack traces
  • Debugging — Use this tab to debug server-side issues, inspect API responses, and verify that your backend logic works correctly
When debugging API routes or server-side logic, keep the Logs tab open alongside the Preview tab. You will see server output in real-time as you interact with your app.

​
Analytics

The Analytics tab shows page visit tracking for deployed apps.
  • Page views — See which pages your users visit most frequently
  • Usage patterns — Understand how your team uses the app after deployment
Analytics data is available once your app is deployed and being accessed by users.

​
Workflows

The Workflows tab appears when workflows are enabled for your app.
  • Background jobs — View and manage background tasks
  • Scheduled tasks — Monitor recurring jobs and their execution history
  • Job status — See which workflows are running, completed, or failed

​
External DB Queries

The External DB Queries tab shows a history of queries executed against connected external databases.
  • Query log — Review past queries, their results, and execution times
  • Debugging — Verify that external database queries return the expected data

​
The sidebar

The left sidebar provides quick access to app configuration:
SectionDescription
App settingsRename your app, set custom instructions, configure access levels
IntegrationsView and manage connected services and databases for this app
Recipe stepsWhen building from a recipe, the guided setup steps appear here

​
The chat panel

The chat panel occupies the left portion of the editor. It includes:
  • Message input — Where you type prompts and instructions for the AI
  • Model selector — Switch between AI models (Opus 4.5, Sonnet 4.5, etc.)
  • Mode toggle — Switch between Agent mode (can modify) and Ask mode (read-only)
  • Image attachment — Upload screenshots or images to include with your message
  • Thread selector — Switch between conversation threads or create new ones
  • Suggestions — Contextual next-step suggestions appear after the AI completes a task

​
Resizing panels

You can customize the editor layout to match your workflow:
  • Drag the divider between the chat panel and editor panel to adjust their relative sizes
  • Open multiple tabs to quickly switch between preview, code, and data views
  • Focus on chat by making the editor panel smaller when you are prompting
  • Focus on preview by making the chat panel smaller when reviewing your app

​
What’s next