O Que e a Rede Financeira

A Rede Financeira e um agregador de inteligencia que monitora noticias financeiras, IA e fintech do Brasil em tempo real. Estes sao os numeros atuais:

Metrica	Valor
Artigos monitorados	305+
Nodes no grafo 3D	305
Edges (conexoes)	1.088
Blog posts publicados	38
Pilares de conhecimento	5
Temas rastreados	11
Cenarios de game theory	23
Fontes de noticias	85+
Paginas HTML geradas	106
Linhas de codigo	10.851

O projeto inteiro foi construido usando Claude Code CLI — o assistente de programacao da Anthropic que roda direto no terminal. Nenhuma linha foi escrita manualmente do zero.

Arquitetura

` Google Alerts ──→ articles.json ──→ build.py ──→ docs/ ──→ Vercel

SerpAPI scenarios.json graph-data.json

international Neo4j/br-acc Three.js /rede _articles.json blog-3d /blog/3d `

Stack completo:

• SSG: Python puro (build.py — 4.390 linhas) com string.Template
• 3D: Three.js 0.160.0 + OrbitControls (ES modules via importmap)
• Dados: JSON (articles, scenarios, graph-data, blog-graph)
• Pesquisa: SerpAPI (Google News) + Google Alerts
• Enriquecimento: Neo4j via br-acc API (2.26M nodes de transparencia publica)
• Deploy: Vercel (cleanUrls, static output)
• Automacao: auto-publish.sh (draft → publish → deploy em 3 ambientes)

O Motor: build.py

O coracao do sistema e um Static Site Generator em Python puro. Sem Next.js, sem Hugo, sem Gatsby — apenas string.Template e json.

`python

Estrutura simplificada

from string import Template

def render_page(base_tpl, content_tpl, **kwargs): content = Template(content_tpl).safe_substitute(**kwargs) return Template(base_tpl).safe_substitute(content=content, **kwargs) `

O build.py gera:

• Homepage com feed de artigos ordenados por data
• Paginas por pilar (IA, Fintech, Mercado, Tecnologia, Educacao)
• Paginas por tema (Banco Master, CPI, STF, etc.)
• Perfis de entidades (Daniel Vorcaro, BTG, etc.)
• Blog posts a partir de Markdown
• Calendario editorial
• Grafo 3D (graph-data.json com 305 nodes)
• Blog 3D (blog-graph.json com 81 nodes)
• Sitemap XML

Como foi escrito: Comecei com o prompt "crie um static site generator em Python que lê articles.json e gera HTML". O Claude Code gerou a primeira versao (~500 linhas). Depois, em 20+ iteracoes, fui pedindo features — "adicione pilares", "gere perfis de entidades", "crie o grafo 3D" — e o codigo cresceu para 4.390 linhas.

Coleta de Dados

Nivel 1: Google Alerts

A base sao Google Alerts configurados para keywords como "banco master", "daniel vorcaro", "fgc", "fintech brasil". Os alertas chegam por email e sao parseados em articles.json.

Nivel 2: SerpAPI

Para expandir a cobertura, uso a API do SerpAPI para buscar no Google News:

` GET https://serpapi.com/search.json ?engine=google_news &q="Daniel Vorcaro" OR "Banco Master" &gl=br&hl=pt-br &api_key=KEY `

Cada busca retorna ~100 artigos que sao deduplicados, classificados por tier (1/2/3) e integrados ao dataset.

Nivel 3: Classificacao Automatica

Cada artigo e classificado automaticamente:

• Temas: via mapeamento de keywords no titulo/excerpt
• Pilares: via mapeamento tema → pilar
• Entidades: extraidas do campo entities do artigo
• Tier: baseado no dominio da fonte (G1=T1, CNN=T2, etc.)

Grafo 3D com Three.js

O rede.js (2.042 linhas) e um modulo ES6 que renderiza o grafo de inteligencia em 3D:

Tipos de Node

Tipo	Geometria	Cor
Pessoa	Esfera	Ciano
Organizacao	Octaedro	Ciano claro
Tema	Cubo	Dourado
Pilar	Torus	Roxo
Keyword	Dodecaedro	Laranja
Cenario	Octaedro	Verde
Conteudo	Icosaedro	Teal
Cluster	Esfera pequena	Cinza
Fonte	Esfera	Cinza claro

Force-Directed Layout

O layout e calculado em 150 iteracoes com:

• Repulsao entre todos os pares de nodes (lei de Coulomb)
• Atracao ao longo das edges (lei de Hooke)
• Gravidade em direcao ao centro
• Massa proporcional ao numero de mencoes

Como pedi ao Claude Code: "crie uma visualizacao 3D interativa dos dados do graph-data.json usando Three.js". O resultado foi o modulo completo com force layout, raycasting, tooltips, info panel, busca, fullscreen e tema claro/escuro.

Blog 3D

O blog-3d.js (470 linhas) e uma versao simplificada do rede.js que mostra apenas os posts do blog conectados por tags e pilares compartilhados.

Prompt usado: "crie uma versao modo de visualizar 3D somente dos conteudos da pagina do blog"

Resultado: 81 nodes (38 posts + 4 pilares + 39 tags), 189 edges. Posts coloridos por pilar, clusters emergem organicamente por tags compartilhadas.

