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 install peam @peam-ai/next

Add AskAI to the Root Layout

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 (
    <html lang="en">
      <body className="antialiased">
        {/* ... */}
        {children}
        <AskAI />
      </body>
    </html>
  );
}

Add the Peam API Route

Create app/api/peam/route.ts in your project and add:

export const maxDuration = 30;
export { POST } from '@peam-ai/next/route';

Wrap Next.js Config with withPeam

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.

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:

See the 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.

import { createChat } from '@peam-ai/next/route';
import { openai } from '@ai-sdk/openai';

export const POST = createChat({
  model: openai('gpt-4o-mini'),
}).handler;

Next.js

On this page