Criando Assistentes Inteligentes com Vercel AI SDK no Next.js

Introdução

Nos últimos anos, integrar modelos de Inteligência Artificial deixou de ser uma funcionalidade experimental para se tornar parte da experiência esperada pelos usuários.

Hoje, não basta apenas obter uma resposta de um modelo de linguagem. A experiência precisa ser rápida, fluida e integrada naturalmente à interface da aplicação.

O desafio é que construir esse tipo de experiência envolve muito mais do que fazer uma requisição HTTP.

A dificuldade não está em consumir uma API de IA, mas em criar uma arquitetura flexível que permita trocar modelos, transmitir respostas em tempo real e manter o código simples de evoluir.

Neste artigo vamos construir um assistente utilizando o Vercel AI SDK, uma biblioteca que abstrai a comunicação com diferentes provedores de IA.

O SDK permite integrar modelos da OpenAI, Google Gemini, Anthropic, Groq e diversos outros utilizando praticamente a mesma API.

Nos exemplos utilizarei a Groq, principalmente pela excelente latência e pelo plano gratuito bastante generoso para desenvolvimento, mas toda a arquitetura apresentada funciona da mesma forma com outros provedores.

O Problema

A primeira implementação de um chatbot normalmente segue este fluxo:

O usuário envia uma mensagem.
O React faz um fetch.
O servidor consulta um modelo de IA.
O usuário espera vários segundos.
A resposta aparece completa na tela.

Essa abordagem funciona, mas gera uma experiência pouco natural.

Entre os principais problemas estão:

sensação de lentidão;
interface bloqueada durante a geração;
gerenciamento manual do histórico da conversa;
implementação complexa de streaming;
muito código para controlar estados.

Além disso, implementar streaming utilizando ReadableStream ou EventSource manualmente costuma aumentar bastante a complexidade da aplicação.

Uma Arquitetura Moderna

Hoje existe uma abordagem muito mais simples.

Ela é composta por duas camadas bem definidas:

Vercel AI SDK, responsável por abstrair a comunicação entre a aplicação e os modelos de IA.
Provedor de IA, responsável por executar a inferência do modelo.

Essa separação é importante porque desacopla completamente a aplicação do provedor utilizado.

React
   │
   ▼
Vercel AI SDK
   │
   ├── OpenAI
   ├── Gemini
   ├── Anthropic
   ├── Groq
   └── Outros provedores

Isso significa que trocar de modelo não exige reescrever toda a aplicação.

Na maioria dos casos, basta alterar a configuração do servidor.

Escolhendo o Provedor

O Vercel AI SDK oferece integração com diversos provedores.

Cada um possui características diferentes.

OpenAI: Excelente qualidade geral e ecossistema consolidado.
Google Gemini: Grande janela de contexto e suporte multimodal.
Anthropic Claude: Muito forte em raciocínio e geração de código.
Groq: Baixa latência e excelente plano gratuito para desenvolvimento.

Neste artigo utilizarei a Groq, mas toda a arquitetura continua válida caso você decida utilizar outro modelo futuramente.

Mantendo as Credenciais Seguras

Independentemente do provedor escolhido, uma regra continua sendo obrigatória:

Nunca exponha sua chave de API no navegador.

No App Router, isso pode ser feito utilizando um Route Handler.

// app/api/chat/route.ts

import { streamText } from "ai";
import { createGroq } from "@ai-sdk/groq";

const groq = createGroq({
  apiKey: process.env.GROQ_API_KEY,
});

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

  const result = await streamText({
    model: groq("llama-3.1-8b-instant"),
    system: `
      Você é um assistente especializado em desenvolvimento Front-end.
      Responda sempre de forma clara, objetiva e educada.
    `,
    messages,
  });

  return result.toDataStreamResponse();
}

Observe que:

a chave permanece apenas no servidor;
o System Prompt fica protegido;
o cliente nunca conversa diretamente com o modelo.

Além disso, caso você queira migrar para outro provedor, normalmente a alteração acontece apenas nessa camada.

Por exemplo:

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

// Gemini
import { createGoogleGenerativeAI } from "@ai-sdk/google";

// Anthropic
import { createAnthropic } from "@ai-sdk/anthropic";

// Groq
import { createGroq } from "@ai-sdk/groq";

Na maior parte dos casos, basta alterar o provider e o modelo utilizado.

Consumindo o Streaming

No cliente, o Vercel AI SDK fornece o hook useChat(), que abstrai toda a lógica de comunicação.

Ele é responsável por:

enviar as mensagens;
atualizar o histórico;
consumir o streaming;
renderizar a resposta conforme ela é gerada.

"use client";

import { useChat } from "ai/react";

export default function Chatbot() {
  const {
    messages,
    input,
    handleInputChange,
    handleSubmit,
    isLoading,
  } = useChat();

  return (
    <div className="flex h-full flex-col p-4">

      <div className="flex-1 space-y-4 overflow-y-auto">
        {messages.map((message) => (
          <div
            key={message.id}
            className={
              message.role === "user"
                ? "text-right"
                : "text-left"
            }
          >
            <span className="inline-block rounded-lg bg-neutral-800 px-4 py-2 text-white">
              {message.content}
            </span>
          </div>
        ))}
      </div>

      <form
        onSubmit={handleSubmit}
        className="mt-4 flex gap-2"
      >
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Faça uma pergunta..."
          className="flex-1 rounded-md border px-3 py-2"
        />

        <button
          disabled={isLoading}
          className="rounded-md bg-blue-600 px-4 py-2 text-white"
        >
          Enviar
        </button>
      </form>

    </div>
  );
}

Enquanto o modelo gera a resposta, o array messages é atualizado automaticamente.

Na prática, o usuário vê o texto sendo escrito em tempo real, sem que seja necessário implementar manualmente toda a lógica de streaming.

Por Que Utilizar o Vercel AI SDK?

Embora seja possível integrar diretamente qualquer API de IA, utilizar o SDK traz algumas vantagens importantes.

API unificada para diferentes provedores.
Streaming de respostas pronto para uso.
Hooks específicos para React.
Código muito menor.
Facilidade para trocar de modelo no futuro.
Integração natural com o App Router do Next.js.

Na prática, você escreve menos código e ganha mais flexibilidade.

Algumas Boas Práticas

Ao desenvolver aplicações baseadas em IA, alguns cuidados fazem bastante diferença:

mantenha as chaves de API exclusivamente no servidor;
utilize streaming para melhorar a experiência do usuário;
mantenha o System Prompt protegido;
trate erros e limites de uso da API;
desacople a interface do provedor de IA;
escolha o modelo conforme o caso de uso (qualidade, velocidade ou custo).

Essas decisões tornam a aplicação muito mais preparada para evoluir conforme novos modelos surgem.

Conclusão

Mais importante do que escolher entre OpenAI, Gemini, Anthropic ou Groq é construir uma arquitetura que permita trocar de provedor com o menor impacto possível.

O Vercel AI SDK resolve exatamente esse problema ao oferecer uma camada de abstração consistente para diferentes modelos, reduzindo a quantidade de código necessária para implementar streaming, gerenciamento de mensagens e comunicação com a IA.

O resultado é uma aplicação mais limpa, modular e preparada para acompanhar a rápida evolução do ecossistema de Inteligência Artificial.

Se amanhã surgir um modelo mais rápido, mais barato ou mais preciso, a arquitetura permanece praticamente a mesma. Basta alterar o provedor e continuar evoluindo a aplicação sem grandes mudanças no restante do código.