Assistente inteligente com streaming em tempo real
Assistente inteligente com streaming em tempo real
Como criar um chatbot com personalidade usando a API da OpenAI, streaming de respostas e Next.js App Router. Do zero ao deploy.
Um assistente IA integrado ao portfolio que responde perguntas sobre o desenvolvedor, suas habilidades e projetos.
Respostas aparecem token por token usando ReadableStream, sem esperar a resposta completa.
Personalidade, tom de voz e knowledge base definidos para responder como assistente do portfolio.
Mensagens validadas no backend com schemas diferenciados para user e assistant.
Limite de mensagens por sessão e detecção de quota/rate limit da API.
Widget flutuante com fullscreen no mobile, ScrollArea, timestamps e sugestões iniciais.
Todas as strings do chat traduzidas em 4 idiomas via next-intl.
Passo a passo para obter sua API key e começar a usar.
Acesse platform.openai.com e crie uma conta. Você pode usar Google, Microsoft ou email.
Criar contaVá em Settings → Billing e adicione créditos. O mínimo é $5. O modelo gpt-4.1-nano custa ~$0.10/1M tokens de input.
Ver BillingVá em API Keys e gere uma nova chave. Copie e guarde — ela só é mostrada uma vez.
Gerar KeyAdicione a chave no .env.local do seu projeto Next.js. Nunca exponha no frontend.
OPENAI_API_KEY=sk-proj-sua_chave_aqui
Os modelos nano da OpenAI são extremamente baratos. Para um portfolio, o custo é praticamente zero.
Melhor custo-benefício para chatbots simples
Mais inteligente, bom para respostas complexas
Modelo mais capaz, para casos avançados
Com $5 de crédito inicial você tem milhares de conversas. Perfeito para portfolio.
Visão geral de como as peças se conectam.
Widget flutuante com estado local, streaming via fetch + ReadableStream, e UI com framer-motion.
Route handler em /api/chat que recebe mensagens, valida com Zod e faz streaming da resposta da OpenAI.
SDK oficial com stream: true. Modelo gpt-4.1-nano com system prompt customizado e max_tokens controlado.
Arquivo dedicado com personalidade, regras de comportamento e knowledge base completo sobre o desenvolvedor.
A route handler do Next.js que conecta frontend e OpenAI.
import OpenAI from "openai";import { z } from "zod";import { SYSTEM_PROMPT } from "@/lib/chat/system-prompt";const bodySchema = z.object({messages: z.array(z.union([z.object({ role: z.literal("user"), content: z.string().max(500) }),z.object({ role: z.literal("assistant"), content: z.string().max(2000) }),])),});export async function POST(request: Request) {const body = await request.json();const parsed = bodySchema.safeParse(body);if (!parsed.success) return Response.json({ error: "Invalid" }, { status: 400 });const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });const stream = await openai.chat.completions.create({model: "gpt-4.1-nano",max_tokens: 300,stream: true,messages: [{ role: "system", content: SYSTEM_PROMPT },...parsed.data.messages.slice(-6),],});const readable = new ReadableStream({async start(controller) {for await (const chunk of stream) {const text = chunk.choices[0]?.delta?.content;if (text) controller.enqueue(new TextEncoder().encode(text));}controller.close();},});return new Response(readable, {headers: { "Content-Type": "text/plain; charset=utf-8" },});}
Validação com Zod: schemas separados para user (max 500 chars) e assistant (max 2000 chars)
Streaming: ReadableStream que envia tokens em tempo real
Segurança: API key nunca exposta, rate limit detection, error handling graceful
Context window: Envia apenas as últimas 6 mensagens para economizar tokens
O system prompt define quem o chatbot é, como se comporta e o que sabe.
export const SYSTEM_PROMPT = `Você é o assistente virtual do portfolio de [Seu Nome].REGRAS:- Fale sempre em TERCEIRA PESSOA sobre o desenvolvedor- Seja profissional mas descontraído- Use analogias de código quando fizer sentido- Redirecione perguntas fora do escopo educadamente- Respostas curtas e objetivas (max 3 parágrafos)DADOS DO DESENVOLVEDOR:- Nome: [Seu Nome]- Cargo: Desenvolvedor Frontend Senior- Experiência: +8 anos com React, Next.js, TypeScript- Skills: React, Next.js, React Native, Tailwind, Node.js- Projetos: [Liste seus projetos principais]ESCOPO:- Responde sobre: habilidades, projetos, experiência, stack- NÃO responde sobre: vida pessoal, política, assuntos genéricos`;
Defina regras claras: 'Fale em terceira pessoa', 'Não invente informações'
Inclua knowledge base: dados reais sobre o dev, projetos, skills
Limite o escopo: 'Redirecione perguntas fora do escopo educadamente'
Defina tom de voz: profissional mas descontraído, com analogias de código
Mantenha compacto: prompts grandes consomem mais tokens a cada request
Componente React com estado local, streaming e UI responsiva.
Botão fixo no canto inferior com animação de open/close e opacity no mobile.
Usa fetch + ReadableStream para mostrar a resposta sendo digitada em tempo real.
Em telas < 420px, o chat ocupa a tela toda com botão de fechar dedicado.
Chips clicáveis que preenchem o input, guiando o usuário na primeira interação.
Cada mensagem mostra o horário, como em apps de chat reais.
Controle no frontend para evitar uso excessivo da API por sessão.
Tudo que você precisa para implementar seu chatbot.
Clique no ícone de chat no canto inferior direito e converse com o assistente IA deste portfolio.