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

# Full-stack Next.js demo

> Clone-ready Next.js app: manage agents, start live calls, browse history, and play recordings with the official JavaScript SDK.

The **[vatel-full-stack](https://github.com/Devpro-Software/vatel-full-stack)** repository is a small **whitelabel-style** demo (“Agents Acme Inc”) for the Vatel platform. It is a good reference when you want a full UI - not just a single-page snippet - for agents, live voice sessions, call history, transcripts, and recordings.

<Card title="Repository on GitHub" icon="github" href="https://github.com/Devpro-Software/vatel-full-stack">
  Source, README, and issue tracker for the demo application.
</Card>

<Card title="JavaScript SDK" icon="code" href="/deploy/sdk/javascript">
  The demo uses the official Vatel SDK from npm.
</Card>

<Card title="Session token" icon="key" href="/api-reference/session/session-token">
  Short-lived credentials for browser or server-initiated sessions.
</Card>

<Card title="Calls API" icon="list-ul" href="/api-reference/calls/list-calls">
  List calls, fetch a call, and download recordings from your organization.
</Card>

## What you get

* **Agents** - Create and edit voice agents (prompt, voice, model).
* **Calls** - Start a live voice session from an agent page.
* **History** - List past calls, open a call for transcript and recording playback.

## Prerequisites

* **Node.js 20** or newer
* **npm**
* A **Vatel API key** from your Vatel account

## Setup

<Steps>
  <Step title="Clone and install">
    ```bash theme={null}
    git clone https://github.com/Devpro-Software/vatel-full-stack.git
    cd vatel-full-stack
    npm install
    ```
  </Step>

  <Step title="Configure the API key">
    Copy the example environment file and set your key:

    ```bash theme={null}
    cp .env.local.example .env.local
    ```

    In `.env.local`, set **`VATEL_API_KEY`** to your organization API key. The template file defines a single empty `VATEL_API_KEY=` line you should fill in.
  </Step>

  <Step title="Run locally">
    ```bash theme={null}
    npm run dev
    ```

    Open [http://localhost:3000](http://localhost:3000). If you see auth or “missing key” errors, confirm `VATEL_API_KEY`, save `.env.local`, and restart the dev server.
  </Step>
</Steps>

## Quality checks

From the project root:

```bash theme={null}
npm run build
npm run lint
```

## Tech stack

Next.js, React, TypeScript, Tailwind, and the **[@vatel/sdk](https://www.npmjs.com/package/@vatel/sdk)** package. Use this repo as a starting point for your own branded console or internal tools, then swap copy, styling, and routing to match your product.

## Related examples

If you only need a **minimal** Next.js walkthrough (server action for `POST /v1/session-token`, WebSocket session, and mic streaming without the full app shell), see [Next.js](/deploy/examples/nextjs). For **WebRTC in the browser** with `WebRTCSession`, see [WebRTC (browser)](/deploy/examples/webrtc-browser).