VERCEL AI SDK: СОЗДАНИЕ AI-ПРИЛОЖЕНИЙ 2026

Полное руководство по Vercel AI SDK: потоковая генерация, мультимодальные ответы, function calling и RAG на TypeScript. От установки до продакшена.

# 1. ЧТО ТАКОЕ VERCEL AI SDK

Vercel AI SDK — это TypeScript-фреймворк с открытым исходным кодом, созданный командой Vercel для построения AI-приложений с потоковой генерацией контента. В отличие от монолитных решений вроде LangChain, AI SDK предлагает минималистичный, композируемый подход: вы получаете атомарные функции (generateText, streamText, useChat), которые комбинируются друг с другом без лишней абстракции.

Ключевая философия SDK: стриминг по умолчанию. Каждый ответ от модели передаётся клиенту по мере генерации токенов — пользователь видит результат мгновенно, а не ждёт полной генерации. Это даёт ощущение «живого» AI, как в ChatGPT. SDK абстрагирует транспорт (HTTP, WebSocket, Server-Sent Events) и предоставляет единый API для десятков провайдеров: OpenAI, Anthropic, Google AI, Mistral, Groq, xAI и локальных моделей через Ollama.

В 2026 году Vercel AI SDK стал стандартом де-факто для Next.js-приложений с AI: его используют стартапы Y Combinator, enterprise-команды и инди-разработчики. Причина проста — SDK решает ровно три проблемы: потоковая передача данных от модели к UI, унифицированный API для любых LLM-провайдеров и React-хуки для мгновенной интеграции с фронтендом.

История SDK началась в 2023 году как внутренний инструмент Vercel для демонстрации возможностей Edge Functions. За три года он эволюционировал от простой обёртки над OpenAI API до полноценного фреймворка с поддержкой мультимодальных моделей, генерации изображений, структурированных выводов и сложных агентных цепочек. Сегодня SDK управляется независимой командой внутри Vercel, имеет активное сообщество контрибьюторов на GitHub и более ста тысяч проектов в продакшене. Ключевое архитектурное решение — адаптерная модель провайдеров: каждый LLM-провайдер реализует единый интерфейс, и переключение между ними не требует изменения бизнес-логики приложения.

Важно понимать философию проекта: Vercel AI SDK не пытается быть «всем для всех». Он не включает в себя оркестрацию агентов, графовые цепочки вызовов или сложные memory-менеджеры — для этого есть LangChain. Вместо этого SDK берёт на себя ровно то, что нужно веб-разработчику: транспортный слой между LLM и браузером, управление состоянием чата на клиенте и типизированные инструменты для вызова внешних API. Минимализм здесь — осознанный выбор, а не ограничение.

# 2. УСТАНОВКА И ПЕРВЫЙ ЗАПУСК

Установка Vercel AI SDK тривиальна — это обычный npm-пакет, который ставится в любой Next.js-проект. Начнём с создания свежего приложения и подключения SDK к OpenAI. Вам понадобится Node.js 20+, npm и API-ключ от провайдера (OpenAI, Anthropic или другого — SDK работает со всеми). Создайте проект, установите зависимости и запустите первый AI-запрос за 5 минут.

# Шаг 1: Создаём Next.js-проект
npx create-next-app@latest my-ai-app --typescript --tailwind --app
cd my-ai-app

# Шаг 2: Устанавливаем Vercel AI SDK + провайдера
npm install ai @ai-sdk/openai

# Шаг 3: Создаём .env.local с API-ключом
OPENAI_API_KEY=sk-your-key-here
    

Теперь напишем первый API-роут. В App Router создайте файл app/api/chat/route.ts. Этот роут будет принимать сообщения от клиента и возвращать потоковый ответ от GPT-4o:

// app/api/chat/route.ts — первый AI-роут
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

// Разрешаем стриминг (макс. 30 сек на запрос)
export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai('gpt-4o'),
    messages,
  });

  return result.toDataStreamResponse();
}
    

Запустите dev-сервер: npm run dev. Роут готов принимать POST-запросы на /api/chat. Проверьте через curl — вы увидите, как токены приходят по одному в режиме реального времени. Это и есть магия Vercel AI SDK: 15 строк кода, и у вас полноценный потоковый AI-эндпоинт.

