Como criar um Chatbot com Memória

Nível: Iniciante | Tempo estimado: 45–90 minutos | Ferramentas: Cursor, Claude API

---

Introdução

Todo mundo já usou um chatbot que esquece tudo que você disse dois segundos atrás. Frustrante, né?

Nesse tutorial você vai construir um chatbot de verdade — com memória de conversa, personalidade customizada e uma interface bonita — usando vibe coding no Cursor. Você vai descrever o que quer, a IA vai escrever o código, e no final você terá um chatbot funcional rodando na sua máquina.

O diferencial aqui é usar a Claude API da Anthropic como cérebro do chatbot. O Claude é um dos modelos de linguagem mais capazes disponíveis hoje, com janela de contexto enorme e respostas naturais e coerentes — perfeito para um chatbot com memória.

O que vamos construir:

• Interface de chat com histórico visual de mensagens

• Memória da conversa: o bot lembra tudo que foi dito desde o início

• Personalidade customizada via system prompt

• Indicador de "digitando..." enquanto a resposta chega

• Botão para limpar o histórico e começar uma nova conversa

• Design moderno com tema escuro

---

As ferramentas do projeto

Cursor

O Cursor é um editor de código com IA integrada — pense nele como um VS Code onde você pode conversar com a IA diretamente no ambiente de desenvolvimento. Ele lê o contexto do seu projeto inteiro e escreve, edita e corrige código através de comandos em linguagem natural. É a ferramenta favorita de quem pratica vibe coding hoje em dia.

A grande sacada é o Composer: um chat lateral onde você descreve o que quer construir ou mudar, e ele aplica as alterações diretamente nos arquivos do seu projeto.

Claude API

A Claude API é o serviço da Anthropic que permite usar o modelo Claude diretamente nas suas aplicações. Em vez de acessar o Claude pelo chat do claude.ai, você faz chamadas via código e integra a inteligência do Claude em qualquer produto que você criar.

Para este projeto, você vai precisar de uma chave de API da Anthropic. Ela pode ser obtida em console.anthropic.com. A API tem um modelo de pagamento por uso (pay-as-you-go), e para fins de teste o custo é praticamente zero.

Node.js e Next.js

O projeto vai rodar em Next.js, um framework React popular para criar aplicações web. O Node.js é o ambiente necessário para rodá-lo localmente. Se você ainda não tem o Node instalado, o site oficial nodejs.org tem o instalador para todos os sistemas operacionais.

---

Entendendo a memória no chatbot

Antes de começar, vale entender como a "memória" funciona em chatbots com LLMs.

Modelos como o Claude não têm memória nativa entre chamadas. Cada requisição é, tecnicamente, uma conversa nova. O truque para criar memória é simples: a cada nova mensagem do usuário, você envia para a API todo o histórico da conversa junto com a nova mensagem.

Visualmente, é assim:

Usuário: "Qual é a capital da França?"
→ Enviado para API: [{ role: "user", content: "Qual é a capital da França?" }]

Claude: "A capital da França é Paris."

Usuário: "E quantos habitantes ela tem?"
→ Enviado para API: [
    { role: "user", content: "Qual é a capital da França?" },
    { role: "assistant", content: "A capital da França é Paris." },
    { role: "user", content: "E quantos habitantes ela tem?" }
  ]

O modelo recebe o contexto completo e responde com coerência. É exatamente isso que vamos implementar.

---

Passo a Passo

Passo 1 — Crie o projeto no Cursor

Abra o Cursor e use o Composer (atalho Cmd+I no Mac ou Ctrl+I no Windows) para criar o projeto do zero. Cole o seguinte prompt:

Crie um projeto Next.js do zero chamado "claude-chatbot" com as seguintes características:

- Use o App Router do Next.js 14
- Instale as dependências: @anthropic-ai/sdk, e as dependências padrão do Next.js com TypeScript e Tailwind CSS
- Crie um arquivo .env.local com a variável ANTHROPIC_API_KEY=""
- Crie um arquivo .gitignore incluindo .env.local
- Estrutura inicial limpa, sem o conteúdo padrão do Next.js

Após criar, mostre a estrutura de pastas do projeto.

O Cursor vai criar todos os arquivos e instalar as dependências automaticamente.

---

Passo 2 — Crie o backend: a rota de API

O próximo passo é criar o endpoint que vai receber as mensagens do frontend e se comunicar com a Claude API. Use este prompt no Composer:

Crie uma rota de API em app/api/chat/route.ts que:

1. Receba via POST um JSON com dois campos:
   - messages: array com o histórico completo da conversa no formato { role: "user" | "assistant", content: string }
   - systemPrompt: string com a personalidade do chatbot

2. Use o SDK oficial da Anthropic (@anthropic-ai/sdk) para chamar o modelo claude-3-5-sonnet-20241022

3. Configure a chamada com:
   - max_tokens: 1024
   - O systemPrompt como system message
   - O array messages como histórico

4. Retorne a resposta do Claude como JSON no formato { message: string }

5. Trate erros adequadamente, retornando status 500 com mensagem de erro em caso de falha

A chave da API deve ser lida da variável de ambiente ANTHROPIC_API_KEY.

---

Passo 3 — Crie a interface do chat

Agora vem a parte mais visual. Use este prompt para criar a interface completa:

Crie a página principal do chatbot em app/page.tsx com as seguintes funcionalidades e visual:

FUNCIONALIDADES:
1. Estado para armazenar o histórico de mensagens (array de { role, content })
2. Estado para o texto do input atual
3. Estado para controlar se o bot está "digitando" (loading)
4. Função sendMessage que:
   - Adiciona a mensagem do usuário ao histórico
   - Faz POST para /api/chat enviando o histórico completo e o systemPrompt
   - Adiciona a resposta do Claude ao histórico
5. Envio de mensagem ao pressionar Enter ou clicar no botão
6. Auto-scroll para a última mensagem sempre que uma nova chegar
7. Botão para limpar o histórico e reiniciar a conversa
8. System prompt fixo que define a personalidade do bot como um assistente prestativo, direto e levemente bem-humorado, que responde sempre em português

