Folha IA
Folha IA
Início/Zé Mané — Prompts Mestre
Zé Mané — Prompts Mestre

Prompts Mestre: AI OpsGuard – Observabilidade e Segurança para Agentes de IA em Produção com Next.js e Supabase

(há 8 dias)
Prompts Mestre: AI OpsGuard – Observabilidade e Segurança para Agentes de IA em Produção com Next.js e Supabase

E aí, meu povo da tecnologia! Zé Mané na área, e hoje a gente vai desmistificar a caixa preta dos agentes de IA em produção. Chega de voar cego! Vamos construir o AI OpsGuard, a ferramenta que vai transformar a dor de cabeça dos seus agentes LangChain em um painel de controle digno de um CEO que entende de tecnologia.

Preparem-se para prompts cirúrgicos, arquitetura de ponta e a stack que vai fazer seu projeto decolar mais rápido que foguete da SpaceX.

O Projeto em 30 Segundos

O AI OpsGuard é uma plataforma de observabilidade e governança para agentes de IA, focada inicialmente em LangChain. Ele resolve a "cegueira operacional" fornecendo visibilidade granular sobre o comportamento dos agentes em produção: rastreamento de traces, decisões tomadas, ferramentas utilizadas, custos de chamadas LLM, auditoria de segurança (PII, acesso a dados sensíveis), análise de performance (latência, sucesso) e alertas proativos. O objetivo é garantir conformidade, otimizar custos e performance, e trazer segurança para empresas que operam com IA, especialmente em setores regulados como Fintech. A stack é moderna e performática: Next.js, tRPC, Drizzle ORM, Supabase, Tailwind, Shadcn/ui, Cloudflare Workers e, claro, OpenLIT para a coleta de dados.

Arquitetura Recomendada

A arquitetura do AI OpsGuard é pensada para escalabilidade, performance e segurança, utilizando uma abordagem serverless e edge-first sempre que possível.

Mermaid Error: Parse error on line 2: ... subgraph Frontend (Next.js App Router) -----------------------^ Expecting 'SEMI', 'NEWLINE', 'SPACE', 'EOF', 'GRAPH', 'DIR', 'subgraph', 'SQS', 'end', 'AMP', 'COLON', 'START_LINK', 'STYLE', 'LINKSTYLE', 'CLASSDEF', 'CLASS', 'CLICK', 'DOWN', 'UP', 'NUM', 'NODE_STRING', 'BRKT', 'MINUS', 'MULT', 'UNICODE_TEXT', got 'PS'

Show Code
graph TD
    subgraph Frontend (Next.js App Router)
        A[Dashboard & UI] --> B(API Routes / tRPC Client)
        B --> C(Data Visualization - Recharts/Tremor)
        C --> D(Auth Handling - NextAuth.js)
    end

    subgraph Backend (Next.js API Routes / tRPC Server)
        E[tRPC Endpoints] --> F(Auth Middleware)
        F --> G(Business Logic / Services)
        G --> H(Drizzle ORM)
        H --> I(Supabase Postgres DB)
        G --> J(Supabase Auth)
        G --> K(Cloudflare Workers - Edge Processing)
        G --> L(OpenLIT Ingestion API)
    end

    subgraph Data Ingestion & Processing
        M[LangChain Agents (Client Apps)] --> N(OpenLIT SDK)
        N --> L
        L --> O(Cloudflare D1/KV for Edge Caching/Rate Limiting)
        L --> P(Queue - e.g., Supabase Realtime / Kafka)
        P --> Q(Background Workers - Data Enrichment/Aggregation)
        Q --> I
    end

    subgraph External Services
        I --> R(Supabase Storage - Logs/Artifacts)
        J --> S(Third-party Auth Providers)
        K --> T(External LLM APIs - OpenAI, Anthropic, etc.)
        Q --> U(Alerting Services - PagerDuty, Slack)
    end

    subgraph Deployment & Infrastructure
        V[Vercel] --> A
        V --> E
        V --> K
        W[Cloudflare] --> K
        W --> L
        W --> O
        X[Supabase] --> I
        X --> J
        X --> R
    end

    style A fill:#f9f,stroke:#333,stroke-width:2px
    style E fill:#f9f,stroke:#333,stroke-width:2px
    style M fill:#f9f,stroke:#333,stroke-width:2px

