# React Router



import { Step, Steps } from 'fumadocs-ui/components/steps';
import Link from 'fumadocs-core/link';

# 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.

<Steps>
  <Step>
    ## Install Dependencies

    <CodeBlockTabs defaultValue="npm">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install peam
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add peam
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add peam
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add peam
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Step>

  <Step>
    ## Add AskAI to the Root Route

    In `app/root.tsx`:

    ```tsx
    import { AskAI } from 'peam/client';

    export default function App() {
      return (
        <div>
          {/* ... */}
          <Outlet />
          // [!code highlight]
          <AskAI />
        </div>
      );
    }
    ```
  </Step>

  <Step>
    ## Add the Peam API Route

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

    ```ts
    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' },
      });
    }
    ```
  </Step>

  <Step>
    ## 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"
    ```
  </Step>
</Steps>

## Examples

Browse the full app in:

* <Link href="https://github.com/peam-ai/peam/tree/main/examples/react-router" external>
    examples/react-router
  </Link>

See the [API Reference](/docs/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 <Link href="https://ai-sdk.dev/docs/foundations/providers-and-models" external>providers and models guide</Link>.

```ts
import { createChat } from 'peam/server';
import { openai } from '@ai-sdk/openai';

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


## Sitemap
[Overview of all docs pages](/sitemap.md)