Streaming de Respostas IA com React Server Components e Vercel AI SDK

A febre da Inteligência Artificial fez com que toda empresa de software tentasse colocar um "Assistente Inteligente" dentro do seu sistema da noite para o dia. O problema é que 90% dessas implementações nascem com uma arquitetura amadora e falha.

O erro fatal? A Chamada Síncrona Bloqueante.

Quando o seu usuário pergunta algo complexo para a IA (como "Gere um relatório de vendas do mês passado"), modelos como o GPT-4o ou Claude podem demorar de 10 a 20 segundos para raciocinar e cuspir a resposta completa. Se você usar uma API tradicional em Node.js ou um servidor Serverless padrão (que possui limites de tempo de 10 segundos na Vercel ou AWS Lambda), a requisição vai explodir. O cliente verá um erro 504 Gateway Timeout ou a famosa "Tela Branca da Morte".

A única solução Enterprise aceitável para isso é o Streaming.

Neste artigo, vamos te mostrar como usar o Vercel AI SDK para construir uma conexão contínua entre o seu Frontend (Next.js) e o modelo de IA, entregando a resposta palavra por palavra na tela do cliente, exatamente como o ChatGPT faz, travando a latência percebida em zero.

---

O Vercel AI SDK: A Ponte Definitiva

O Vercel AI SDK é uma biblioteca de código aberto que padroniza a comunicação com dezenas de provedores de IA (OpenAI, Anthropic, Google) usando as tecnologias de WebStreams.

Ao invés de processar a IA em um servidor pesado e centralizado, nós vamos colocar essa rota de API diretamente na Malha Edge da Vercel. Isso significa que a rota não sofre de Cold Starts e não tem limites rigorosos de Timeout.

1. Criando a Rota da API (Backend)

Vamos criar a rota que recebe a mensagem do usuário e se conecta com o GPT-4o. Note a presença vital do export const runtime = 'edge';.

// src/app/api/chat/route.ts
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

// 1. Forçamos a execução na Borda para evitar Timeouts e Cold Starts
export const runtime = 'edge';

export async function POST(req: Request) {
  // 2. Extraímos as mensagens do corpo da requisição
  const { messages } = await req.json();

  // 3. Disparamos a chamada para a OpenAI. 
  // A função streamText NÃO espera o modelo terminar de pensar.
  // Ela começa a cuspir os pedaços (chunks) imediatamente.
  const result = await streamText({
    model: openai('gpt-4o'),
    system: 'Você é um assistente de suporte focado em ajudar clientes de um SaaS B2B.',
    messages,
  });

  // 4. Retornamos o stream contínuo para o cliente (Frontend)
  return result.toAIStreamResponse();
}

2. O React Component Inteligente (Frontend)

Agora, vamos criar a interface. O Vercel AI SDK nos fornece o hook useChat, que esconde toda a complexidade de ler WebStreams e atualizar o estado do React em tempo real.

// src/components/SupportChatbot.tsx
'use client';

import { useChat } from 'ai/react';

export default function SupportChatbot() {
  // O hook gerencia tudo: o histórico de mensagens, o input do usuário
  // e a leitura do streaming em tempo real (palavra por palavra).
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: '/api/chat',
  });

  return (
    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
      <div className="space-y-4 mb-8">
        {messages.map(m => (
          <div 
            key={m.id} 
            className={`p-4 rounded-lg ${m.role === 'user' ? 'bg-gray-100 text-right' : 'bg-blue-50'}`}
          >
            <strong>{m.role === 'user' ? 'Você: ' : 'IA: '}</strong>
            {m.content}
          </div>
        ))}
      </div>

      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          className="w-full p-2 border border-gray-300 rounded shadow-xl"
          value={input}
          placeholder="Como posso te ajudar hoje?"
          onChange={handleInputChange}
        />
        <button 
          type="submit"
          className="bg-black text-white px-4 py-2 rounded font-bold"
        >
          Enviar
        </button>
      </form>
    </div>
  );
}

A Vantagem Estratégica do Streaming

Ao implementar essa arquitetura, você resolve três problemas mortais de uma vez só:

1. Retenção de Usuário: Ao ver a primeira palavra aparecendo na tela em menos de 500ms, o cérebro do usuário entende que o sistema é rápido. Ele não abandona a página enquanto a IA está redigindo o texto longo.
2. Infraestrutura Resiliente: Você não prende conexões pesadas no seu banco de dados ou no seu servidor Node.js principal. O trabalho bruto é terceirizado para o provedor da LLM e entregue pela malha distribuída da Vercel.
3. Escala Ilimitada: Como configuramos a rota para rodar no Edge, 10.000 clientes podem abrir o suporte ao mesmo tempo que a Arquitetura de Alta Demanda vai absorver a carga pagando centavos.

A Inteligência Artificial parou de ser um laboratório de testes; ela é agora o núcleo de engajamento dos softwares modernos. Se a sua empresa ainda desenvolve IAs que deixam o usuário olhando para um "ícone de carregamento" girando por 15 segundos, o seu produto já está obsoleto.

---

Precisa de apoio técnico para a sua empresa?

Se a sua operação busca especialistas para modernização de sistemas legados ou desenvolvimento de sistemas sob medida com arquitetura de alta performance (Next.js e Supabase), conheça meus serviços de tecnologia ou fale diretamente comigo pelo WhatsApp.