Skip to main content
Every Vybe app is a Next.js project. The AI writes the code, but it’s yours to read and change. Use the Code tab in the app editor to review what the AI built, make a quick fix yourself, or take a copy of the code.

​
The Code tab

The Code tab shows the app’s files in a tree on the left and an editor on the right. It opens on src/app/page.tsx, the app’s home page. The editor understands TypeScript: it highlights code, and you can jump from a name to where it’s defined in another file. You can edit any file that isn’t locked. You can’t create, rename or delete files in the Code tab. Ask the AI to do that.

​
Save or discard your edits

When you have unsaved edits, a dot appears on the Code tab (tooltip “Unsaved changes”). At the bottom of the editor:
  • Save changes saves your edits. You see “Code saved”, and the preview updates. Vybe merges your edits with any changes the AI made since you opened the file.
  • Cancel discards all your unsaved edits.
A save counts as an unpublished change, like any AI change. Publish the app to put it live. See Publishing.
Saving in the Code tab doesn’t create a checkpoint. If you later restore an earlier checkpoint, your saves made after that checkpoint are undone too. See Version history.
To send someone straight to a line of code, add ?tab=code&path=<file>:<line> to the editor URL. For example:

​
Locked files

Some files hold configuration that Vybe manages. They’re marked with a gear icon in the file tree and are read-only, for you and for the AI: Only those specific helper files are locked. The rest of src/client-lib/ and src/server-lib/ can be edited. You don’t need to edit locked files to get things done:
  • To add a package, ask the AI. It installs it from Vybe’s approved list. See Tech stack.
  • To change the database, ask the AI. It changes tables with SQL. See App data.

​
Project structure

New apps start with this layout:
A few conventions help when you read the code:
  • Each folder under src/app is a URL path. src/app/orders/page.tsx is the /orders page, and src/app/api/orders/route.ts is the /api/orders endpoint.
  • Files that run in the browser start with "use client".
  • Pages and components read data through SWR hooks defined in src/client-lib/api-client.ts, which call the app’s own API routes.
  • API routes read and write the database with SQL.
For the full list of frameworks and libraries, see Tech stack.

​
The README

The AI keeps a README.md at the root of the app with three sections:
  1. The app’s high-level strategy and goal.
  2. The changes made so far.
  3. Architecture and technical decisions, with the reasons behind them.
The AI reads the README before it starts new work. It’s also the quickest way for you to catch up on an app someone else built.

​
Tests and type checks

As it builds features, the AI writes Jest unit tests in .test.ts files next to the code, and runs a type check after making changes. When Auto Build is on, every change is also built and tested, and failures go back to the AI to fix. See The app editor. You can ask for more coverage at any time:
Add unit tests for the discount calculation, including the edge cases for zero and negative amounts.

​
Download the code

Click Download All Files under the file tree to download the app’s code as a ZIP file named after the app.

​
Clone the code with git

Each app’s code lives in a git repository. To clone it, click the git branch icon (tooltip “Clone code”) next to Download All Files. The Clone repository popover gives you:
  • An HTTPS URL, with how long it stays valid (“URL expires in 30 days”).
  • The command to run: git clone <url>.
Click the copy button to copy the URL (“Clone URL copied to clipboard!”).
The clone URL contains a temporary token with read and write access to your app’s code. Anyone who has it can change the app’s code until it expires. Keep it private, and don’t paste it into tickets, chats or shared documents.
Vybe has no GitHub integration or sync.