Важный нюанс, о котором часто забывают новички: переменные окружения в Next.js. Файл .env.local работает только для серверных компонентов и API-роутов. Если вам нужно передать ключ на клиент (чего делать категорически не рекомендуется), используйте префикс NEXT_PUBLIC_. В продакшене все секреты должны храниться в переменных окружения Vercel и никогда не попадать в клиентский бандл. Для локальной разработки также удобно использовать @ai-sdk/openai-compatible — провайдер, который позволяет подключить любую OpenAI-совместимую конечную точку, включая локальные серверы вроде Ollama и vLLM.

# 3. GENERATETEXT И STREAMTEXT API

Vercel AI SDK предоставляет два основных метода для серверной генерации: generateText — для случаев, когда нужен полный ответ целиком (например, генерация SEO-метаданных или классификация), и streamText — для потоковой передачи токенов клиенту (чат-интерфейсы, live-генерация кода). Оба метода принимают одинаковые параметры: модель, сообщения, системный промпт, температуру, инструменты и так далее.

Ключевое отличие: generateText возвращает Promise, который резолвится после полной генерации, а streamText возвращает объект с методом .toDataStreamResponse() для стриминга. Рассмотрим оба на реальных примерах:

// generateText: ждём полный ответ (подходит для не-UI задач)
import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';

const { text, usage, finishReason } = await generateText({
  model: openai('gpt-4o'),
  system: 'Ты — AI-ассистент для генерации SEO-заголовков.',
  prompt: 'Сгенерируй 5 SEO-заголовков для статьи про Vercel AI SDK.',
  temperature: 0.7,
  maxTokens: 500,
});

// Вывод: полный текст, метаданные использования токенов
console.log(text);         // 5 SEO-заголовков
console.log(usage);       // { promptTokens: 42, completionTokens: 128 }
console.log(finishReason);// 'stop' | 'length' | 'tool-calls'

// -----------------------------------------------------

// streamText: потоковая передача токенов (чат, live-интерфейсы)
import { streamText } from 'ai';

const result = streamText({
  model: openai('gpt-4o-mini'),
  messages: await req.json().messages,
  onFinish({ text, usage }) {
    // Колбэк после завершения — логируем использование
    await saveToDatabase({ text, usage });
  },
});

return result.toDataStreamResponse();
// Клиент получает токены через SSE в реальном времени
    

Обратите внимание на onFinish — это мощный хук, который позволяет выполнить побочные эффекты (логирование, сохранение в БД, отправку аналитики) ровно в момент завершения генерации. SDK также поддерживает onStepFinish для многошаговых вызовов (function calling), где модель делает несколько последовательных запросов.

Отдельного упоминания заслуживает флаг experimental_telemetry — экспериментальная, но уже стабильная фича для интеграции с OpenTelemetry. Включив её, вы получаете полную трассировку каждого AI-запроса: сколько времени занял промпт-инжиниринг, сколько — обращение к модели, какие инструменты были вызваны и с каким результатом. Для отладки сложных агентных цепочек это незаменимый инструмент. Все данные экспортируются в любой OTLP-совместимый бэкенд: Jaeger, Grafana Tempo, Datadog или Vercel Observability.

Ещё одна мощная возможность — мультимодальные ответы. SDK позволяет моделям генерировать не только текст, но и изображения, аудио и даже вызывать инструменты параллельно с текстовой генерацией. Например, вы можете отправить изображение на анализ модели GPT-4o и одновременно запросить генерацию описания — всё в одном вызове streamText. Для этого достаточно передать сообщение с типом «image» в массиве messages — SDK сам обработает мультимодальный контент и вернёт структурированный ответ.

# 4. USECHAT HOOK ДЛЯ REACT

useChat — это React-хук из пакета @ai-sdk/react, который связывает ваш фронтенд с API-роутом. Он управляет состоянием сообщений, инпутом, статусом загрузки и автоматически обрабатывает потоковые ответы. Вам не нужно писать fetch-логику вручную — хук делает всё сам. Установите клиентский пакет и создайте чат-компонент:

npm install @ai-sdk/react
    

// components/Chat.tsx — полноценный чат-интерфейс за 20 строк
'use client';

import { useChat } from '@ai-sdk/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } =
    useChat({
      api: '/api/chat',
      initialMessages: [
        { role: 'assistant', content: 'Привет! Чем могу помочь?' }
      ],
    });

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} placeholder="Напишите сообщение..." />
        <button disabled={isLoading}>{isLoading ? 'Думаю...' : 'Отправить'}</button>
      </form>
    </div>
  );
}
    

