Конспекты
Смарт-конспекты YouTube-видео — ключевые идеи и инсайты без необходимости смотреть часовые ролики
Загрузка...
Смарт-конспекты YouTube-видео — ключевые идеи и инсайты без необходимости смотреть часовые ролики
Практическое руководство по Vercel AI SDK: генерация текста, структурированный JSON, мультимодальность и создание автономных AI-агентов с Tool Calling.
Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
Об авторе →Graphify: Как создать карту знаний для AI-агентов и экономить до 70% токенов
Пошаговый гайд по Graphify: установка, настройка графа знаний для Claude Code и Cursor, оптимизация контекста и экономия токенов в больших проектах.
Unreal Engine 5 + Claude Code: Создание игры с нуля через AI-агентов
Пошаговый гид по настройке Claude Code в UE5 с использованием MCP, Vibe UE и Unreal Claude для автоматизации разработки игр и блюпринтов.
Нейромаркетинг и ИИ: Как внедрить психологические триггеры Apple и Coca-Cola в свой бизнес
Практическое руководство по использованию нейромаркетинга и ИИ для роста чека и конверсии. Разбор 13 триггеров и 5 бизнес-кейсов.
Экономика Агентов: Как строить стартапы для ИИ-пользователей
Разбор перехода к Agent-Web: как адаптировать бизнес под ИИ-агентов, внедрить AEO и занять ниши в инфраструктуре для машин.
AI Delivery Business: Как заменить классические AI-агентства и зарабатывать на услугах
Узнайте, почему AI-агентства умирают и как перейти к модели AI Delivery Business с чеками от $2000. Пошаговый план автоматизации услуг через Claude и n8n.
Hyperframe AI: Как создавать профессиональную моушн-графику через код
Пошаговое руководство по использованию Hyperframe для автоматического создания анимаций на видео с помощью AI-агентов и HTML-кода.
Vercel Labs представила Zero: язык программирования, созданный для AI-агентов
Vercel Labs анонсировала экспериментальный системный язык Zero. Вместо человекочитаемых ошибок он выдает JSON-диагностику, позволяя AI-агентам фиксить баги без галлюцинаций.
Vercel запустила Workflows: новый стандарт для разработки AI-агентов
Vercel представила Workflows — платформу для создания отказоустойчивых приложений и AI-агентов на JS, TS и Python без сложной настройки инфраструктуры.
Gemini 3 Flash захватил лидерство на Vercel: почему вайбкодеры выбирают скорость
CEO Vercel Гильермо Раух подтвердил, что легкая модель от Google стала самой популярной на платформе, обойдя Anthropic и OpenAI по количеству запросов.
🎯 О чём этот конспект: Подробное руководство по использованию Vercel AI SDK — универсальной библиотеки для работы с любыми LLM (OpenAI, Anthropic, локальные модели). Разбираются все ключевые возможности: от простой генерации текста до создания автономных агентов с вызовом инструментов (tool calling).
👤 Кому будет полезно: Вайбкодерам и Fullstack-разработчикам, которые хотят внедрить AI в свои проекты, используя типизированный и модульный подход без привязки к конкретному провайдеру.
✨ Что получите: Готовые паттерны кода для стриминга ответов, извлечения структурированных данных (JSON), работы с изображениями/PDF и настройки агентских циклов с обратной связью.
Контекст: Главная проблема при разработке AI-сервисов — различие API у разных вендоров (OpenAI, Anthropic, Google). Если вы захотите сменить модель, придется переписывать весь "клей" (обработку стриминга, форматов и ошибок). Vercel AI SDK решает это через абстракцию LanguageModel. Вы пишете код один раз, а затем просто подставляете нужный пакет провайдера. Это позволяет легко тестировать разные модели и избегать vendor lock-in.
Выгода: Экономия десятков часов на переписывании интеграций и возможность мгновенного переключения на более дешевую или мощную модель.
Как применить:
npm — Установите основное ядро и нужных провайдеров.npm install ai @ai-sdk/openai @ai-sdk/anthropicTypeScript — Создайте объект модели, который будете передавать в функции SDK.import { openai } from '@ai-sdk/openai';
import { anthropic } from '@ai-sdk/anthropic';
const model = openai('gpt-4o'); // Или anthropic('claude-3-5-sonnet-20240620')Контекст: Обычная генерация текста заставляет пользователя ждать полного ответа (иногда 10-20 секунд). Стриминг позволяет выводить токены по мере их генерации, что критично для UX. SDK предоставляет функции generateText (для простых задач) и streamText (для чатов и интерфейсов).
Выгода: Мгновенный отклик приложения (TTFT — Time To First Token) и улучшение пользовательского опыта.
Как применить:
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);
}Контекст: Для автоматизации (например, извлечения данных в БД) нам нужен не просто текст, а валидный JSON. AI SDK интегрирован с библиотекой Zod для описания схем. Функция generateObject гарантирует, что ответ модели будет строго соответствовать заданной схеме, а TypeScript подсветит все поля.
Выгода: 100% типизация ответов AI и отсутствие ошибок парсинга JSON на бэкенде.
Как применить:
Zod — Создайте схему объекта с описанием полей (это помогает модели понять контекст).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Контекст: Современные модели (GPT-4o, Claude 3.5) умеют "видеть". AI SDK позволяет передавать файлы (картинки, документы) через массив сообщений. Вы можете передать как локальный файл в виде Uint8Array, так и просто URL.
Выгода: Возможность автоматического создания описаний (Alt-текстов), анализа чеков, счетов и графиков.
Как применить:
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') }
],
},
],
});Контекст: Агенты — это AI, который может выполнять действия (вызывать функции). В AI SDK это реализуется через параметр tools. Главная фишка — параметр maxSteps. Он позволяет модели вызвать инструмент, получить результат и снова вызвать саму себя, чтобы обработать этот результат, формируя автономную петлю (Agentic Loop).
Выгода: Создание систем, которые сами ходят в API погоды, БД или Google Search для уточнения информации.
Как применить:
tool — Опишите параметры и функцию execute.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: 'Какая погода в Лондоне и что мне надеть?',
});В: Нужно ли платить 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