Web Viewer do Claude-Mem: como acompanhar em tempo real o que o agente guarda na memória?

Fala aí, beleza? Memória de agente é caixa-preta até o dia em que você consegue olhar dentro dela

E é exatamente isso que o Web Viewer do Claude-Mem faz

O Claude-Mem é um sistema de memória persistente: ele captura o que o agente faz durante a sessão, comprime aquilo com IA e injeta o contexto relevante nas sessões seguintes

O Web Viewer é a janela pra esse stream, a tela onde você vê o registro nascendo enquanto o agente trabalha

E ver isso muda tudo na confiança que você deposita no fluxo, porque para de ser fé e passa a ser observação 🙂

O que o Claude-Mem guarda e por que ver isso importa

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

O Claude-Mem se descreve como "Persistent Context Across Sessions for Every Agent", ou seja, contexto persistente entre sessões pra qualquer agente

Ele funciona com Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode e outros

Segundo o repositório oficial no GitHub, o projeto é criado e mantido por Alex Newman, sob o usuário thedotmack, e é licenciado sob Apache License 2.0

Divulgação progressiva: por que o feed não despeja tudo de uma vez

Aqui mora o PORQUÊ do desenho da tela

O Claude-Mem usa divulgação progressiva: no início da sessão ele carrega um índice leve, e as observações detalhadas só entram sob demanda, como descreve a documentação de progressive disclosure

Se você conhece aquele padrão de sumário primeiro, capítulo depois, é a mesma ideia

O agente não engole a memória inteira, ele consulta o que precisa

O feed do Web Viewer é justamente a visão humana desse acervo: o que está indexado, o que foi guardado, em que ordem

E como o Claude-Mem acha as coisas?

A busca é híbrida

De um lado, busca por palavra-chave no SQLite FTS5

Do outro, busca semântica por embeddings no Chroma, que segundo a documentação do Chroma no projeto entrou na versão 5.0.0

Por isso o que aparece no feed não é só "log bonito": é o mesmo material que alimenta as buscas que o agente faz depois

O que você precisa antes de abrir o Web Viewer

Três coisas, e só

• Claude-Mem instalado por um caminho que registra os hooks e sobe o worker (os comandos de plugin ou o instalador via npx, que eu mostro no passo a passo)
• O arquivo ~/.claude-mem/settings.json, que é auto-criado com os padrões na primeira execução
• A porta do worker livre, definida pela chave CLAUDE_MEM_WORKER_PORT, com padrão 37777

Tome cuidado com um detalhe que derruba muita gente logo na largada

Rodar npm install -g claude-mem instala apenas a SDK/biblioteca

Isso NÃO registra os hooks do plugin e NÃO sobe o worker, então não existe Web Viewer pra abrir

Como acessar o Web Viewer do Claude-Mem passo a passo

1. Instale pelo marketplace de plugins do Claude Code

/plugin marketplace add thedotmack/claude-mem
/plugin install claude-mem

O erro comum deste passo: instalar pelo npm global e achar que está pronto

Como eu disse ali em cima, o pacote global entrega a biblioteca, não o plugin com hooks

2. Ou use a instalação alternativa pelo terminal, que faz o processo completo

npx claude-mem install

O erro comum deste passo: misturar os dois caminhos e ficar sem saber qual instalação está valendo

Escolhe um e segue com ele

3. Inicie uma sessão pra disparar o hook SessionStart

O worker tem auto-start no primeiro SessionStart, então você não precisa rodar comando manual pra subir o serviço

O erro comum deste passo: procurar um botão ou comando de "ligar worker" antes de abrir qualquer sessão

Abre a sessão primeiro

4. Abra http://localhost:37777 no navegador

É o endereço local do worker, o mesmo serviço HTTP que expõe os endpoints de busca e serve a interface web

O erro comum deste passo: tentar abrir o viewer com a sessão nunca iniciada, aí não tem nada escutando na porta

5. Se precisar, troque a porta em ~/.claude-mem/settings.json, na chave CLAUDE_MEM_WORKER_PORT

O erro comum deste passo: mudar a porta no arquivo e continuar batendo em http://localhost:37777 no navegador

Se você mexeu na chave, o endereço muda junto

O que dá para fazer dentro do Web Viewer

A interface é React + TypeScript, servida pelo worker e empacotada com esbuild num único arquivo HTML autocontido

Na prática, isso é bom pra você: não tem servidor extra de front pra cuidar, o worker entrega a tela pronta

A composição da tela é assim:

Tem também toggle de tema claro e escuro, pra quem vive no dark mode 😀

O tempo real vem de SSE

A atualização do stream no viewer usa Server-Sent Events

É o servidor empurrando evento pra tela, em vez de a tela ficar perguntando de novo e de novo

Quem já montou streaming de respostas em tempo real em outro fluxo reconhece o padrão na hora

Casos de uso práticos