Хук предоставляет всё необходимое из коробки: messages — массив сообщений с ролями, isLoading — флаг активной генерации, handleSubmit — отправка формы, которая автоматически добавляет сообщение пользователя и делает POST на ваш API-роут. SDK также предоставляет useCompletion для автодополнения текста и useObject для стриминга структурированных JSON-объектов — идеально для форм, генераторов и AI-агентов.

Продвинутое использование хука включает колбэк onToolCall. Когда модель решает вызвать инструмент (например, поиск по документации), хук перехватывает этот вызов и позволяет отобразить промежуточное состояние в UI: «Ищу информацию по вашему запросу...», «Анализирую найденные документы...». Это создаёт ощущение прозрачности — пользователь видит, что именно делает AI в каждый момент времени, а не просто ждёт финального ответа. В паре с useObject это позволяет строить сложные многошаговые интерфейсы без написания серверной логики.

Ещё одна малоизвестная, но критически полезная возможность: кастомные middleware-функции в конфигурации хука. Поле fetch позволяет переопределить стандартный HTTP-клиент — добавьте заголовки аутентификации, обработку ошибок или переподключение при обрыве соединения. Поле body принимает дополнительные данные, которые будут отправлены вместе с сообщениями: ID сессии, настройки модели, контекст пользователя. А метод reload позволяет повторить последний запрос — незаменимо при экспериментировании с температурой и другими параметрами генерации.

# 5. FUNCTION CALLING / TOOLS

Function calling (вызов функций) — одна из самых мощных возможностей современных LLM. Модель не просто генерирует текст, а решает, какую функцию вызвать и с какими аргументами, чтобы выполнить полезное действие: поиск в базе данных, вызов внешнего API, создание записи в календаре. Vercel AI SDK предоставляет элегантный синтаксис tool() для описания инструментов с авто-валидацией параметров через Zod:

// app/api/chat/route.ts — чат с function calling
import { streamText, tool } from 'ai';
import { z } from 'zod';
import { openai } from '@ai-sdk/openai';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai('gpt-4o'),
    messages,
    tools: {
      // Инструмент 1: получить текущую погоду
      getWeather: tool({
        description: 'Получить погоду для указанного города',
        parameters: z.object({
          city: z.string().describe('Название города'),
        }),
        execute: async ({ city }) => {
          // Реальный API-запрос к сервису погоды
          const res = await fetch(`https://api.weather.com/${city}`);
          return await res.json();
        },
      }),
      // Инструмент 2: поиск в векторной БД
      searchDocs: tool({
        description: 'Поиск по внутренней документации',
        parameters: z.object({
          query: z.string().describe('Поисковый запрос'),
        }),
        execute: async ({ query }) => {
          return await vectorSearch(query);
        },
      }),
    },
    maxSteps: 5, // макс. итераций tool→model→tool
  });

  return result.toDataStreamResponse();
}
    

Модель сама решает, когда вызвать getWeather или searchDocs, генерирует корректные аргументы согласно Zod-схеме, а SDK автоматически выполняет функцию, передаёт результат обратно модели и возвращает финальный ответ клиенту. Параметр maxSteps защищает от бесконечных циклов tool-use. Это основа для построения AI-агентов: модель может вызвать поиск, потом генерацию изображения, потом сохранение в БД — и всё это в рамках одного запроса.

На практике function calling решает несколько классов задач, которые иначе потребовали бы отдельных микросервисов. Поиск в реальном времени: модель вызывает Google Search API или Perplexity, получает актуальные данные и встраивает их в ответ — пользователь видит информацию, которой не было в обучающей выборке. Транзакционные действия: создание задач в Linear, бронирование в календаре, отправка email — модель генерирует вызов, SDK выполняет его, результат возвращается в контекст. Мультиагентная координация: один запрос пользователя может запустить цепочку из 3-5 инструментов, где выход одного служит входом для другого.

Для сложных агентов критически важен параметр toolChoice. По умолчанию модель сама решает, вызывать инструмент или ответить текстом («auto»). Но вы можете форсировать вызов конкретного инструмента (toolChoice: 'required') или даже указать, какой именно инструмент должен быть вызван (toolChoice: { type: 'tool', toolName: 'searchDocs' }). Это даёт полный контроль над потоком выполнения и позволяет строить детерминированные пайплайны, где каждый шаг предопределён.