Explicação da Arquitetura:

  1. Frontend (Next.js App Router): Serve como a interface do usuário, consumindo dados via tRPC. Autenticação gerenciada pelo NextAuth.js.
  2. Backend (Next.js API Routes / tRPC Server): O coração da aplicação, expondo APIs tipadas via tRPC. Lida com a lógica de negócio, persistência de dados via Drizzle ORM no Supabase Postgres.
  3. Data Ingestion & Processing:
    • LangChain Agents: Os agentes instrumentados com OpenLIT SDK enviam dados de observabilidade.
    • OpenLIT Ingestion API: Um endpoint otimizado (potencialmente em Cloudflare Workers para baixa latência global) recebe os dados do OpenLIT.
    • Queue: Os dados brutos são enfileirados para processamento assíncrono, garantindo que a ingestão não bloqueie a resposta aos agentes.
    • Background Workers: Processam os dados da fila, enriquecem (ex: resolvem IDs para nomes de usuários/agentes), agregam métricas e persistem no Supabase Postgres.
  4. Supabase: Atua como o backend-as-a-service, fornecendo banco de dados Postgres, autenticação, armazenamento e, potencialmente, Realtime para a fila.
  5. Cloudflare Workers: Utilizados para a Ingestion API (edge computing, baixa latência) e para processamento de eventos em tempo real ou validação na borda.
  6. Vercel: Plataforma de deploy para o Next.js, com integração nativa para edge functions e CDN.

Prompts Mestre por Categoria

Aqui estão os prompts cirúrgicos, prontos para serem copiados e colados nas suas IAs favoritas (Claude, GPT-4, Gemini, Cursor AI) para construir o AI OpsGuard.

🏗️ Prompts de Arquitetura & Backend

Estes prompts focam na espinha dorsal do AI OpsGuard: banco de dados, APIs, autenticação e a lógica de ingestão de dados.

Prompt 1: Esquema do Banco de Dados com Drizzle ORM e Supabase

prompt
Você é um arquiteto de banco de dados expert em Drizzle ORM e Supabase.
**Contexto:** Estamos construindo o AI OpsGuard, uma plataforma de observabilidade para agentes LangChain. Precisamos de um esquema de banco de dados robusto para rastrear agentes, traces, spans (decisões, ferramentas), custos e alertas.
**Tarefa:** Crie o esquema de banco de dados usando Drizzle ORM com PostgreSQL (Supabase). Inclua as tabelas `organizations`, `users`, `agents`, `traces`, `spans`, `cost_metrics`, `security_audits`, `alerts`.
**Detalhes das Tabelas:**
- `organizations`: id, name, created_at, updated_at
- `users`: id, organization_id (FK), email, name, role (admin, developer, viewer), created_at, updated_at
- `agents`: id, organization_id (FK), name, description, model_config (JSONB), created_at, updated_at
- `traces`: id, agent_id (FK), organization_id (FK), trace_id (UUID do OpenLIT), start_time, end_time, status (success, failure, pending), input_data (JSONB), output_data (JSONB), metadata (JSONB), total_cost (decimal), llm_calls_count (int), total_latency_ms (int), created_at
- `spans`: id, trace_id (FK), parent_span_id (FK, nullable), span_id (UUID do OpenLIT), type (LLM, Tool, Agent, Chain), name, start_time, end_time, input_data (JSONB), output_data (JSONB), metadata (JSONB), cost (decimal), latency_ms (int), created_at
- `cost_metrics`: id, trace_id (FK), agent_id (FK), organization_id (FK), llm_provider, model_name, prompt_tokens, completion_tokens, total_cost, timestamp
- `security_audits`: id, trace_id (FK), agent_id (FK), organization_id (FK), detected_pii (boolean), pii_details (JSONB, se detectado), sensitive_api_access (boolean), api_details (JSONB, se acessado), risk_level (low, medium, high), timestamp
- `alerts`: id, organization_id (FK), agent_id (FK, nullable), trace_id (FK, nullable), type (cost_spike, latency_anomaly, pii_detected), severity (info, warning, critical), message, triggered_at, resolved_at (nullable), status (active, resolved)
**Restrições:**
- Use `pgTable`, `text`, `timestamp`, `uuid`, `jsonb`, `integer`, `decimal`, `boolean`.
- Defina chaves primárias e estrangeiras corretamente.
- Adicione `onDelete: 'cascade'` para relações de dependência.
- Inclua `created_at` e `updated_at` com `default: sql('now()')` e `onUpdate: sql('now()')` para todas as tabelas relevantes.
**Formato de Saída:** Código TypeScript para o `schema.ts` do Drizzle ORM.

