Конспекты

Name: Vercel AI SDK: Полный гид по созданию AI-агентов и LLM-приложений на TypeScript
Uploaded: 2026-03-19T08:23:41.412Z
Channel: Matt Pocock
Description: Практическое руководство по Vercel AI SDK: генерация текста, структурированный JSON, мультимодальность и создание автономных AI-агентов с Tool Calling.

Смарт-конспекты YouTube-видео — ключевые идеи и инсайты без необходимости смотреть часовые ролики

Все конспекты

📝 Конспект2026/03/19Смотреть оригинал

Vercel AI SDK: Полный гид по созданию AI-агентов и LLM-приложений на TypeScript

Практическое руководство по Vercel AI SDK: генерация текста, структурированный JSON, мультимодальность и создание автономных AI-агентов с Tool Calling.

📝

Смарт-конспект

Упомянутые инструменты

Vercel

Все конспекты

Источник

КаналMatt Pocock

Конспект добавлен2026/03/19

Смотреть на YouTube

Содержание

Загрузка...

🎯 О чём этот конспект: Подробное руководство по использованию Vercel AI SDK — универсальной библиотеки для работы с любыми LLM (OpenAI, Anthropic, локальные модели). Разбираются все ключевые возможности: от простой генерации текста до создания автономных агентов с вызовом инструментов (tool calling).

👤 Кому будет полезно: Вайбкодерам и Fullstack-разработчикам, которые хотят внедрить AI в свои проекты, используя типизированный и модульный подход без привязки к конкретному провайдеру.

✨ Что получите: Готовые паттерны кода для стриминга ответов, извлечения структурированных данных (JSON), работы с изображениями/PDF и настройки агентских циклов с обратной связью.

1. Унифицированный интерфейс и замена провайдеров

Контекст: Главная проблема при разработке AI-сервисов — различие API у разных вендоров (OpenAI, Anthropic, Google). Если вы захотите сменить модель, придется переписывать весь "клей" (обработку стриминга, форматов и ошибок). Vercel AI SDK решает это через абстракцию LanguageModel. Вы пишете код один раз, а затем просто подставляете нужный пакет провайдера. Это позволяет легко тестировать разные модели и избегать vendor lock-in.

Выгода: Экономия десятков часов на переписывании интеграций и возможность мгновенного переключения на более дешевую или мощную модель.

Как применить:

Шаг 1: Установка базы — npm — Установите основное ядро и нужных провайдеров.

npm install ai @ai-sdk/openai @ai-sdk/anthropic

Шаг 2: Инициализация модели — TypeScript — Создайте объект модели, который будете передавать в функции SDK.

import { openai } from '@ai-sdk/openai';
import { anthropic } from '@ai-sdk/anthropic';
 
const model = openai('gpt-4o'); // Или anthropic('claude-3-5-sonnet-20240620')

2. Генерация и стриминг текста

Контекст: Обычная генерация текста заставляет пользователя ждать полного ответа (иногда 10-20 секунд). Стриминг позволяет выводить токены по мере их генерации, что критично для UX. SDK предоставляет функции generateText (для простых задач) и streamText (для чатов и интерфейсов).

Выгода: Мгновенный отклик приложения (TTFT — Time To First Token) и улучшение пользовательского опыта.

Как применить:

Шаг 1: Стриминг в консоль или API — streamText — Используйте асинхронный итератор для обработки потока.

import { streamText } from 'ai';
 
const { textStream } = await streamText({
  model: anthropic('claude-3-haiku-20240307'),
  prompt: 'Напиши короткое стихотворение о коде.',
});
 
for await (const textPart of textStream) {
  process.stdout.write(textPart);
}

3. Структурированные выходы (Structured Outputs) через Zod

Контекст: Для автоматизации (например, извлечения данных в БД) нам нужен не просто текст, а валидный JSON. AI SDK интегрирован с библиотекой Zod для описания схем. Функция generateObject гарантирует, что ответ модели будет строго соответствовать заданной схеме, а TypeScript подсветит все поля.

Выгода: 100% типизация ответов AI и отсутствие ошибок парсинга JSON на бэкенде.

Как применить:

