Конспекты
Смарт-конспекты YouTube-видео — ключевые идеи и инсайты без необходимости смотреть часовые ролики
Загрузка...
Смарт-конспекты YouTube-видео — ключевые идеи и инсайты без необходимости смотреть часовые ролики
Практическое руководство по Vercel AI SDK: генерация текста, структурированный JSON, мультимодальность и создание автономных AI-агентов с Tool Calling.
Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
Об авторе →Claude Code + Higgsfield: Создание премиальных анимированных сайтов за часы
Пошаговый гайд по созданию анимированных сайтов уровня Apple с помощью Claude Code и Higgsfield MCP. От вайрфреймов до деплоя на Vercel.
GTM-стратегия нового поколения: Как Vercel и Stripe используют AI-агентов в продажах
Разбор GTM от COO Vercel: роль GTM-инженера, автоматизация SDR через AI, создание Dealbot и подход к продажам как к продукту. Практические советы для стартапов.
SEO-мастеркласс: Как создавать сайты и контент через Claude Code для заработка на трафике
Пошаговое руководство по использованию Claude Code для SEO: от генерации сайта на Next.js до обхода AI-детекторов и технической оптимизации на 100 баллов.
Codex AI: Полный гид по вайбкодингу для создания SaaS-проектов
Пошаговое руководство по Codex AI: установка CLI, режим YOLO, создание приложений на Next.js, интеграция OpenRouter и деплой на Vercel.
Экономика API 2026: Как зарабатывать на топливе для AI-агентов
Пошаговый гид по созданию прибыльных API-сервисов для AI-агентов с помощью Cursor, Supabase и Vercel. От идеи до монетизации за 24 часа.
Google Stitch + Anti-Gravity: Ультимативная связка для AI-дизайна и разработки
Пошаговый гайд по созданию приложений через Google Stitch и Anti-Gravity. Автоматизация дизайна, MCP-протоколы и деплой на Vercel без кода.
Vercel представила Open Agents: создайте своего AI-агента для кодинга
Vercel выпустила Open Agents — опенсорсную платформу для создания кастомных AI-агентов, адаптированных под специфику вашего кода и внутренних процессов.
Обновление Vercel AI: Claude Opus 4.6 Fast Mode и Qwen 3.6 Plus в AI Gateway
Vercel представила масштабные обновления: поддержку Claude Opus 4.6 в режиме Fast Mode, Qwen 3.6 Plus с контекстом 1 млн токенов и новую бету AI SDK 7.0.
Vercel готовится к IPO: 30% приложений на платформе создают AI-агенты
Выручка Vercel взлетела до $340 млн благодаря буму агентной разработки. Треть всех новых деплоев теперь приходится на AI-инструменты.
🎯 О чём этот конспект: Подробное руководство по использованию 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