Prompt 2: Configuração do tRPC Backend e Rotas Iniciais

prompt
Você é um engenheiro backend expert em Next.js App Router e tRPC.
**Contexto:** Estamos construindo o backend do AI OpsGuard. Precisamos configurar o tRPC para expor endpoints para o frontend e para a ingestão de dados.
**Tarefa:** Crie a estrutura inicial do servidor tRPC.
1.  Configure o `trpc.ts` com um `createContext` que inclua a sessão do usuário (via NextAuth.js) e uma instância do Drizzle ORM.
2.  Crie um `appRouter.ts` com um `publicProcedure` e um `protectedProcedure`.
3.  Implemente uma rota `healthCheck` (pública) e uma rota `getAgents` (protegida) que retorna uma lista de agentes do banco de dados (usando o esquema Drizzle do Prompt 1).
4.  Crie um mock para o `auth.ts` que simule a obtenção de uma sessão de usuário (para o `createContext`).
**Restrições:**
- Use a stack: Next.js 14+, tRPC, Drizzle ORM, Supabase.
- A autenticação deve ser baseada em `session.user.id` e `session.user.organizationId`.
- O `getAgents` deve filtrar por `organization_id`.
**Formato de Saída:** Arquivos TypeScript para `server/trpc.ts`, `server/routers/_app.ts`, `server/routers/agent.ts` e um mock para `server/auth.ts`.

Prompt 3: Endpoint de Ingestão de Dados OpenLIT (Cloudflare Worker)

prompt
Você é um especialista em Edge Computing e Cloudflare Workers.
**Contexto:** O AI OpsGuard precisa de um endpoint de alta performance e baixa latência para receber dados de observabilidade dos agentes LangChain instrumentados com OpenLIT.
**Tarefa:** Crie um Cloudflare Worker que atue como o endpoint de ingestão de dados.
1.  Receba requisições POST com payloads JSON contendo dados do OpenLIT (traces, spans, métricas).
2.  Valide o payload (estrutura básica, presença de `trace_id`, `agent_id`).
3.  Autentique a requisição usando um `API_KEY` (armazenado como segredo no Worker).
4.  Enfileire os dados recebidos em um serviço de fila (simule o envio para uma fila, ex: log para o console como "Enviado para fila").
5.  Retorne um status 202 Accepted para o cliente.
6.  Implemente rate limiting básico por IP usando Cloudflare KV (simule a interação com KV).
**Restrições:**
- Use a API do Cloudflare Workers.
- O Worker deve ser assíncrono e não bloquear.
- A validação deve ser leve para manter a performance.
- O rate limiting deve ser configurável (ex: 100 requisições/min por IP).
**Formato de Saída:** Código JavaScript para o Cloudflare Worker (`worker.js`).

🎨 Prompts de Frontend & Design

Estes prompts visam a interface do usuário, garantindo uma experiência intuitiva, responsiva e esteticamente agradável, com foco no design minimalista dark.

Prompt 1: Componente DashboardLayout com Navegação Lateral

prompt
Você é um engenheiro frontend expert em Next.js, React, Tailwind CSS e Shadcn/ui.
**Contexto:** Precisamos de um layout base para o dashboard do AI OpsGuard, com uma navegação lateral e um cabeçalho. O design é minimalista dark.
**Tarefa:** Crie um componente `DashboardLayout` que inclua:
1.  Um `Sidebar` fixo à esquerda com links de navegação (ex: "Overview", "Agents", "Traces", "Costs", "Security", "Alerts", "Settings"). Use componentes do Shadcn/ui (Button, Sheet para mobile).
2.  Um `Header` no topo com o título da página atual, um seletor de organização (mock), e um menu de usuário (avatar, logout).
3.  A área de conteúdo principal (`children`) que se ajusta ao lado do `Sidebar`.
**Restrições:**
- Design minimalista dark.
- Responsivo (sidebar retrátil em telas menores).
- Use Tailwind CSS para estilização e Shadcn/ui para componentes.
- Ícones devem ser placeholders (ex: `FaHome`, `FaRobot`).
**Formato de Saída:** Código React/TypeScript para `components/layout/DashboardLayout.tsx`, `components/layout/Sidebar.tsx`, `components/layout/Header.tsx`.

