> ## Documentation Index
> Fetch the complete documentation index at: https://lousho.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Next.js and other Fetch-API frameworks

`createRouteHandler(agent, options?)` serves an agent from a route file of any
framework whose handlers take a Web `Request` and return a `Response`: the
Next.js App Router, SvelteKit, Remix / React Router, Hono, Bun.serve. It is a
thin wrapper over the same session API as `lousho dev` and the deployed server
([Deployment](/deployment)), so the React, Vue and Svelte bindings work against it
unchanged. It imports no framework and no `node:*` module.

## Next.js App Router

```ts theme={null}
// app/api/agent/[[...path]]/route.ts
import { createAgent, createRouteHandler } from '@lousho/build-ai-agent';

const agent = createAgent({ model: 'openai/gpt-4o-mini', instructions: 'You are helpful.' });

export const { GET, POST } = createRouteHandler(agent, {
  basePath: '/api/agent',
  auth: process.env.AGENT_TOKEN,
  uiMessageStream: true,
});
```

**A route with no `auth` is public**: anyone who can reach it can run your agent
and spend your model budget. Pass a bearer token, or a function that checks your
own session or cookie:

```ts theme={null}
import { createAgent, createRouteHandler } from '@lousho/build-ai-agent';

declare function isSignedIn(request: Request): Promise<boolean>;

export const { GET, POST } = createRouteHandler(createAgent({ model: 'openai/gpt-4o-mini' }), {
  auth: (request) => isSignedIn(request),
});
```

## Routes

All paths are under `basePath` (default `/api/agent`; a trailing slash is
accepted, and a request outside the base path is a 404).

| Route | What it does |
| - | - |
| `POST <basePath>` | `{ input, sessionId? }`: the turn streamed as SSE. This is what `useLoushoAgent({ url })` posts; without a `sessionId` each turn is a fresh session |
| `POST <basePath>/approvals/:id` | `{ approved, note? }` or `{ answer }`: the continuation streamed (`useLoushoAgent`'s `approvalsUrl`) |
| `POST <basePath>/chat` | `{ sessionId, input }`: the session API of the deployed server |
| `GET <basePath>/chat/:sessionId` | the session's transcript and pending approvals |
| `POST <basePath>/chat/:sessionId/approvals/:id` | decide an approval in a session |
| `POST <basePath>/ui` | with `uiMessageStream: true`: the AI SDK `useChat` endpoint |
| `GET <basePath>/health` | `ok`, never behind `auth` |

Sessions are kept by the agent's `store` (`createAgent({ store })`), so give
the agent one that outlives a serverless invocation when you use sessions.

## Client: `useLoushoAgent`

```tsx theme={null}
'use client';
import { useLoushoAgent } from '@lousho/build-ai-agent/react';

export function Chat() {
  const agent = useLoushoAgent({ url: '/api/agent', headers: { Authorization: `Bearer ${token}` } }, { approvalsUrl: '/api/agent/approvals' });
  // agent.messages, agent.send(text), agent.approve() ...
}
```

## Client: `useChat`

With `uiMessageStream: true`, point `useChat` at the `ui` route. The chat `id`
names the session, so only the newest user message is sent to the agent
([AI SDK UI](/ai-sdk-ui)).

```tsx theme={null}
import { useChat } from '@ai-sdk/react';
import { DefaultChatTransport } from 'ai';

const { messages, sendMessage } = useChat({ transport: new DefaultChatTransport({ api: '/api/agent/ui' }) });
```

## Other frameworks

The same handler, mounted where the framework wants it:

```ts theme={null}
import { createAgent, createRouteHandler } from '@lousho/build-ai-agent';

const { handler } = createRouteHandler(createAgent({ model: 'openai/gpt-4o-mini' }), { basePath: '/agent', auth: 'secret' });

// SvelteKit: src/routes/agent/[...path]/+server.ts
export const GET = ({ request }: { request: Request }) => handler(request);
export const POST = ({ request }: { request: Request }) => handler(request);

// Hono: app.all('/agent/*', (c) => handler(c.req.raw))
// Bun.serve: fetch: handler
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.