# Next.js
import { Step, Steps } from 'fumadocs-ui/components/steps';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import Link from 'fumadocs-core/link';
# Overview
Connect Peam to your Next.js app by adding the AskAI client and a single API route.
Wrap your config with `withPeam()` so the build adapter can generate the search index.
You’ll be running in minutes with a clean, production-ready setup.
## Setup
## Install Dependencies
npm
pnpm
yarn
bun
```bash
npm install peam @peam-ai/next
```
```bash
pnpm add peam @peam-ai/next
```
```bash
yarn add peam @peam-ai/next
```
```bash
bun add peam @peam-ai/next
```
## Add AskAI to the Root Layout
```tsx
import type { Metadata } from 'next';
import { AskAI } from 'peam/client';
import './globals.css';
export const metadata: Metadata = {
title: 'Next.js Example - Peam',
description: 'A simple Next.js example application with Peam',
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
{/* ... */}
{children}
// [!code highlight]
);
}
```
## Add the Peam API Route
Create `app/api/peam/route.ts` in your project and add:
```ts
export const maxDuration = 30;
// [!code highlight]
export { POST } from '@peam-ai/next/route';
```
## Wrap Next.js Config with withPeam
```ts
import withPeam from '@peam-ai/next';
const nextConfig = {
/* config options here */
};
export default withPeam()(nextConfig);
```
## Export the OpenAI API Key
Peam uses ChatGPT (OpenAI GPT-4o) by default, so `OPENAI_API_KEY` must be set in your environment.
```bash
export OPENAI_API_KEY="your-api-key"
```
Next.js 14 or older
Next.js 15+ uses the build adapter configured by `withPeam()`. For Next.js 14 (or older), add a `postbuild` script
that runs `peam` to generate the index after `next build`.
## Examples
Browse the example apps for a complete setup:
*
examples/nextjs-14
*
examples/nextjs-15
*
examples/nextjs-16
See the [API Reference](/docs/api-reference) for all available options.
## Customize the model
If you want a different model, define your own route handler and pass a model to `createChat`. Peam uses the Vercel AI SDK, so import models from the provider package you choose. See the providers and models guide.
```ts
import { createChat } from '@peam-ai/next/route';
import { openai } from '@ai-sdk/openai';
export const POST = createChat({
model: openai('gpt-4o-mini'),
}).handler;
```
## Sitemap
[Overview of all docs pages](/sitemap.md)