Prompt 2: Componente TraceDetailsView para Visualização de Spans

prompt
Você é um designer de UI/UX e engenheiro frontend com foco em visualização de dados complexos.
**Contexto:** O AI OpsGuard precisa exibir os detalhes de um trace específico, incluindo todos os seus spans aninhados, de forma clara e interativa.
**Tarefa:** Crie um componente `TraceDetailsView` que:
1.  Receba um objeto `trace` e uma lista de `spans` (do esquema Drizzle do Prompt 1 de Arquitetura).
2.  Exiba os detalhes do `trace` (id, agente, status, custo, latência) em um painel superior.
3.  Renderize os `spans` em uma estrutura de árvore ou lista aninhada, simulando a hierarquia de execução (parent_span_id).
4.  Cada span deve ser clicável para expandir/colapsar e exibir detalhes adicionais (input, output, metadata, custo, latência) em um painel lateral ou modal.
5.  Use um estilo visual que destaque os diferentes tipos de span (LLM, Tool, Agent, Chain) com cores sutis no tema dark.
**Restrições:**
- Use React, Tailwind CSS e Shadcn/ui.
- A visualização deve ser performática mesmo com muitos spans.
- Interatividade para explorar os detalhes.
- Design minimalista dark.
**Formato de Saída:** Código React/TypeScript para `components/traces/TraceDetailsView.tsx` e `components/traces/SpanNode.tsx`.

Prompt 3: Configuração de Tema Dark e Design Tokens

prompt
Você é um especialista em design systems e Tailwind CSS.
**Contexto:** O AI OpsGuard adota um design minimalista dark. Precisamos configurar o Tailwind para suportar isso e definir alguns design tokens essenciais.
**Tarefa:** Configure o `tailwind.config.ts` para:
1.  Habilitar o modo escuro (`darkMode: 'class'`).
2.  Definir uma paleta de cores customizada para o tema dark, incluindo cores para fundo, texto principal, texto secundário, bordas, primário (para botões/destaques), secundário, sucesso, erro, aviso. Ex: `bg-dark-900`, `text-dark-100`, `primary-500`.
3.  Definir algumas variáveis CSS (`--background`, `--foreground`, `--primary`, etc.) que Shadcn/ui usa, mapeando-as para as cores customizadas.
4.  Adicionar uma fonte customizada (ex: Inter ou Geist Sans) via `@fontsource`.
**Restrições:**
- Cores devem ser harmoniosas para um tema dark.
- As variáveis CSS devem seguir o padrão esperado pelo Shadcn/ui.
- A fonte deve ser importada de forma otimizada.
**Formato de Saída:** Código TypeScript para `tailwind.config.ts` e um snippet CSS para `globals.css` com as variáveis.

🔍 Prompts de SEO & Schema.org

Mesmo sendo uma ferramenta B2B, o SEO técnico é crucial para a descoberta e autoridade. Estes prompts garantem que o AI OpsGuard seja bem ranqueado e compreendido pelos motores de busca.

Prompt 1: Meta Tags Dinâmicas e robots.txt

prompt
Você é um especialista em SEO técnico e Next.js.
**Contexto:** O AI OpsGuard precisa de meta tags otimizadas para cada página e um `robots.txt` que gerencie o rastreamento.
**Tarefa:**
1.  Crie um componente `SeoHead` (ou utilize a API de metadados do Next.js 14 App Router) que receba `title`, `description`, `ogImage` e `canonicalUrl` como props e gere as meta tags Open Graph, Twitter Cards e canonical link.
2.  Implemente a geração dinâmica dessas meta tags para as páginas principais (Home, Overview, Agents, Traces).
3.  Crie um `robots.txt` que permita o rastreamento de todas as páginas públicas, mas disallow para `/settings/*` e `/admin/*`.
**Restrições:**
- Use a API de metadados do Next.js 14 App Router.
- `og:type` deve ser 'website' ou 'article' conforme a página.
- `robots.txt` deve ser acessível em `/robots.txt`.
**Formato de Saída:** Código TypeScript/React para `app/layout.tsx` (ou um componente `SeoHead.tsx`), `app/robots.ts` (ou `public/robots.txt`).

Prompt 2: Dados Estruturados Organization e WebSite com JSON-LD