Cenarios de Game Theory

O scenarios.json contem 23 cenarios com:

• Titulo, descricao, probabilidade (0-1), qualidade
• Players com roles (win/lose/neutral) e impacto
• Triggers com datas e eventos reais
• Relacoes entre cenarios (enables, amplifies, blocks)
• Janela temporal (start, peak, end)

Exemplo real: `json { "id": "vorcaro-delacao", "title": "Delacao Premiada de Vorcaro — Xadrez Politico", "probability": 0.85, "players": [ {"nodeId": "entity-daniel-vorcaro", "role": "neutral", "label": "Delator"}, {"nodeId": "entity-alexandre-de-moraes", "role": "lose", "label": "Citado"} ] } `

Como foi criado: Descrevi os cenarios ao Claude Code com base nas noticias coletadas, e ele estruturou o JSON completo com todos os campos, triggers e relacoes entre cenarios.

Deploy e Automacao

Vercel

`json { "outputDirectory": "docs", "buildCommand": null, "cleanUrls": true } `

Deploy em um comando: npx vercel --prod

auto-publish.sh

`bash #!/bin/bash

1. Encontra drafts para a data alvo

2. Remove "status: draft" (converte para publicado)

3. Roda build.py

4. Deploy para 3 ambientes:

- Vercel (redefinanceira.com.br)

- xneog.com/rede/ (rsync local)

- Mac Studio via SSH (rsync remoto)

`

O pipeline completo roda em ~30 segundos.

Claude Code CLI na Pratica

Estes sao prompts reais que usei durante o desenvolvimento:

Analise e preparacao

`

analise todo o projeto e se prepare

` O Claude Code le todos os arquivos, entende a estrutura, e fica pronto para executar.

Busca e integracao de dados

`

busque no Google por "Daniel Vorcaro" e "Banco Master" via SerpAPI

e integre os resultados no articles.json

` Resultado: 104 artigos encontrados, 36 integrados (deduplicados).

Remocao de features

`

remova essas duas funcoes da pagina: Game Theory, attention HUD

` O CLI removeu HTML, JS e CSS em 3 arquivos, rebuild e deploy.

Criacao de novas features

`

crie uma versao 3D somente dos conteudos do blog

` Gerou template HTML, modulo JS completo (470 linhas), funcao no build.py, e botao na blog index.

Correcao de bugs

`

analise os pilares — educacao, IA etc mostram 0 artigos

` O CLI identificou o root cause (pillar_counts computado antes da injecao de artigos internacionais), corrigiu em 3 pontos e deployou.

Uso do /frontend skill

O skill /frontend do Claude Code gera CSS/HTML de alta qualidade. Foi usado para:

• Design do sistema de cores e tipografia
• Layout responsivo mobile/desktop
• Dark/light theme toggle
• Cards de artigos, badges, tooltips

Metricas do Desenvolvimento

Metrica	Valor
Linhas de codigo total	10.851
build.py	4.390 linhas
rede.js (3D principal)	2.042 linhas
blog-3d.js (Blog 3D)	470 linhas
style.css	2.704 linhas
rede.css	731 linhas
Templates HTML	16
Commits git	20
Paginas geradas	106
Tempo de build	~5 segundos
Custo	Anthropic Max plan ($100/mes)

Estimativa de tempo: O que levaria semanas para um dev solo fazer, foi construido em dias de sessoes noturnas com o Claude Code. A IA escreveu ~95% do codigo. O humano atuou como diretor — definindo o que construir, validando resultados, iterando.

Como Replicar

Estrutura minima

` meu-projeto/ ├── data/ │ └── articles.json # seus dados ├── templates/ │ ├── base.html # layout base │ └── home.html # pagina inicial ├── assets/ │ └── style.css # estilos ├── docs/ # output (gitignored ou deployado) ├── build.py # seu SSG └── vercel.json # config deploy `

Primeiro prompt

` Crie um static site generator em Python que:

1. Le data/articles.json com artigos (title, url, date, themes)
2. Usa templates/ com string.Template para gerar HTML
3. Gera docs/ com uma homepage listando artigos por data
4. Inclui dark/light theme toggle
5. Responsivo mobile

`

A partir dai, va iterando: "adicione filtros por tema", "adicione busca", "crie paginas individuais por tema", "adicione uma visualizacao 3D".

Dicas

• Comece pequeno: primeiro faça funcionar com 10 artigos. Depois escale
• Itere rapido: cada sessao com o Claude Code deve ter um objetivo claro
• Use plan mode: para features complexas, peça primeiro um plano antes de executar
• Valide no browser: abra o resultado localmente antes de deployar
• Git sempre: commite a cada feature funcional

Conclusao

A Rede Financeira e a prova de que um dev solo com Claude Code CLI pode construir um sistema de inteligencia completo — coleta de dados, classificacao por IA, visualizacao 3D interativa, blog com 38+ artigos, 23 cenarios de game theory — e deployar em producao.

O futuro do desenvolvimento nao e escrever codigo. E dirigir a IA que escreve o codigo.

Acesse a Rede Financeira | Explore o Grafo 3D | Blog 3D