Overview

Mount AskAI in your root route and expose a simple /api/peam action endpoint. Peam streams responses from the route action while keeping your React Router app fully client-driven.

Install Dependencies

npm install peam

Add AskAI to the Root Route

In app/root.tsx:

import { AskAI } from 'peam/client';

export default function App() {
  return (
    <div>
      {/* ... */}
      <Outlet />
      <AskAI />
    </div>
  );
}

Add the Peam API Route

Create app/routes/api.peam.ts and add:

import { createChat } from 'peam/server';

const handler = createChat().handler;

export async function action({ request }: { request: Request }) {
  return handler(request);
}

export function loader() {
  return new Response(JSON.stringify({ error: 'Method not allowed' }), {
    status: 405,
    headers: { 'Content-Type': 'application/json' },
  });
}

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/react-router

See the API Reference for all available options.

Customize the model

Pass a custom model into 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/server';
import { openai } from '@ai-sdk/openai';

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

React Router