# СРАВНЕНИЕ: VERCEL AI SDK vs LANGCHAIN.JS vs OPENAI SDK

На рынке TypeScript-инструментов для AI три основных игрока. Вот их честное сравнение по ключевым критериям, важным для реальной разработки:

Вывод: Vercel AI SDK — оптимальный выбор для 90% продакшен-приложений на Next.js. LangChain.js стоит рассматривать только для сложных Research-пайплайнов с десятками шагов, а OpenAI SDK — если вы на 100% привязаны к OpenAI и не планируете менять провайдера.

# 6. RAG С VERCEL AI SDK

RAG (Retrieval-Augmented Generation) — техника, при которой перед генерацией ответа система ищет релевантные документы в векторной базе данных и добавляет их в контекст модели. Это критически важно для AI-приложений, работающих с приватными данными: документацией компании, базой знаний, юридическими документами. Vercel AI SDK включает embed() для векторизации текста и cosineSimilarity для поиска ближайших соседей — всё без внешних зависимостей.

В production-сценарии вы, скорее всего, будете использовать специализированную векторную БД (Pinecone, Weaviate, pgvector), но для быстрого старта и прототипов встроенных инструментов SDK более чем достаточно. Рассмотрим полный пайплайн: загрузка документов → эмбеддинг → поиск → генерация ответа с контекстом:

// lib/rag.ts — полноценный RAG-пайплайн на Vercel AI SDK
import { embed, cosineSimilarity, generateText } from 'ai';
import { openai } from '@ai-sdk/openai';

// Шаг 1: Векторизуем базу документов
const documents = [
  'Vercel AI SDK поддерживает 10+ LLM-провайдеров.',
  'Для деплоя используйте Vercel Edge Functions.',
  'Streaming работает через Server-Sent Events.',
  'RAG требует векторной БД для хранения эмбеддингов.',
];

const embeddingModel = openai.embedding('text-embedding-3-small');

const docEmbeddings = await Promise.all(
  documents.map(async (doc) => {
    const { embedding } = await embed({
      model: embeddingModel,
      value: doc,
    });
    return { text: doc, embedding };
  })
);

// Шаг 2: Поиск релевантных документов по запросу
async function retrieve(query: string, topK = 3) {
  const { embedding: queryEmb } = await embed({
    model: embeddingModel,
    value: query,
  });

  return docEmbeddings
    .map(doc => ({
      ...doc,
      similarity: cosineSimilarity(queryEmb, doc.embedding),
    }))
    .sort((a, b) => b.similarity - a.similarity)
    .slice(0, topK);
}

// Шаг 3: Генерация ответа с найденным контекстом
async function ragQuery(userQuestion: string) {
  const relevantDocs = await retrieve(userQuestion);
  const context = relevantDocs.map(d => d.text).join('\n');

  const { text } = await generateText({
    model: openai('gpt-4o'),
    system: `Ответь на вопрос, используя ТОЛЬКО контекст ниже.
Если ответа нет в контексте — скажи об этом честно.

КОНТЕКСТ:
${context}`,
    prompt: userQuestion,
  });

  return { text, sources: relevantDocs.map(d => d.text) };
}

// Использование:
const answer = await ragQuery('Как работает стриминг в Vercel AI SDK?');
// → "Streaming работает через Server-Sent Events." (с указанием источника)
    

Этот пайплайн — минимальный, но полностью рабочий RAG. В продакшене вы замените массив docEmbeddings на Pinecone или pgvector, добавите чанкинг документов (разбиение длинных текстов на куски по 500–1000 токенов с перекрытием) и кеширование эмбеддингов. Но архитектура останется той же: embed → retrieve → generate. Главное преимущество Vercel AI SDK — весь код на TypeScript, без Python-зависимостей и громоздких абстракций.