Auditar o que foi guardado por projeto

Filtra pela sidebar e passa o olho no feed daquele projeto

É o jeito mais rápido de responder "o agente entendeu certo o que aconteceu ontem?"

Abrir uma observação isolada

A API do worker serve o registro individual:

http://localhost:37777/api/observation/{id}

Reconstruir a sequência com a timeline

O Claude-Mem expõe uma função de timeline que centraliza a linha do tempo em uma observação, usando o observation ID mais depth_before e depth_after

Ou seja, você escolhe um ponto e pede pra ver o que veio antes e o que veio depois

Ótimo pra entender uma decisão estranha do agente sem ficar adivinhando

Como mandar o stream de observações para Telegram, Discord e Slack

Agora a parte que tira o acompanhamento do navegador

O observation feed é um serviço em segundo plano que conecta no stream SSE do worker e encaminha os eventos new_observation para o canal configurado, através do OpenClaw

A lógica é a mesma de integrações em tempo real com WebSockets: alguém escuta o evento e empurra ele pra fora

Os canais suportados são os registrados no OpenClaw: telegram, discord, slack, signal, whatsapp e line

1. Escolha o channel type, que é o plugin de canal registrado no OpenClaw

O erro comum deste passo: escolher um canal que não está registrado no OpenClaw e culpar o Claude-Mem depois

2. Pegue o target ID de destino, que pode ser chat ID, channel ID ou user ID

O erro comum deste passo: usar o nome do grupo ou o @ do usuário no lugar do ID

3. Adicione o bloco observationFeed na config do plugin claude-mem, dentro da configuração do gateway do OpenClaw

A documentação da integração com OpenClaw indica o caminho plugins > claude-mem > config > observationFeed, com as chaves enabled, channel e to:

{
  "plugins": {
    "claude-mem": {
      "config": {
        "observationFeed": {
          "enabled": true,
          "channel": "telegram",
          "to": "SEU_TARGET_ID"
        }
      }
    }
  }
}

O erro comum deste passo: colocar o bloco fora da entrada do plugin claude-mem

Cada mensagem enviada pelo feed traz o título e o subtítulo da observação, então é resumo, não despejo de log

E se a conexão cair, ela reconecta sozinha com backoff exponencial

Só que tem um porém nesse recurso hoje: o gateway do OpenClaw pode recusar essa config por validação de schema, e isso é bug aberto no repositório (issue #1332)…

Problemas conhecidos: worker que não sobe e config recusada

Sintoma: o worker falha ao subir na porta 37777

Causa provável: existem relatos abertos de falha ao iniciar o worker service na porta 37777 no Windows 11, nas issues #380 e #363 do repositório

O que fazer: trocar a porta pela chave CLAUDE_MEM_WORKER_PORT em ~/.claude-mem/settings.json e acessar o viewer no novo endereço

Se a porta padrão está ocupada ou bloqueada, mudar o número é o caminho mais curto

Sintoma: o gateway do OpenClaw recusa a config do observationFeed

Causa provável: a issue #1332 registra que a validação de JSON Schema do core rejeita chaves customizadas em entradas de plugin, e o bloco observationFeed cai nessa

O que fazer: acompanhar a issue antes de investir tempo depurando a sua config

Quando o erro é de validação do gateway, não adianta reescrever o JSON de mil formas, o schema é que está barrando

Sintoma: instalei, mas nada acontece e não tem viewer

Causa provável: instalação global pelo npm

npm install -g claude-mem entrega só a SDK/biblioteca, sem registrar hook nenhum e sem subir worker

O que fazer: instalar por npx claude-mem install ou pelos comandos /plugin

Como prevenir os três: decide o método de instalação ANTES (plugin ou npx), confirma que a porta escolhida está livre e só depois parte pro observation feed

A ordem importa: worker de pé, viewer abrindo, aí sim integração externa

Pra ampliar o contexto: IA usando vários modelos ao mesmo tempo

Se você quer ver outro ângulo de como as ferramentas de IA estão sendo montadas hoje, esse vídeo do canal apresenta a Sakana Fugu, a IA que usa vários modelos ao mesmo tempo

Conclusão

Memória de agente sem visibilidade é confiança cega

Com o Web Viewer do Claude-Mem, você vê o stream sendo escrito: observação, prompt, resumo, tudo filtrável por projeto e atualizado por SSE

O próximo passo é bem concreto

Instala pelo marketplace de plugins, abre uma sessão pra disparar o SessionStart e visita http://localhost:37777 no navegador

Se quiser acompanhar fora do navegador, avalia o observation feed pro seu canal do OpenClaw, já ciente da issue #1332

A versão mais recente publicada no npm é a 13.15.2

E se você gosta de viver na borda, vale saber que o projeto tem três branches: main (estável, essa é a publicada no npm), core-dev e community-edge, essas duas rodando a partir do código-fonte

Até o próximo post! 😀