AI в Next.js через AI Gateway: route handler, стриминг, AI SDK

В Next.js модель вызывают на сервере — в route handler'е (App Router) или API route. Клиентские компоненты обращаются к этому эндпоинту, а ключ остаётся в окружении. Ниже — базовый handler, потоковый вариант и подключение через Vercel AI SDK. Модели берём из каталога AI Gateway.

Подготовка

Положите ключ в .env.local как AIGATE_API_KEY (без префикса NEXT_PUBLIC_ — иначе он попадёт в браузер). Базовый URL шлюза — https://ai-gatewey.ru/v1.

npm install openai

Реализация

1. 1
   Route handler с обычным ответом

   Файл app/api/chat/route.ts — серверный эндпоинт, который зовёт модель и возвращает JSON:

   tstsКопировать

   // app/api/chat/route.tsimport OpenAI from "openai";​const client = new OpenAI({baseURL: "https://ai-gatewey.ru/v1",apiKey: process.env.AIGATE_API_KEY,});​export async function POST(req: Request) {const { message } = await req.json();const resp = await client.chat.completions.create({model: "deepseek/deepseek-v4-flash",messages: [{ role: "user", content: message }],});return Response.json({ reply: resp.choices[0].message.content });}

2. 2
   Потоковый ответ

   Включаем stream: true и отдаём чанки через ReadableStream — фронтенд читает тело потоком:

   tstsКопировать

   export async function POST(req: Request) {const { message } = await req.json();const stream = await client.chat.completions.create({model: "deepseek/deepseek-v4-flash",messages: [{ role: "user", content: message }],stream: true,});​const encoder = new TextEncoder();return new Response(new ReadableStream({async start(controller) {for await (const chunk of stream) {const delta = chunk.choices[0]?.delta?.content;if (delta) controller.enqueue(encoder.encode(delta));}controller.close();},}),{ headers: { "Content-Type": "text/plain; charset=utf-8" } },);}

3. 3
   Вариант на Vercel AI SDK

   AI Gateway совместим с провайдером @ai-sdk/openai: указываем baseURL, и useChat/streamText работают как обычно:

   tstsКопировать

   // app/api/chat/route.tsimport { createOpenAI } from "@ai-sdk/openai";import { streamText, convertToModelMessages, type UIMessage } from "ai";​const aigate = createOpenAI({baseURL: "https://ai-gatewey.ru/v1",apiKey: process.env.AIGATE_API_KEY,});​export async function POST(req: Request) {const { messages }: { messages: UIMessage[] } = await req.json();const result = streamText({model: aigate("deepseek/deepseek-v4-flash"),messages: convertToModelMessages(messages),});return result.toUIMessageStreamResponse();}

Какие модели подойдут

Для интерактивного UI важна скорость; массовые запросы дешевле гонять через быструю модель, а флагман подключать точечно:

Частые вопросы