Отдельно стоит обсудить стратегию чанкинга — это, пожалуй, самый важный аспект качественного RAG. Фиксированный чанкинг: документ режется на блоки по 500 токенов с перекрытием в 100 токенов между соседними чанками. Подходит для статей и документации. Семантический чанкинг: разбивка по смысловым границам — заголовкам, абзацам, секциям. Даёт более релевантные результаты поиска, но сложнее в реализации. Агентный чанкинг: сама LLM решает, как разбить документ. Самый точный, но и самый дорогой метод. Для старта рекомендуем фиксированный чанкинг с перекрытием — он покрывает 80% сценариев и требует минимум кода.

Ещё один production-совет: всегда добавляйте метаданные к каждому чанку — название документа, дату, автора, номер страницы. Это позволит модели ссылаться на источники в ответе («Согласно документу X от 2025 года...»), что критически важно для enterprise-применений, где требуется аудит и верификация ответов. Vercel AI SDK не накладывает ограничений на структуру метаданных — вы храните их в том виде, который удобен вашему приложению.

# 7. ДЕПЛОЙ НА VERCEL

Vercel AI SDK создан той же командой, что и платформа Vercel, поэтому деплой максимально бесшовный. Ваше Next.js-приложение с AI-роутами деплоится одной командой и автоматически оптимизируется под Edge Runtime — это значит, что API-роуты выполняются на ближайшем к пользователю edge-узле, минимизируя задержку стриминга.

Важные настройки для продакшена: увеличьте maxDuration в роутах (AI-модели могут думать дольше стандартных 10 секунд), настройте переменные окружения в Vercel Dashboard и подключите Vercel AI Gateway для кеширования и rate-limiting:

# Шаг 1: Установите Vercel CLI
npm i -g vercel

# Шаг 2: Деплой (из корня проекта)
vercel --prod

# Шаг 3: Добавьте переменные окружения в Vercel Dashboard
# Settings → Environment Variables:
OPENAI_API_KEY=sk-...
ANTHROPIC_API_KEY=sk-ant-...

# Шаг 4 (опционально): включите AI Gateway для кеширования
vercel ai-gateway enable
    

Ключевой файл конфигурации — vercel.json в корне проекта. Он определяет, какие роуты выполняются в Edge Runtime, а какие — в Serverless (Node.js). AI-роуты обычно идут в Edge для минимальной задержки, но если вы используете библиотеки, несовместимые с Edge (например, Sharp для изображений), оставьте их на Node.js:

// vercel.json — конфигурация деплоя
{
  "functions": {
    "app/api/chat/route.ts": {
      "runtime": "edge",
      "maxDuration": 60
    },
    "app/api/rag/route.ts": {
      "runtime": "nodejs",
      "maxDuration": 120
    }
  }
}
    

После деплоя ваше приложение доступно по HTTPS на домене *.vercel.app (или кастомном домене). Vercel автоматически масштабирует инстансы под нагрузку, а AI Gateway кеширует повторяющиеся запросы, сокращая затраты на API-вызовы до 60%. Для мониторинга используйте встроенную аналитику Vercel: latency, error rate и usage breakdown по провайдерам.

Vercel AI SDK — это современный, минималистичный и невероятно эффективный фреймворк для создания AI-приложений на TypeScript. За 7 секций мы прошли полный путь: от установки и первого «Hello, AI» до продакшен-деплоя с RAG и function calling. Ключевые выводы:

• Стриминг — дефолт. Пользователь видит ответ мгновенно, без ожидания полной генерации. Это критично для retention и UX.
• Один API — 10+ провайдеров. Переключение между OpenAI, Anthropic, Google AI и локальной Ollama — замена одной строки. Никакого vendor lock-in.
• React-хуки решают фронтенд. useChat — это 90% UI-логики чата в 5 строках кода. Для всего остального есть кастомные обработчики.
• Function calling — нативно. Zod-схемы, авто-выполнение, мультистеповые цепочки. Строительство AI-агентов становится тривиальным.
• RAG без Python. Эмбеддинги, косинусное сходство и генерация — всё на TypeScript, всё в одном пакете.
• Vercel-деплой за 30 секунд. Edge Runtime, AI Gateway с кешированием, автоскейлинг. От git push до продакшена — меньше минуты.

Если вы строите AI-приложение в 2026 году и ваш стек — Next.js + TypeScript, начните с Vercel AI SDK. Он заменит вам и LangChain (для 90% кейсов), и OpenAI SDK (для кросспровайдерной совместимости), и самописные SSE-костыли. Минимальный бандл, максимальная производительность, нулевой порог входа. Просто установите и начните стримить.