Шаг 1: Описание схемы — Zod — Создайте схему объекта с описанием полей (это помогает модели понять контекст).
Шаг 2: Генерация объекта — generateObject — Передайте схему в функцию.

import { z } from 'zod';
import { generateObject } from 'ai';
 
const recipeSchema = z.object({
  recipe: z.object({
    name: z.string().describe('Название блюда'),
    ingredients: z.array(z.string()).describe('Список ингредиентов'),
    steps: z.array(z.string())
  })
});
 
const { object } = await generateObject({
  model: openai('gpt-4o'),
  schema: recipeSchema,
  prompt: 'Как приготовить яичницу?',
});
 
console.log(object.recipe.name); // Полная автодополняемость в IDE

4. Мультимодальность: Работа с изображениями и PDF

Контекст: Современные модели (GPT-4o, Claude 3.5) умеют "видеть". AI SDK позволяет передавать файлы (картинки, документы) через массив сообщений. Вы можете передать как локальный файл в виде Uint8Array, так и просто URL.

Выгода: Возможность автоматического создания описаний (Alt-текстов), анализа чеков, счетов и графиков.

Как применить:

Шаг 1: Передача URL — messages — Используйте тип image или file в контенте сообщения.

import { generateText } from 'ai';
 
const { text } = await generateText({
  model: openai('gpt-4o'),
  messages: [
    {
      role: 'user',
      content: [
        { type: 'text', text: 'Что на этом изображении?' },
        { type: 'image', image: new URL('https://example.com/image.jpg') }
      ],
    },
  ],
});

5. Tool Calling и создание автономных агентов

Контекст: Агенты — это AI, который может выполнять действия (вызывать функции). В AI SDK это реализуется через параметр tools. Главная фишка — параметр maxSteps. Он позволяет модели вызвать инструмент, получить результат и снова вызвать саму себя, чтобы обработать этот результат, формируя автономную петлю (Agentic Loop).

Выгода: Создание систем, которые сами ходят в API погоды, БД или Google Search для уточнения информации.

Как применить:

Шаг 1: Определение инструмента — tool — Опишите параметры и функцию execute.
Шаг 2: Запуск цикла — maxSteps — Укажите количество итераций.

import { tool, streamText } from 'ai';
import { z } from 'zod';
 
const weatherTool = tool({
  description: 'Получить погоду в городе',
  parameters: z.object({ city: z.string() }),
  execute: async ({ city }) => ({ temperature: 25, unit: 'celsius' }),
});
 
const result = await streamText({
  model: openai('gpt-4o'),
  tools: { getWeather: weatherTool },
  maxSteps: 5, // Позволяет агенту сделать до 5 шагов (вызов -> ответ -> анализ)
  prompt: 'Какая погода в Лондоне и что мне надеть?',
});

FAQ

В: Нужно ли платить Vercel за использование AI SDK?

О: Нет, библиотека полностью бесплатная и Open Source. Вам не нужен Next.js или аккаунт на Vercel. Вы платите только провайдерам моделей (OpenAI, Anthropic) за использованные токены через их API-ключи.

В: Можно ли использовать локальные модели через Ollama или LM Studio?

О: Да, SDK поддерживает протокол OpenAI-compatible. Вы можете создать провайдера через createOpenAI и указать локальный URL (например, http://localhost:11434/v1).

В: В чем разница между generateObject и streamObject?

О: generateObject ждет завершения генерации всего JSON и возвращает готовый объект. streamObject позволяет получать частичные данные (Partial Object) в процессе генерации, что полезно для мгновенного отображения элементов интерфейса.

В: Как SDK помогает бороться с галлюцинациями?

О: Через механизмы Tool Calling и maxSteps. Когда модель обязана вызвать инструмент для получения данных (например, из БД), она "заземляется" (grounding) на реальные факты, а не выдумывает их из весов.

В: Поддерживает ли SDK работу с векторными БД и эмбеддингами?

О: Да, в SDK есть функции embed и embedMany, а также встроенная утилита cosineSimilarity для простого семантического поиска без сложных внешних библиотек.

Конспект создан на основе видео «Vercel AI SDK Tutorial - The Best Way to Build AI Apps» канала Matt Pocock. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=mojZpktAiYQ