Overview

Add Peam to a Vite + React SSR app by mounting AskAI in your layout and wiring a simple API route. Your server calls createChat() per request, while the client streams results from /api/peam. It’s a lightweight setup that keeps your stack fast and flexible.

Install Dependencies

npm install peam

Add AskAI to the Root Layout

export { Layout };

import { AskAI } from 'peam/client';
import type { ReactNode } from 'react';
import '../index.css';

function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head>
        {/* ... */}
      </head>
      <body>
        {/* ... */}
        {children}
        <AskAI />
      </body>
    </html>
  );
}

Add an API Endpoint in the Express Server

The server handler is built with createChat() from peam/server and invoked per request.

Create or edit api/server.ts and add the /api/peam route:

import { createChat } from 'peam/server';

// ... Express setup

const chat = createChat();

app.post('/api/peam', async (req, res) => {
  // ... convert to Request
  const response = await chat.handler(request);
  // ... stream response
});

// ... server startup

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"

Examples

Browse the full app in:

examples/vite-react

See the API Reference for all available options.

Customize the model

Pass a custom model to createChat when wiring your route. 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/server';
import { openai } from '@ai-sdk/openai';

const chat = createChat({
  model: openai('gpt-4o-mini'),
});

Vite