prompt
Você é um guru de Schema.org e JSON-LD.
**Contexto:** Para aumentar a autoridade e a visibilidade do AI OpsGuard nos resultados de busca, precisamos implementar dados estruturados.
**Tarefa:** Crie um script JSON-LD para as entidades `Organization` e `WebSite` para a homepage do AI OpsGuard.
1.  `Organization`: Inclua `name`, `url`, `logo`, `contactPoint` (com `contactType` e `email`), `sameAs` (links para redes sociais, ex: LinkedIn).
2.  `WebSite`: Inclua `name`, `url`, e um `potentialAction` para a funcionalidade de busca interna (se aplicável, caso contrário, omita).
**Restrições:**
- Use o formato JSON-LD.
- Os dados devem ser fictícios, mas realistas para uma empresa de SaaS.
- O script deve ser injetado no `<head>` da página.
**Formato de Saída:** Um snippet de código React/TypeScript que retorna um `<script type="application/ld+json">` para `app/page.tsx`.

Prompt 3: Geração de Sitemap Dinâmico

prompt
Você é um especialista em SEO técnico e Next.js.
**Contexto:** O AI OpsGuard precisa de um sitemap XML para garantir que todas as páginas importantes sejam indexadas pelos motores de busca.
**Tarefa:** Crie um sitemap dinâmico usando a API de sitemaps do Next.js 14 App Router.
1.  Inclua as URLs estáticas principais (Home, About, Contact, Pricing).
2.  Inclua URLs dinâmicas para agentes (ex: `/agents/[id]`) e traces (ex: `/traces/[id]`), obtendo os IDs do banco de dados (simule a chamada ao Drizzle ORM).
3.  Defina `lastModified` para cada URL e `priority` (ex: 1.0 para home, 0.8 para páginas principais, 0.7 para dinâmicas).
**Restrições:**
- Use a nova API de sitemap do Next.js 14.
- O sitemap deve ser acessível em `/sitemap.xml`.
- Simule a obtenção de dados do banco de dados para URLs dinâmicas.
**Formato de Saída:** Código TypeScript para `app/sitemap.ts`.

⚡ Prompts de Performance & Core Web Vitals

A performance é crucial para a experiência do usuário e para o ranqueamento. Estes prompts garantem que o AI OpsGuard seja rápido e responsivo.

Prompt 1: Otimização de Imagens com Next/Image e Cloudflare Images

prompt
Você é um engenheiro de performance web.
**Contexto:** O AI OpsGuard terá dashboards com gráficos e, eventualmente, avatares de usuários/agentes. A otimização de imagens é vital para o LCP.
**Tarefa:**
1.  Demonstre o uso do componente `next/image` para otimizar imagens, incluindo `priority` para o LCP e `sizes`.
2.  Explique como integrar o Cloudflare Images para redimensionamento e formatação (WebP/AVIF) automáticos, usando uma URL de exemplo.
3.  Crie um componente `OptimizedAvatar` que utilize `next/image` e um URL de Cloudflare Images (mock).
**Restrições:**
- Foco em LCP e formatos modernos (WebP/AVIF).
- Exemplo prático de `next/image`.
- Explicação clara da integração com Cloudflare Images.
**Formato de Saída:** Código React/TypeScript para `components/ui/OptimizedAvatar.tsx` e um snippet de explicação para `next.config.js`.

Prompt 2: Lazy Loading de Componentes e Dados para Reduzir TBT

prompt
Você é um especialista em performance frontend e Next.js.
**Contexto:** Dashboards complexos podem ter muitos componentes e dados, impactando o Time to Interactive (TTI) e Total Blocking Time (TBT).
**Tarefa:**
1.  Demonstre o uso de `React.lazy` e `Suspense` para lazy loading de um componente de gráfico (ex: `HeavyChartComponent`).
2.  Explique como o Next.js lida com o lazy loading de módulos e como isso impacta o bundle splitting.
3.  Mostre como combinar isso com o carregamento de dados assíncrono (ex: usando `use` do React 19 ou `getServerSideProps`/`getStaticProps` no Pages Router, ou fetches diretos no App Router) para melhorar a percepção de performance.
**Restrições:**
- Exemplo prático com `React.lazy` e `Suspense`.
- Foco em TBT e TTI.
- Use a abordagem do App Router para carregamento de dados.
**Formato de Saída:** Código React/TypeScript para `components/charts/HeavyChartComponent.tsx`, `app/dashboard/page.tsx` com o lazy loading, e um `loading.tsx` para o fallback.

