Overview

Use Astro with React islands to render AskAI where you need it, without turning the whole site into React. The API route lives in src/pages/api/peam.ts, keeping server logic clean and scoped. You get fast pages with a focused, AI-ready experience.

Install Dependencies

npm install peam

Add AskAI in the Base Layout

---
import { AskAI } from 'peam/client';
import '../styles/global.css';

interface Props {
  title: string;
  description?: string;
}

const { title, description } = Astro.props as Props;
---

<html lang="en">
  <head>
    <!-- ... -->
  </head>
  <body class="antialiased">
    <!-- ... -->
    <slot />
    <AskAI client:only="react" />
  </body>
</html>

Add the API Route

Create src/pages/api/peam.ts and add:

export { POST } from 'peam/server';
export const prerender = false;

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

See the API Reference for all available options.

Customize the model

Define your own 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/server';
import { openai } from '@ai-sdk/openai';

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

Astro