WM3 DigitalWM3 Digital

Documentação Técnica

Tudo que você precisa saber para desenvolver, manter e escalar seus projetos

Fluxo de Preview

Envie, receba o preview e conecte via API

  • 1) Escolha a solução e envie o briefing inicial.
  • 2) IA gera o preview antes de qualquer pagamento.
  • 3) Aprove e integre pelas APIs para produção.

Preview usa Claude 3.5 Haiku (10x mais barato) para amostras. Entregas pagas usam Claude Sonnet 4.5 (qualidade máxima e credibilidade para Google). Alternância automática Sonnet -> Haiku em caso de falha. Documentação completa no Guia de Qualidade Unificado.

Referência

Seções da Documentação

Explore nossa documentação completa organizada por categorias

Guias de Desenvolvimento

Documentação técnica completa para desenvolvedores

  • Setup e configuração do ambiente
  • Estrutura de arquivos e pastas
  • Padrões de código e boas práticas
  • Guia de componentes reutilizáveis

APIs e Integrações

Endpoints de preview, geração com IA e webhooks

  • 5 endpoints de preview (1 por produto, Claude 3.5 Haiku)
  • 5 endpoints pagos (1 por produto, Claude Sonnet 4.5)
  • Autenticação por API key (endpoints pagos)
  • Rate limiting: 1 preview/24h por fingerprint, cap mensal R$50
  • Webhooks: Stripe Checkout + PIX (Abacate Pay)
  • Tratamento de erros e circuit breaker

Stack de IA

Modelos, custos e estratégia de seleção

  • Texto: Claude Sonnet 4.5 (pago) / Claude 3.5 Haiku (preview)
  • Imagem: Imagen 3 via Google Vertex AI
  • Prompt caching (Anthropic) — reduz custo em ~90%
  • Fallback automático: Sonnet -> Haiku
  • Custo médio: preview ~R$ 0,03 / deliverable ~R$ 0,30

Segurança

Práticas de segurança implementadas

  • CSP headers + X-Frame-Options DENY
  • Rate limiting in-memory (10 req/h por IP)
  • Preview budget (cap mensal para uso anônimo)
  • Basic Auth para /admin/costs
  • Federation HMAC-SHA256 para sync de projetos

Deploy e Produção

Vercel + observabilidade

  • Deploy automático via Vercel (push para main)
  • Sentry (condicional, apenas com DSN configurado)
  • Logging pipeline (Supabase -> n8n)
  • Dashboard de custos de IA em /admin/costs

Produtos & Preview

5 produtos com demonstração antes de pagar

  • Tema 360: conteúdo para blog com preview gratuito
  • Raio-X de Landing: diagnóstico de LP com preview
  • Landing Blueprint: copy de LP com preview
  • Brand Snapshot: identidade visual + logos com preview
  • QR Code Hero: QR codes criativos com preview
Stack

Stack Tecnológico

Tecnologias modernas que utilizamos em nossos projetos

Next.js 16

App Router, Turbopack, standalone output

React 19

Server Components + Client Components

TypeScript 5

Tipagem estática em todo o projeto

Tailwind CSS 4

Framework CSS utilitário + Radix UI

Anthropic Claude

Sonnet 4.5 (pago) + Haiku (preview)

Google Imagen 3

Geração de imagens via Vertex AI

Quickstart

Como Começar

Passos básicos para configurar e executar seu projeto

1. Instalação

# Clone o repositório
git clone [repository-url]
# Instale as dependências
npm install

2. Configuração

# Configure as variáveis de ambiente
cp .env.example .env.local
# Variáveis obrigatórias para IA:
ANTHROPIC_API_KEY=...
GOOGLE_CLOUD_PROJECT=...
GOOGLE_CLOUD_LOCATION=...

3. Execução

# Inicie o servidor de desenvolvimento
npm run dev
# Acesse em http://localhost:3000

Precisa de Ajuda?

Nossa equipe técnica está disponível para esclarecer dúvidas sobre a documentação