Prompt 3: Otimização de Fontes e Critical CSS

prompt
Você é um ninja de otimização de assets.
**Contexto:** Fontes customizadas e CSS podem ser grandes bloqueadores de renderização, impactando LCP e FCP.
**Tarefa:**
1.  Demonstre a otimização de fontes usando `next/font` para carregar a fonte Inter (ou Geist Sans) de forma otimizada.
2.  Explique o conceito de Critical CSS e como o Next.js (ou uma ferramenta como `critters`) ajuda a extrair o CSS essencial para a primeira renderização.
3.  Forneça um exemplo de como garantir que o CSS do Tailwind/Shadcn/ui seja processado de forma a minimizar o impacto no FCP.
**Restrições:**
- Uso de `next/font`.
- Explicação teórica e prática de Critical CSS.
- Foco em LCP e FCP.
**Formato de Saída:** Snippet de código para `app/layout.tsx` com `next/font`, e uma explicação textual sobre Critical CSS e Tailwind.

🚀 Prompts de Deploy & DevOps

Estes prompts cobrem a automação do processo de deploy, monitoramento e a utilização de recursos de edge para garantir alta disponibilidade e escalabilidade.

Prompt 1: Pipeline CI/CD para Vercel com GitHub Actions

prompt
Você é um engenheiro de DevOps expert em Vercel e GitHub Actions.
**Contexto:** O AI OpsGuard precisa de um pipeline de CI/CD automatizado para deploy contínuo na Vercel.
**Tarefa:** Crie um arquivo de GitHub Actions (`.github/workflows/deploy.yml`) que:
1.  Acione em `push` para a branch `main` e `pull_request` para `main`.
2.  Instale dependências (Node.js, pnpm).
3.  Execute testes (simule um comando `pnpm test`).
4.  Execute o build do Next.js (`pnpm build`).
5.  Faça o deploy para a Vercel usando o `vercel-action`.
6.  Configure variáveis de ambiente da Vercel (ex: `SUPABASE_URL`, `SUPABASE_ANON_KEY`, `OPENLIT_API_KEY`).
**Restrições:**
- Use `pnpm` como gerenciador de pacotes.
- O deploy deve ser para a Vercel.
- As variáveis de ambiente devem ser passadas de forma segura (GitHub Secrets).
**Formato de Saída:** Código YAML para `.github/workflows/deploy.yml`.

Prompt 2: Configuração de Edge Functions (Vercel) e Cloudflare Workers

prompt
Você é um arquiteto de sistemas com foco em Edge Computing.
**Contexto:** O AI OpsGuard utiliza Edge Functions (Vercel) para APIs e Cloudflare Workers para ingestão de dados.
**Tarefa:**
1.  Explique a diferença entre Vercel Edge Functions e Cloudflare Workers no contexto do AI OpsGuard.
2.  Mostre como configurar uma API Route no Next.js para rodar como Edge Function (ex: uma rota `/api/ping`).
3.  Descreva como o Cloudflare Worker do Prompt 3 de Arquitetura seria implantado e gerenciado via `wrangler.toml` e o CLI da Cloudflare.
**Restrições:**
- Foco na stack Next.js/Vercel e Cloudflare Workers.
- Explicação clara das vantagens de cada um para o projeto.
- Exemplo prático para uma Edge Function.
**Formato de Saída:** Snippet de código TypeScript para uma Edge Function Next.js (`app/api/ping/route.ts`) e uma explicação textual sobre a gestão de Workers.

Prompt 3: Monitoramento Básico e Alertas com Sentry e Supabase Logs

prompt
Você é um especialista em observabilidade e monitoramento.
**Contexto:** Precisamos monitorar o AI OpsGuard em produção para erros, performance e comportamento anômalo.
**Tarefa:**
1.  Descreva como integrar o Sentry para monitoramento de erros no frontend (Next.js) e backend (Next.js API Routes/Edge Functions).
2.  Explique como usar os logs do Supabase (Postgres, Auth) para depuração e auditoria.
3.  Descreva um cenário de alerta (ex: "custo de LLM excedeu X em Y minutos") e como ele seria configurado no AI OpsGuard para enviar notificações (ex: Slack, PagerDuty).
**Restrições:**
- Foco em Sentry para erros e Supabase para logs de infra.
- Cenário de alerta deve ser específico para o AI OpsGuard.
**Formato de Saída:** Snippets de código para inicialização do Sentry no Next.js (`sentry.client.config.ts`, `sentry.server.config.ts`) e uma explicação textual sobre logs e alertas.

