---
title: "AI Kit Next.js"
description: "Next.js utilities for AI apps — streaming API routes, SSE helpers, and App/Pages Router handlers for AINative completions."
canonical: "https://docs.ainative.studio/docs/ai-kit/nextjs"
last-updated: "2026-10-03T21:47:10.764Z"
---

# AI Kit Next.js

Source: https://docs.ainative.studio/docs/ai-kit/nextjs

> Next.js utilities for AI apps — streaming API routes, SSE helpers, and App/Pages Router handlers for AINative completions.

# AI Kit Next.js

Server-side Next.js utilities for building AI-powered apps — streaming API routes,
Server-Sent Events (SSE) helpers, and request/response utilities for both the App
Router and Pages Router.

```bash
npm install @ainative/ai-kit-nextjs
```

**Requires:** Next.js 13/14/15 and React 18/19.

:::note
This SDK is in **alpha** (`0.1.0-alpha.x`). The API may change before 1.0.
:::

## Streaming route (App Router)

`createStreamingRoute` wraps a handler and returns an App Router route handler that
streams AI completions to the client as SSE.

```ts
// app/api/chat/route.ts
import { createStreamingRoute } from '@ainative/ai-kit-nextjs';

export const POST = createStreamingRoute(async ({ request, stream }) => {
  const { messages } = await request.json();
  // stream tokens back to the client via the provided stream controller
  await stream.fromCompletion({
    apiUrl: 'https://api.ainative.studio/api/v1/chat/completions',
    apiKey: process.env.AINATIVE_API_KEY!,
    model: 'gpt-oss-120b',
    messages,
  });
});
```

`createStreamingRoute(handler, config?)` returns
`(request: NextRequest, context?) => Promise<Response>`.

## API route (Pages Router)

`createAPIRoute` produces a classic Pages Router handler
(`(req, res) => Promise<void>`):

```ts
// pages/api/chat.ts
import { createAPIRoute } from '@ainative/ai-kit-nextjs';

export default createAPIRoute(async (req, res) => {
  // ...handle the request, write JSON or stream via the SSE helpers below
});
```

## SSE + response helpers

| Export | Purpose |
|---|---|
| `createSSEStream()` | Create an SSE stream you can write events to |
| `sendSSEMessage(controller, msg)` | Push an `SSEMessage` through a stream controller |
| `formatSSE(msg)` | Serialize a message to the SSE wire format |
| `parseRequestBody(req, opts?)` | Parse/validate a request body (`RequestParseOptions`) |
| `createSuccessResponse(data, opts?)` | Build a standard success `Response` |
| `createErrorResponse(error, opts?)` | Build a standard error `Response` |

Event types are enumerated by `SSEEventType` (`TokenEvent`, `UsageEvent`,
`MetadataEvent`, `ErrorEvent`).

## Middleware

CORS and related middleware live under the `./middleware` subpath:

```ts
import { /* CORS helpers */ } from '@ainative/ai-kit-nextjs/middleware';
```

Configure allowed origins/methods with `CORSConfig`.

## See also

- [AI Kit Overview](/docs/ai-kit/overview) — the full toolkit and shared core
- [AI Kit React](/docs/ai-kit/react) — client hooks and UI components
- [AI Kit Vue](/docs/ai-kit/vue) · [AI Kit Svelte](/docs/ai-kit/svelte)