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:

   ts Копировать

   // app/api/chat/route.ts
   import 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-chat",
       messages: [{ role: "user", content: message }],
     });
     return Response.json({ reply: resp.choices[0].message.content });
   }

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

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

   ts Копировать

   export async function POST(req: Request) {
     const { message } = await req.json();
     const stream = await client.chat.completions.create({
       model: "deepseek/deepseek-chat",
       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 работают как обычно:

   ts Копировать

   // app/api/chat/route.ts
   import { createOpenAI } from "@ai-sdk/openai";
   import { streamText } 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 } = await req.json();
     const result = streamText({
       model: aigate("deepseek/deepseek-chat"),
       messages,
     });
     return result.toDataStreamResponse();
   }

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

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

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