Prompt Único Completo

Este é o mega-prompt. Ele encapsula a essência do AI OpsGuard, instruindo a IA a gerar um projeto completo, desde a arquitetura até o deploy, com todas as nuances técnicas.

prompt
Você é Zé Mané, um engenheiro de software autodidata e irreverente, expert em desenvolvimento web moderno e IA.
**Contexto:** O CEO Alfredo quer o "AI OpsGuard", uma plataforma de observabilidade e governança para agentes LangChain em produção. O objetivo é transformar a "cegueira operacional" em visibilidade total, com foco em segurança, custos e performance.
**Stack Principal:** Next.js 14+ (App Router), React 19, tRPC, Drizzle ORM, Supabase (Postgres, Auth, Storage), Vercel, Tailwind CSS v4, Shadcn/ui, Cloudflare Workers, OpenLIT.
**Features Core:** Observabilidade completa (traces, spans, decisões, ferramentas), Monitoramento de custos LLM, Auditoria de segurança (PII, acesso a dados sensíveis), Análise de performance (latência, sucesso), Dashboards intuitivos, Alertas proativos.
**Público-alvo:** Empresas (Fintechs, setores regulados) que usam ou planejam usar agentes de IA em produção.
**Estilo de Design:** Minimalista dark.
**Complexidade:** Avançado.

**Tarefa:** Crie um projeto Next.js 14+ completo para o AI OpsGuard.
**Estrutura do Projeto:**
- `app/`: Next.js App Router pages.
- `components/`: Componentes React (UI, layout, específicos do projeto).
- `server/`: Lógica de backend (tRPC routers, Drizzle schema, auth).
- `lib/`: Utilitários, hooks, helpers.
- `public/`: Assets estáticos.
- `worker/`: Cloudflare Worker para ingestão de dados.
- `config/`: Configurações (Tailwind, Drizzle).
- `.github/workflows/`: GitHub Actions para CI/CD.

**Requisitos Detalhados:**

1.  **Backend & Banco de Dados (Drizzle ORM, Supabase, tRPC):**
    *   **Esquema Drizzle:** Implemente o esquema de banco de dados para `organizations`, `users`, `agents`, `traces`, `spans`, `cost_metrics`, `security_audits`, `alerts` conforme especificado nos prompts de Arquitetura. Inclua chaves primárias/estrangeiras e timestamps.
    *   **tRPC Server:** Configure o `trpc.ts` com `createContext` (incluindo sessão de usuário e Drizzle DB). Crie um `appRouter.ts` com `publicProcedure` e `protectedProcedure`.
    *   **Rotas tRPC:**
        *   `healthCheck` (pública).
        *   `getAgents` (protegida, filtra por `organization_id`).
        *   `getTraces` (protegida, filtra por `agent_id` e `organization_id`, com paginação).
        *   `getTraceDetails` (protegida, retorna um `trace` e seus `spans` aninhados).
    *   **Auth (NextAuth.js com Supabase Auth):** Configuração básica do NextAuth.js para Supabase, incluindo um `auth.ts` para obter a sessão.
    *   **Cloudflare Worker (Ingestão OpenLIT):** Um `worker.js` para receber requisições POST do OpenLIT, validar API Key, enfileirar dados (simule log para console) e aplicar rate limiting (simule KV).

2.  **Frontend (Next.js, React, Tailwind, Shadcn/ui):**
    *   **Layout:** `DashboardLayout` com `Sidebar` (navegação) e `Header` (título, seletor de org, menu de usuário). Responsivo, tema dark.
    *   **Páginas Essenciais:**
        *   `app/dashboard/page.tsx`: Página de overview com cards de métricas (total agentes, custo LLM, alertas ativos) e um gráfico de latência média (placeholders).
        *   `app/agents/page.tsx`: Lista de agentes com tabela paginada (usando Shadcn/ui `DataTable`).
        *   `app/traces/[id]/page.tsx`: `TraceDetailsView` para exibir um trace e seus spans hierarquicamente, com detalhes expandíveis.
    *   **Componentes UI:** `OptimizedAvatar` (Next/Image, Cloudflare Images mock), `HeavyChartComponent` (lazy loaded), `DataTable` (Shadcn/ui).
    *   **Design System:** `tailwind.config.ts` configurado para tema dark, cores customizadas, fontes otimizadas (`next/font`). `globals.css` com variáveis CSS para Shadcn/ui.