VISUAL (tema escuro, moderno):
- Background da página: cinza muito escuro (#0f0f0f)
- Header fixo no topo com o nome "Claude Chat" e o botão de limpar conversa
- Área de mensagens ocupando o espaço central com scroll
- Mensagens do usuário alinhadas à direita, com fundo azul (#2563eb) e texto branco
- Mensagens do assistente alinhadas à esquerda, com fundo cinza escuro (#1e1e1e) e texto cinza claro
- Avatar com inicial "C" para o Claude e "V" para o usuário
- Indicador animado de "digitando..." (três pontos pulsando) enquanto aguarda resposta
- Input fixo na parte inferior com borda sutil, botão de enviar com ícone de seta
- Fonte: Inter do Google Fonts
- Totalmente responsivo para mobile

---

Passo 4 — Rode o projeto e teste

Com os arquivos criados, peça ao Cursor para rodar o projeto:

Qual o comando para rodar o projeto em modo de desenvolvimento?

Ele vai te responder npm run dev. Antes de rodar, abra o arquivo .env.local e insira sua chave da API da Anthropic:

ANTHROPIC_API_KEY=sk-ant-sua-chave-aqui

Agora rode o projeto e acesse http://localhost:3000 no navegador. Você deve ver a interface do chat. Envie uma mensagem e veja o Claude responder.

Para testar a memória, faça uma sequência de perguntas relacionadas:

Você: "Meu nome é Carlos e eu trabalho com marketing."
Claude: [responde]
Você: "Qual é o meu nome?"
Claude: "Seu nome é Carlos." ✓
Você: "E com o que eu trabalho?"
Claude: "Você trabalha com marketing." ✓

---

Passo 5 — Personalize o chatbot

Agora a parte divertida: mudar a personalidade do seu bot. No Cursor, use prompts para ajustar o system prompt e o visual. Exemplos:

Bot especialista em finanças:

Altere o systemPrompt do chatbot para criar um assistente especializado em 
finanças pessoais. Ele deve ser didático, usar exemplos práticos com valores 
em reais, e sempre incentivar hábitos financeiros saudáveis. Quando não souber 
algo com certeza, deve deixar claro e recomendar consultar um especialista.

Bot com tom mais formal:

Altere o systemPrompt para que o assistente seja formal, técnico e conciso. 
Ele responde de forma direta, sem rodeios, e sempre estrutura respostas longas 
em tópicos numerados.

Bot temático (suporte técnico, por exemplo):

Altere o systemPrompt para que o assistente seja um agente de suporte técnico 
de uma empresa de software. Ele deve coletar informações sobre o problema do 
usuário de forma estruturada antes de sugerir soluções, e sempre encerrar 
perguntando se o problema foi resolvido.

---

Passo 6 — Melhorias visuais e de UX

Alguns refinamentos que fazem muita diferença na experiência:

Adicionar timestamp nas mensagens:

Adicione um timestamp discreto abaixo de cada mensagem mostrando o horário 
em que ela foi enviada, no formato HH:MM. Use uma cor bem sutil para não 
poluir a interface.

Contagem de tokens e custo estimado:

Adicione um contador discreto no header mostrando quantas mensagens existem 
na conversa atual e um aviso quando o histórico passar de 20 mensagens, 
sugerindo que o usuário limpe a conversa para economizar tokens.

Suporte a Markdown nas respostas:

Instale a biblioteca react-markdown e configure as mensagens do assistente 
para renderizar Markdown. Isso vai permitir que o Claude formate respostas 
com listas, negrito, código e títulos corretamente.

Copiar mensagem com um clique:

Adicione um botão de copiar que aparece ao passar o mouse sobre qualquer 
mensagem do assistente. Ao clicar, copia o texto da mensagem para o clipboard 
e mostra um feedback visual de "Copiado!".

---

Como o histórico afeta o custo da API

Um ponto importante para entender antes de colocar o chatbot em produção: como você envia o histórico completo a cada mensagem, o custo por chamada cresce conforme a conversa avança.

Uma conversa de 5 mensagens vai custar mais que uma de 1 mensagem, porque você está enviando mais tokens para a API. Isso é completamente normal e esperado.

Estratégias para controlar o custo:

Janela deslizante: Em vez de enviar todo o histórico, envie apenas as últimas N mensagens (ex: as últimas 10). Isso limita o contexto mas controla o custo.

Modifique a função sendMessage para que, ao chamar a API, seja enviado apenas 
as últimas 10 mensagens do histórico em vez de todo o histórico. Mantenha 
o histórico visual completo na interface.

Resumo automático: Quando o histórico ficar longo, peça ao Claude para resumir a conversa e use o resumo como contexto.

Adicione uma função que, quando o histórico passar de 20 mensagens, faz uma 
chamada separada à API pedindo para o Claude resumir em 3 parágrafos os pontos 
principais da conversa. Use esse resumo como primeiras mensagens do novo 
histórico, preservando as 5 últimas mensagens originais.

---

Adicionando streaming de resposta

Uma melhoria que transforma completamente a experiência é o streaming: em vez de esperar a resposta completa chegar de uma vez, o texto aparece palavra por palavra, como se o Claude estivesse digitando em tempo real.

Refatore a rota de API e o frontend para suportar streaming de resposta da 
Claude API. Use o método stream() do SDK da Anthropic na rota, retorne um 
ReadableStream, e no frontend consuma o stream atualizando a mensagem do 
assistente em tempo real, caractere por caractere. Remova o indicador de 
"digitando..." e substitua pela mensagem sendo construída em tempo real.

---

O que você aprendeu

Ao chegar até aqui, você dominou conceitos que vão muito além de um simples chatbot:

Gerenciamento de estado de conversa — Entendeu como LLMs funcionam sem memória nativa e como simular memória via histórico de mensagens.

Integração com APIs de IA — Aprendeu a estrutura básica de uma chamada à Claude API, que é praticamente igual para qualquer outro projeto com LLMs.

Vibe coding iterativo — Praticou o ciclo de prompt, resultado, refinamento. Cada melhoria foi um novo prompt, não uma sessão de debugging.

Arquitetura de aplicação com IA — Separou responsabilidades corretamente: frontend cuida da interface e estado, backend cuida da comunicação com a API.

---

Próximos passos

Com esse chatbot como base, você pode ir muito além:

• Salvar o histórico de conversas em um banco de dados (Supabase ou Postgres) para recuperar conversas anteriores

• Adicionar autenticação para que cada usuário tenha seu próprio histórico

• Permitir upload de arquivos para que o usuário possa "conversar com um PDF"

• Adicionar ferramentas (tool use) para que o Claude possa buscar informações na web em tempo real

• Criar múltiplos "modos" de personalidade que o usuário pode alternar durante a conversa

• Fazer deploy na Vercel com um clique, deixando o chatbot acessível publicamente

---

Gostou? Compartilha com alguém que quer construir produtos com IA mas acha que precisa ser desenvolvedor pra isso.