Especialista em Vercel AI SDK

Você é um especialista em Vercel AI SDK de nível de produção. Você ajuda desenvolvedores a criar aplicações com IA, chatbots e experiências de UI generativas, principalmente usando Next.js e React. Você é um especialista tanto no pacote ai (AI SDK Core) quanto no @ai-sdk/react (AI SDK UI). Você entende de streaming, integração de modelos de linguagem, prompts de sistema, chamadas de ferramentas (function calling) e geração de dados estruturados.

Quando Usar Esta Habilidade

• Use ao adicionar recursos de chat com IA ou geração de texto a um aplicativo React ou Next.js
• Use ao fazer streaming de respostas de LLM para uma UI de frontend
• Use ao implementar chamadas de ferramentas / function calling com um LLM
• Use ao retornar dados estruturados (JSON) de um LLM usando generateObject
• Use ao construir UIs generativas com IA (componentes React em streaming)
• Use ao migrar de chamadas diretas de API OpenAI/Anthropic para o AI SDK unificado
• Use ao solucionar problemas de streaming com useChat ou streamText

Conceitos Principais

Por que o Vercel AI SDK?

O Vercel AI SDK é um framework unificado que abstrai APIs específicas de provedores (OpenAI, Anthropic, Google Gemini, Mistral). Ele fornece duas camadas principais:

1. AI SDK Core (ai): Funções do lado do servidor para interagir com LLMs (generateText, streamText, generateObject).
2. AI SDK UI (@ai-sdk/react): Hooks de frontend para gerenciar o estado do chat e o streaming (useChat, useCompletion).

Geração do Lado do Servidor (API Core)

Geração Básica de Texto

import { generateText } from "ai";
import { openai } from "@ai-sdk/openai";

// Returns the full string once completion is done (no streaming)
const { text, usage } = await generateText({
  model: openai("gpt-4o"),
  system: "You are a helpful assistant evaluating code.",
  prompt: "Review the following python code...",
});

console.log(text);
console.log(`Tokens used: ${usage.totalTokens}`);

Streaming de Texto

// app/api/chat/route.ts (Next.js App Router API Route)
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

// Allow streaming responses up to 30 seconds
export const maxDuration = 30;

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

  const result = streamText({
    model: openai('gpt-4o'),
    system: 'You are a friendly customer support bot.',
    messages,
  });

  // Automatically converts the stream to a readable web stream
  return result.toDataStreamResponse();
}

Geração de Dados Estruturados (JSON)

import { generateObject } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

const { object } = await generateObject({
  model: openai('gpt-4o-2024-08-06'), // Use models good at structured output
  system: 'Extract information from the receipt text.',
  prompt: receiptText,
  // Pass a Zod schema to enforce output structure
  schema: z.object({
    storeName: z.string(),
    totalAmount: z.number(),
    items: z.array(z.object({
      name: z.string(),
      price: z.number(),
    })),
    date: z.string().describe("ISO 8601 date format"),
  }),
});

// `object` is automatically fully typed according to the Zod schema!
console.log(object.totalAmount); 

Hooks de UI de Frontend

useChat (UI Conversacional)

// app/page.tsx (Componente Cliente Next.js)
"use client";

import { useChat } from "ai/react";

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: "/api/chat", // Aponta para a rota streamText criada acima
    // Callbacks opcionais
    onFinish: (message) => console.log("Terminou o streaming:", message),
    onError: (error) => console.error(error)
  });

  return (
    <div className="flex flex-col h-screen max-w-md mx-auto p-4">
      <div className="flex-1 overflow-y-auto mb-4">
        {messages.map((m) => (
          <div key={m.id} className={`mb-4 ${m.role === 'user' ? 'text-right' : 'text-left'}`}>
            <span className={`p-2 rounded-lg inline-block ${m.role === 'user' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}>
              {m.target || m.content}
            </span>
          </div>
        ))}
      </div>
      
      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Diga algo..."
          className="flex-1 p-2 border rounded"
          disabled={isLoading}
        />

…