# Vite
import { Step, Steps } from 'fumadocs-ui/components/steps';
import Link from 'fumadocs-core/link';
# 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
pnpm
yarn
bun
```bash
npm install peam
```
```bash
pnpm add peam
```
```bash
yarn add peam
```
```bash
bun add peam
```
## Add AskAI to the Root Layout
```tsx
export { Layout };
import { AskAI } from 'peam/client';
import type { ReactNode } from 'react';
import '../index.css';
function Layout({ children }: { children: ReactNode }) {
return (
{/* ... */}
{/* ... */}
{children}
// [!code highlight]
);
}
```
## 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:
```ts
import { createChat } from 'peam/server';
// ... Express setup
const chat = createChat();
// [!code highlight]
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.
```bash
export OPENAI_API_KEY="your-api-key"
```
## Examples
Browse the full app in:
*
examples/vite-react
See the [API Reference](/docs/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.
```ts
import { createChat } from 'peam/server';
import { openai } from '@ai-sdk/openai';
const chat = createChat({
model: openai('gpt-4o-mini'),
});
```
## Sitemap
[Overview of all docs pages](/sitemap.md)