Конспект: Vercel AI SDK: Полный гид по созданию AI-приложений и Generative UI — VibCoderZ - VibeCoderz

Загрузка...

🎯 О чём этот конспект: Разбор ключевых возможностей Vercel AI SDK для веб-разработчиков и вайбкодеров. В видео эксперт из Vercel (Nico) демонстрирует переход от простых текстовых запросов к сложной экстракции данных, инструментам (tools) и динамическому генеративному интерфейсу.

👤 Кому будет полезно: Разработчикам на Next.js и React, которые хотят внедрить AI не просто как чат-бот, а как глубоко интегрированную часть продукта с предсказуемым поведением и красивым UI.

✨ Что получите: Вы научитесь работать с единым API для всех LLM, использовать Zod для структурированных ответов, настраивать Tool Calling (агентов) и создавать интерфейсы, которые меняются в зависимости от ответов нейросети.

1. Единый интерфейс для всех LLM (Unified Provider API)

Контекст: Главная проблема при разработке AI-сервисов — привязка к конкретному SDK провайдера (OpenAI, Anthropic и т.д.). Если вы захотите сменить модель GPT-4o на Claude 3.5 Sonnet, вам придется переписывать значительную часть кода. Vercel AI SDK решает это через систему провайдеров, позволяя менять модель одной строкой кода. Это критически важно для экспериментов и масштабирования, так как разные модели лучше справляются с разными задачами (например, Gemini Flash для классификации, а Sonnet для написания кода).

Выгода: Экономия десятков часов на рефакторинге и возможность мгновенного тестирования новых моделей по мере их выхода.

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

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

npm i ai @ai-sdk/openai

Шаг 2: Вызов модели — Используйте функцию generateText для получения ответа.

import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';
 
const { text } = await generateText({
  model: openai('gpt-4o'),
  prompt: 'Напиши краткое саммари для статьи...',
});

2. Структурированная экстракция данных с помощью Zod

Контекст: Нейросети часто возвращают лишний текст («Конечно, вот ваш JSON...»). Для программной обработки нам нужен чистый объект. Функция generateObject в связке с библиотекой Zod гарантирует, что на выходе будет строго типизированный объект, соответствующий вашей схеме. Если модель ошибется в формате, SDK автоматически провалидирует ответ или выдаст ошибку, предотвращая падение фронтенда.

Выгода: 100% детерминизм данных и полная поддержка TypeScript (IntelliSense) при работе с ответами AI.

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

Шаг 1: Определение схемы — Используйте z.object для описания нужных полей.
Шаг 2: Вызов функции — Передайте схему в generateObject.

import { generateObject } from 'ai';
import { z } from 'zod';
 
const { object } = await generateObject({
  model: openai('gpt-4o-mini'),
  schema: z.object({
    category: z.enum(['bug', 'feature', 'billing']),
    urgency: z.enum(['low', 'medium', 'high']),
    reason: z.string().describe('Краткое обоснование срочности'),
  }),
  prompt: 'Классифицируй этот тикет: "Не могу войти в аккаунт"',
});
 
// Теперь object.category имеет тип 'bug' | 'feature' | 'billing'

3. Использование метода .describe() для управления AI

Контекст: Иногда текстового промпта недостаточно, чтобы объяснить модели, как заполнять конкретное поле в JSON. Вместо раздувания основного промпта, Vercel AI SDK позволяет добавлять инструкции прямо в схему Zod через метод .describe(). Это дает модели контекст на уровне конкретного ключа, что значительно повышает точность (например, указание формата даты или ограничение по количеству слов).

Выгода: Более чистые промпты и высокая точность заполнения сложных объектов.

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

Шаг 1: Добавление описания — Опишите правила для поля прямо в схеме.

const schema = z.object({
  summary: z.string().describe('Саммари текста, максимум 2 предложения'),
  language: z.string().describe('Полное название языка, например "Russian", а не "RU"'),
});

4. Tool Calling: Обучение AI работе с внешним миром

Контекст: LLM ограничены своими знаниями и не знают текущую погоду или состояние вашей БД. Tools (инструменты) позволяют модели вызывать ваши функции. Если пользователь спрашивает «Какая погода в Москве?», модель понимает, что у неё есть инструмент getWeather, возвращает запрос на его вызов, SDK выполняет ваш код и передает результат обратно модели для финального ответа.

Выгода: Превращение чат-бота в полноценного AI-агента, способного выполнять действия (бронировать билеты, проверять остатки на складе).

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

Шаг 1: Описание инструмента — Определите название, описание и схему входных параметров.
Шаг 2: Реализация логики — Напишите функцию execute, которая будет вызвана.

const { text } = await streamText({
  model: openai('gpt-4o'),
  tools: {
    getWeather: {
      description: 'Получить текущую погоду в локации',
      parameters: z.object({
        city: z.string().describe('Город для проверки погоды'),
      }),
      execute: async ({ city }) => {
        const temp = await fetchWeatherFromAPI(city); // Ваша логика
        return { temperature: temp, unit: 'celsius' };
      },
    },
  },
  prompt: 'Какая погода в Токио?',
});

5. Generative UI: Рендеринг React-компонентов вместо текста

Контекст: Текстовые ответы в чате — это скучно. Generative UI позволяет отображать полноценные интерактивные React-компоненты (карточки, графики, кнопки) прямо в потоке сообщений. С помощью хука useChat и свойства toolInvocations вы можете перехватить результат работы инструмента и вместо текста отрендерить, например, красивый виджет погоды.

Выгода: Пользовательский опыт уровня Apple или Airbnb, где AI не просто говорит, а предоставляет интерфейс для решения задачи.

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

Шаг 1: Настройка фронтенда — Используйте toolInvocations внутри маппинга сообщений.
Шаг 2: Рендеринг компонента — Проверьте состояние инструмента и выведите нужный UI.

// Внутри компонента чата
{message.toolInvocations?.map((toolInvocation) => {
  const { toolName, toolCallId, state } = toolInvocation;
 
  if (toolName === 'getWeather' && state === 'result') {
    const { result } = toolInvocation;
    return <WeatherCard key={toolCallId} data={result} />;
  }
  return null;
})}

FAQ

В: Можно ли использовать AI SDK без Next.js? О: Да, ядро SDK работает в любой среде Node.js. Вы можете запускать его в скриптах, GitHub Actions или на любых серверах. Хуки типа useChat также портированы на Vue, Svelte и Solid.

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

В: Как ограничить количество шагов агента, чтобы он не ушел в бесконечный цикл? О: Используйте параметр maxSteps в хуке useChat или функции streamText. Обычно 5-10 шагов достаточно для решения большинства задач с вызовом инструментов.

В: Можно ли использовать локальные модели через Ollama? О: Да, AI SDK поддерживает Ollama через соответствующий провайдер. Это позволяет запускать Llama 3 или Mistral локально с тем же API.

В: Как передать состояние чата в базу данных? О: В SDK есть колбэки типа onFinish, где вы можете получить финальный текст и массив сообщений для сохранения в Postgres или MongoDB. Также Vercel предоставляет готовый шаблон Chatbot Template с уже настроенной базой Neon.

Конспект создан на основе видео «AI SDK: Exceptional User Experiences for AI Apps» канала Ray Fernando. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=8lzBr9QAo_8