> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vybe.build/llms.txt
> Use this file to discover all available pages before exploring further.

# Tech stack

> The frameworks, libraries and packages every Vybe app is built with, and what the AI can install

Every Vybe app starts from the same starter project, so all apps share one stack. You don't need to name technologies in your prompts, because the AI already knows them. Knowing the stack helps when you read the code or ask for something specific.

New apps start with the versions below. Apps created earlier may use older versions.

## Core

| Technology | Version | Role |
| - | - | - |
| [Next.js](https://nextjs.org/docs) | 15.4, App Router | Pages, layouts and API routes |
| [React](https://react.dev) | 18.3 | User interface |
| [TypeScript](https://www.typescriptlang.org) | 5.8 | Typed code. Strict mode and strict null checks are off. |
| Node.js | 24 | Server runtime |
| [Tailwind CSS](https://tailwindcss.com) | 3.4 | Styling |
| PostgreSQL | | The app's database |

## User interface

| Library | Role |
| - | - |
| [shadcn/ui](https://ui.shadcn.com) | 56 pre-installed components in `src/components/ui`, built on Radix UI. See [Building UIs](https://docs.vybe.build/apps/building-uis.md). |
| [Recharts](https://recharts.org) 2 | Charts, through shadcn/ui's chart component |
| [Lucide](https://lucide.dev) | Icons |
| [Sonner](https://sonner.emilkowal.ski) | Toast notifications |
| [next-themes](https://github.com/pacocoursey/next-themes) | Light and dark mode |
| [TanStack Table](https://tanstack.com/table) 8 | Sortable, filterable data tables |
| [dnd-kit](https://dndkit.com) | Drag and drop, including the sortable list component |
| [react-markdown](https://github.com/remarkjs/react-markdown) | Rendering Markdown |
| Embla Carousel, cmdk, react-day-picker, Vaul, react-resizable-panels, input-otp | Behind the carousel, command menu, calendar, drawer, resizable panel and one-time code components |

## Data and forms

| Library | Role |
| - | - |
| [SWR](https://swr.vercel.app) 2 | Data fetching and caching. Pages read data through SWR hooks in `src/client-lib/api-client.ts`, and changes show on screen right away while the server catches up. |
| [React Hook Form](https://react-hook-form.com) 7 | Forms |
| [Zod](https://zod.dev) 3 | Validating input and data shapes |
| [date-fns](https://date-fns.org) 3 | Working with dates |
| [Axios](https://axios-http.com) | HTTP requests |

## Collaboration and rich text

| Library | Role |
| - | - |
| [Tiptap](https://tiptap.dev) 3 | Rich text editing, used by the rich text editor component |
| [Liveblocks](https://liveblocks.io/docs) 3 | Real-time collaboration: live cursors and presence, who's online, shared state, collaborative editing and comments |
| [Yjs](https://yjs.dev) | Syncing shared documents for collaborative editing |

Liveblocks is set up for you. There's no API key to add, and each app's collaboration rooms are kept separate from other apps. Shared rooms are open to everyone who can use the app, and the AI can make a room private to one person for personal data.

## Database

Each app has its own PostgreSQL database. See [App data](https://docs.vybe.build/apps/data.md).

* The AI creates and changes tables by running SQL directly. The app doesn't use an ORM: `prisma/schema.prisma` is a locked placeholder.
* The app's server code queries the database with SQL through a helper in `src/server-lib`.
* Apps can also read and write your organization's shared databases, and query external PostgreSQL, MySQL and Redshift databases your organization has connected. See [Databases](https://docs.vybe.build/connections/databases.md).

## Background jobs

Apps run scheduled and background work with [Inngest](https://www.inngest.com/docs). Jobs live in `src/inngest/functions`. See [Background jobs](https://docs.vybe.build/apps/background-jobs.md).

## Sign-in and users

Vybe handles sign-in, so apps have no login page of their own. Everyone who opens a published app is signed in to Vybe, and the app can read the current user's name, email and profile image. That's enough to build per-person features like "show my tasks". See [Access and sharing](https://docs.vybe.build/apps/access-and-sharing.md).

## Connections and AI coworkers

From the app's code, the AI can use:

* Integrations your organization or you have connected. See [Integrations](https://docs.vybe.build/connections/integrations.md).
* [Custom APIs](https://docs.vybe.build/connections/custom-apis.md). Vybe adds the API's credentials to each request, so they never appear in the app's code.
* [Data queries](https://docs.vybe.build/connections/data-queries.md).
* AI coworkers linked to the app, called from server code to get a structured judgment back. See [Apps overview](https://docs.vybe.build/apps/overview.md#apps-and-ai-coworkers).

## Built-in integrations

These work in every app without connecting anything:

| Integration | What it does |
| - | - |
| Person enrichment | Identify a person and enrich information about them |
| Email lookup | Look up personal email addresses |
| AI | Generate text and structured data with OpenAI and Google Gemini models |

## Testing

The AI writes unit tests with [Jest](https://jestjs.io) and runs TypeScript type checks after its changes. See [Working with code](https://docs.vybe.build/apps/working-with-code.md#tests-and-type-checks).

## Packages

The starter project already includes everything listed on this page. You can't add arbitrary npm packages: neither you nor the AI can run `npm install`, and `package.json` is locked.

The AI can install these extra packages when a feature needs them:

| Package | Use it for |
| - | - |
| [React Flow](https://reactflow.dev) | Node-based editors and diagrams: flowcharts, org charts, pipeline builders |
| Tiptap | Rich text editing. Already included in new apps; installable for older ones. |
| Liveblocks | Real-time collaboration. Already included in new apps; installable for older ones. |

Ask for the feature and the AI installs what it needs:

> Create a workflow builder where people add steps, connect them with arrows and configure each step.

If you need something the stack doesn't cover, describe what you're trying to build. The AI can often get there with what's available, for example by drawing a custom visualization with SVG instead of adding a charting library.

## Code conventions

The AI follows the Next.js App Router conventions:

* Each folder in `src/app` is a URL path, with `page.tsx` for pages and `route.ts` for API routes.
* Components render on the server unless the file starts with `"use client"`, which interactive components need.
* Route parameters, like the `id` in `/customers/[id]`, are read by awaiting `params`:

```tsx theme={null}
export default async function CustomerPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  // ...
}
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.