Skip to main content
Every Vybe app is a standard Next.js 15 application built on the App Router. The AI generates clean, idiomatic code using popular open-source libraries. Understanding the project structure and available tools helps you communicate more effectively with the AI.

​
Project structure

Your app follows a standard Next.js 15 App Router layout: 
/src
  /app                    # Pages and API routes
    /page.tsx             # Homepage
    /layout.tsx           # Root layout
    /api                  # API route handlers
      /example/route.ts   # Example API endpoint
  /components             # Reusable React components
  /lib                    # Utility functions and helpers
  /client-lib             # Client-side libraries (auth, integrations)
  /server-lib             # Server-side libraries (database, external APIs)
/prisma
  /schema.prisma          # Database schema definition
/public                   # Static assets
  • /src/app — Contains your pages (as page.tsx files) and API routes (as route.ts files). Each folder represents a URL path.
  • /src/components — Reusable React components shared across pages.
  • /src/lib — Shared utility functions, constants, and type definitions.
  • /src/client-lib — Client-side libraries for authentication, integrations, and data queries. These are managed by Vybe and cannot be edited.
  • /src/server-lib — Server-side libraries for database access, external APIs, and integration clients. Also managed by Vybe.
  • /prisma/schema.prisma — Your database schema. The AI modifies this when creating or updating tables.

​
Pre-installed libraries

Every Vybe app comes with a curated set of libraries pre-installed and ready to use.

​
Shadcn UI

A collection of 50+ accessible, customizable UI components built on Radix primitives and Tailwind CSS. The AI uses these components by default when building interfaces. Common components include:
ComponentUse Case
ButtonActions, form submissions
TableData display with rows and columns
DialogModal dialogs and confirmations
FormForm layouts with validation
SelectDropdown selection
CardContent containers
TabsTabbed navigation
BadgeStatus indicators
InputText input fields
ToastNotification messages

​
Recharts

A composable charting library for building data visualizations. The AI uses Recharts with Shadcn’s chart wrapper components to create bar charts, line charts, pie charts, area charts, and more.

​
Tailwind CSS

Utility-first CSS framework for styling. All Vybe apps use Tailwind for layout, spacing, colors, typography, and responsive design. The AI writes Tailwind classes directly in your JSX.

​
Lucide

An icon library with hundreds of icons. The AI uses Lucide icons throughout your app for buttons, navigation, status indicators, and decorative elements.

​
Sonner

A toast notification library. The AI uses Sonner to display success messages, error alerts, and other transient notifications to your app’s users.

​
Server components vs. client components

Next.js 15 uses React Server Components by default. This affects how the AI writes your code:
  • Server Components (default) — Rendered on the server. Can directly access databases and server-side APIs. Cannot use browser APIs, event handlers, or React hooks like useState.
  • Client Components — Rendered in the browser. Required for interactivity (forms, buttons, state management). Must include the "use client" directive at the top of the file.
// Server Component (default) — no directive needed
export default async function DashboardPage() {
  const data = await fetchFromDatabase();
  return <DataTable rows={data} />;
}

// Client Component — requires "use client" directive
"use client";

import { useState } from "react";

export default function SearchForm() {
  const [query, setQuery] = useState("");
  return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
}
The AI handles this distinction automatically, but knowing it helps you understand why some components have the "use client" directive and others do not.

​
Dynamic routes

Next.js 15 uses Promise-based params for dynamic routes. If your app has routes like /customers/[id], the AI generates code that awaits the params: 
export default async function CustomerPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  // Fetch customer by id...
}
This is a Next.js 15 convention that differs from earlier versions. The AI handles it correctly by default.

​
Locked files

Certain system files in your project are locked and cannot be modified by the AI or manually. These files are managed by Vybe to ensure your app’s infrastructure remains stable. Locked files include:
  • package.json and package-lock.json — Dependency management
  • next.config.js — Next.js configuration
  • tsconfig.json — TypeScript configuration
  • prisma/schema.prisma — Database schema (managed via AI SQL tools)
  • .env — Environment variables (managed through app settings)
  • Client and server library files in src/client-lib and src/server-lib
The AI is aware of locked files and will not attempt to edit them directly. For example, instead of editing package.json, the AI uses a dedicated tool to install packages. Instead of editing prisma/schema.prisma directly, the AI runs SQL migrations.

​
Viewing code in the editor

The Code tab in the editor lets you browse your app’s source code:
  • File explorer — A tree view of your project’s files and folders in the left sidebar
  • Syntax highlighting — Full highlighting for TypeScript, JSX, CSS, JSON, SQL, and more
  • File search — Find specific files by name
  • Diff view — After the AI makes changes, see exactly what was added, removed, or modified
The Code tab is read-only. All code changes go through the AI chat.

​
Working with the AI on code

When asking the AI to modify code, you can reference specific files, components, or patterns:
Change the table on the customers page to show 50 rows per page instead of 25.
Move the sidebar navigation into its own component so I can reuse it on other pages.
Add form validation to the create customer page — name and email should be required.
The AI understands your project structure and can find the relevant files based on your description. You do not need to specify exact file paths unless you want to be precise.

​
What’s next