> ## 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

> Complete technology reference for every Vybe app

Every Vybe app is built on the same production-grade technology stack. This page documents every technology, its version, and its role in your app.

***

## Core technologies

| Technology       | Version       | Purpose                                   | Documentation                                        |
| ---------------- | ------------- | ----------------------------------------- | ---------------------------------------------------- |
| **Next.js**      | 15            | React framework with App Router           | [nextjs.org/docs](https://nextjs.org/docs)           |
| **React**        | 19            | UI library for component-based interfaces | [react.dev](https://react.dev)                       |
| **TypeScript**   | 5.5           | Type-safe JavaScript                      | [typescriptlang.org](https://www.typescriptlang.org) |
| **Tailwind CSS** | 4             | Utility-first CSS framework               | [tailwindcss.com](https://tailwindcss.com)           |
| **Shadcn UI**    | Latest        | Component library (50+ components)        | [ui.shadcn.com](https://ui.shadcn.com)               |
| **Recharts**     | Latest        | Charting library                          | [recharts.org](https://recharts.org)                 |
| **Lucide**       | Latest        | Icon library                              | [lucide.dev](https://lucide.dev)                     |
| **Sonner**       | Latest        | Toast notifications                       | [sonner.emilkowal.ski](https://sonner.emilkowal.ski) |
| **PostgreSQL**   | Latest (Neon) | Built-in database                         | [neon.tech/docs](https://neon.tech/docs)             |
| **Prisma**       | Latest        | Database ORM                              | [prisma.io/docs](https://www.prisma.io/docs)         |
| **Inngest**      | Latest        | Background workflows and scheduled jobs   | [inngest.com/docs](https://www.inngest.com/docs)     |

***

## Architectural decisions

These are the key architectural patterns used in every Vybe app. Understanding them helps you write better prompts and understand the AI's output.

### App Router (not Pages Router)

Vybe uses the Next.js 15 App Router exclusively. All pages use the `app/` directory structure with file-based routing.

```
src/app/
  page.tsx              → /
  customers/
    page.tsx            → /customers
    [id]/
      page.tsx          → /customers/:id
  api/
    customers/
      route.ts          → /api/customers
```

<Warning>
  If you are familiar with Next.js Pages Router (`pages/` directory), note that Vybe does not use it. All routing, layouts, and data fetching follow App Router conventions.
</Warning>

### Server Components by default

Components are server-rendered unless explicitly marked with `"use client"` at the top of the file. Server Components can fetch data directly, access the database, and read environment variables.

```tsx theme={null}
// This is a Server Component (default)
export default async function CustomersPage() {
  const customers = await prisma.customer.findMany()
  return <CustomerTable data={customers} />
}
```

```tsx theme={null}
"use client"

// This is a Client Component (explicitly opted in)
export default function SearchBar() {
  const [query, setQuery] = useState('')
  // Client-side interactivity...
}
```

Use Client Components only when you need browser APIs, event handlers, or React state.

### API routes instead of Server Actions

Vybe apps use API routes for all server-side mutations. Server Actions are not used.

```tsx theme={null}
// src/app/api/customers/route.ts
import { NextResponse } from 'next/server'

export async function GET(request: Request) {
  const customers = await prisma.customer.findMany()
  return NextResponse.json(customers)
}

export async function POST(request: Request) {
  const data = await request.json()
  const customer = await prisma.customer.create({ data })
  return NextResponse.json(customer, { status: 201 })
}
```

### Dynamic route params in Next.js 15

Next.js 15 changed how dynamic route parameters work. The `params` object is now a Promise:

```tsx theme={null}
// src/app/customers/[id]/page.tsx
export default async function CustomerPage({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  const customer = await prisma.customer.findUnique({ where: { id } })
  // ...
}
```

<Note>
  This `Promise<{ id: string }>` pattern is specific to Next.js 15 and the App Router. The AI handles this automatically, but it is useful to understand if you are reading the generated code.
</Note>

***

## Database

Every Vybe app includes a built-in PostgreSQL database hosted on Neon. The database is managed through Prisma ORM.

**Key details:**

* Schema is defined in `prisma/schema.prisma`
* Migrations are managed by the AI when you request schema changes
* The database is available in both development (sandbox) and production (deployed app)
* You can also connect external databases (PostgreSQL, MySQL, Amazon Redshift) through Integrations

For more on databases, see [App Data](/data/app-data) and [External Data](/data/external-data).

***

## Background workflows

Inngest powers background processing in Vybe apps. Use workflows for:

* **Scheduled tasks** — sync data every 15 minutes, send daily reports
* **Event-driven processing** — trigger actions when database records change
* **Long-running operations** — batch data processing, multi-step pipelines

Workflows run outside of the request/response cycle, so they are not subject to API route timeouts.

For more on workflows, see [Workflows Overview](/workflows/overview).

***

## What this means for your prompts

You do not need to specify technology choices in your prompts. The AI knows the full stack and uses the right tools automatically. However, understanding the stack helps you:

* **Read the generated code** more easily
* **Ask targeted questions** about how things work
* **Debug issues** by understanding the architecture
* **Write better prompts** by referencing the right concepts (e.g., "add an API route" instead of "add a server action")

***

## What's next

* See which AI models are available: [AI Models Reference](/reference/ai-models)
* Review available packages: [Available Packages](/tips/available-packages)
* Understand platform constraints: [Platform Limitations](/tips/platform-limitations)