3.  **SEO & Performance:**
    *   **Meta Tags:** `app/layout.tsx` com `Metadata` API para meta tags dinâmicas (title, description, ogImage).
    *   **`robots.ts`:** Disallow para `/settings/*`, `/admin/*`.
    *   **`sitemap.ts`:** Sitemap dinâmico para páginas estáticas e dinâmicas (agentes, traces).
    *   **Otimização de Imagens:** `next.config.js` para `next/image` e `OptimizedAvatar`.
    *   **Lazy Loading:** `HeavyChartComponent` com `React.lazy` e `Suspense`.
    *   **Fontes:** `next/font` para Inter/Geist Sans.

4.  **Deploy & DevOps:**
    *   **CI/CD (GitHub Actions):** `deploy.yml` para build, teste e deploy na Vercel em `push` para `main`.
    *   **Edge Functions:** Exemplo de API Route (`app/api/ping/route.ts`) configurada como Edge Function.
    *   **Monitoramento:** Explicação textual sobre integração Sentry (frontend/backend) e uso de logs Supabase.

**Restrições Gerais:**
-   Todos os prompts devem ser específicos e gerar código funcional (ou mock realista).
-   Use a sintaxe mais recente do Next.js 14 App Router.
-   Mantenha o estilo Zé Mané: técnico, direto, com analogias se necessário.
-   Foco em código, mas inclua explicações contextuais quando solicitado.
-   O código deve ser limpo, tipado (TypeScript) e seguir as melhores práticas.
-   Para dados dinâmicos, simule a obtenção do banco de dados quando não for possível conectar um DB real.
-   Para serviços externos (OpenLIT, Sentry), forneça a estrutura de integração.

**Formato de Saída:** Uma série de blocos de código (`prompt`) para cada arquivo ou conceito solicitado, com breves explicações entre eles.

Stack Mínima Viável

Para lançar o AI OpsGuard em 48 horas, focando na funcionalidade core de ingestão e visualização básica de traces, esta é a stack que o Zé Mané recomenda:

Essa combinação permite um desenvolvimento rápido com tipagem de ponta a ponta, performance nativa de edge e um banco de dados robusto e escalável.

Checklist de Lançamento

Antes de apertar o botão de "Go Live", meu caro desenvolvedor, certifique-se de que estes 10 itens técnicos estão ticados:

  1. ✅ Variáveis de Ambiente Configuradas: Todas as chaves de API (Supabase, OpenLIT, Sentry, etc.) estão seguras e configuradas corretamente na Vercel e Cloudflare Workers.
  2. ✅ Esquema de Banco de Dados Finalizado: O esquema Drizzle foi aplicado ao Supabase Postgres e está pronto para produção.
  3. ✅ Autenticação Testada: Fluxo de login/logout, proteção de rotas e autorização de organização funcionando perfeitamente.
  4. ✅ Endpoint de Ingestão Robusto: O Cloudflare Worker está recebendo dados do OpenLIT, validando e enfileirando sem falhas, com rate limiting ativo.
  5. ✅ Performance Core Web Vitals: LCP, FID/INP e CLS estão dentro das metas no PageSpeed Insights para as páginas críticas.
  6. ✅ SEO Básico Implementado: Meta tags, robots.txt e sitemap.xml estão gerados e acessíveis.
  7. ✅ Monitoramento de Erros Ativo: Sentry (ou similar) está capturando erros no frontend e backend, e alertas estão configurados para falhas críticas.
  8. ✅ Testes Básicos Passando: Testes unitários e de integração para as funcionalidades críticas estão rodando e passando no CI.
  9. ✅ Backup do Banco de Dados: Uma estratégia de backup automático do Supabase está configurada e testada.
  10. ✅ Domínio Customizado e SSL: O domínio do AI OpsGuard está configurado na Vercel com SSL ativo.

Com essa receita do Zé Mané, o AI OpsGuard não será apenas um projeto, mas uma solução de ponta que vai revolucionar a forma como as empresas gerenciam seus agentes de IA. Agora, mãos à obra!

Compartilhar