API ROUTER.
Вход

Интеграция с Vercel AI SDK

Стриминг ответов нейросетей в приложениях на React, Next.js и SvelteKit с использованием хуков useChat и useCompletion.

Vercel AI SDK — современный стандарт фронтенд-разработки для генеративных интерфейсов. Он предоставляет удобные реактивные хуки (useChat, useCompletion) и серверные адаптеры для потоковой передачи токенов прямо в компоненты пользовательского интерфейса с минимальной задержкой.

Серверный адаптер OpenAI в Next.js

В серверном роуте Next.js App Router (app/api/chat/route.ts) настраивается экземпляр createOpenAI с baseURL: 'https://api-router.velar.plus/v1'. Поток токенов транслируется на фронтенд через streamText.

Ключевые технические возможности

  • Мгновенный стриминг в UI: Отображение ответа буква за буквой с плавной анимацией без мерцаний.
  • Автоматическое управление состоянием чата: Хук useChat сам управляет списком сообщений, статусом загрузки и повторной отправкой.
  • Поддержка генерации компонентов (Generative UI): Возможность рендера интерактивных React-компонентов прямо из ответа модели.
  • Работа на Edge и Serverless: Легковесные адаптеры, оптимизированные для работы в бессерверных средах.

Пример интеграции в коде

Ниже представлен базовый пример отправки запроса с использованием стандартного клиента. Убедитесь, что ваш токен создан в разделе Ключи управления API: 


import OpenAI from "openai";

// Инициализация стандартного SDK с базовым URL Api Router
const client = new OpenAI({
  baseURL: "https://api-router.velar.plus/v1",
  apiKey: process.env.API_ROUTER_KEY, // Ваш ключ от сервиса
});

async function run() {
  const response = await client.chat.completions.create({
    model: "anthropic/claude-sonnet", // Семейство модели без жесткой привязки к устаревающим номерам
    messages: [
      { role: "system", content: "Вы профессиональный инженер-архитектор." },
      { role: "user", content: "Как настроить надежную маршрутизацию запросов?" }
    ],
    temperature: 0.2,
  });

  console.log("Ответ модели:", response.choices[0].message.content);
}

run();

Связанные разделы документации

Для глубокого погружения в тему изучите следующие материалы: