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

Prompts Mestre: Agente Guardião - Governança e Auditoria para Agentes de IA com Next.js e Supabase

(há 8 dias)
Prompts Mestre: Agente Guardião - Governança e Auditoria para Agentes de IA com Next.js e Supabase

E aí, galera da engenharia de ponta! Aqui é o Zé Mané, e hoje a gente vai desmistificar a governança de IA com um projeto que vai fazer o Alfredo, o CEO visionário, babar: o Agente Guardião.

Chega de IA virando caixa preta! Chega de agente autônomo dando cabeçada e expondo dados sensíveis ou violando políticas. A gente vai construir a infraestrutura que garante que seus agentes de IA joguem dentro das quatro linhas, com conformidade e segurança em tempo real. E o melhor? Vamos fazer isso com prompts cirúrgicos que qualquer IA vai entender e executar com precisão de laser.

Preparem-se para mergulhar no mundo onde a IA é poderosa, mas também responsável.

1. O Projeto em 30 Segundos

O Agente Guardião é uma plataforma de governança e conformidade para agentes de IA. Ele atua como um proxy ou middleware que intercepta todas as ações e decisões de agentes de IA, validando-as contra um conjunto de políticas predefinidas em tempo real. Qualquer violação aciona alertas e é registrada em um log de auditoria imutável. O objetivo é prevenir erros, vazamentos de dados e violações de política antes que aconteçam, garantindo que a IA opere dentro dos limites éticos, legais e de negócio. Pense nele como o "cão de guarda" digital dos seus LLMs e agentes autônomos.

2. Arquitetura Recomendada

Pra essa parada, a gente precisa de uma arquitetura robusta, escalável e, claro, serverless pra não ter dor de cabeça. Vamos de Vercel e Supabase/PlanetScale, com Cloudflare Workers para a camada de interceptação de borda.

Mermaid Error: Parse error on line 14: ... G[Agente de IA (Ex: LangChain)] --> -----------------------^ Expecting 'SQE', 'DOUBLECIRCLEEND', 'PE', '-)', 'STADIUMEND', 'SUBROUTINEEND', 'PIPE', 'CYLINDEREND', 'DIAMOND_STOP', 'TAGEND', 'TRAPEND', 'INVTRAPEND', 'UNICODE_TEXT', 'TEXT', 'TAGSTART', got 'PS'

Show Code
graph TD
    subgraph "Frontend (Next.js 14+)"
        A[Dashboard de Políticas & Auditoria] --> B(API de Gerenciamento)
        B --> C{Autenticação & Autorização}
    end

    subgraph "Backend (Next.js API Routes / tRPC)"
        C --> D[Serviço de Políticas]
        C --> E[Serviço de Auditoria]
        C --> F[Serviço de Interceptação]
    end

    subgraph "Edge Layer (Cloudflare Workers)"
        G[Agente de IA (Ex: LangChain)] --> H(Interceptador de Requisições)
        H --> F
    end

    subgraph "Banco de Dados (Supabase / PlanetScale)"
        D --> I[DB: Políticas]
        E --> J[DB: Logs de Auditoria]
        F --> I
        F --> J
    end

    subgraph "Notificações"
        F --> K[Serviço de Alertas (Webhooks / Email)]
    end

    subgraph "Infraestrutura"
        L[Vercel (Deploy Frontend/Backend)]
        M[Cloudflare (DNS, Workers, CDN)]
    end

    A -- Gerencia --> D
    G -- Envia Ações --> H
    H -- Valida & Registra --> F
    F -- Consulta --> I
    F -- Escreve --> J
    F -- Aciona --> K
    L -- Hospeda --> A, B, C, D, E, F
    M -- Otimiza & Roteia --> A, H

Explicação Rápida do Zé Mané:

  • Frontend (Next.js 14+): O painel onde CFOs e CISOs vão definir políticas, visualizar logs de auditoria e configurar alertas. Usaremos shadcn/ui e Tailwind CSS para um visual dark e minimalista.
  • Backend (Next.js API Routes / tRPC): A inteligência por trás do guardião. Serviços dedicados para gerenciar políticas, registrar auditorias e, crucialmente, o serviço de interceptação que recebe as ações dos agentes. tRPC pra tipagem end-to-end e performance.
  • Edge Layer (Cloudflare Workers): Aqui é onde a mágica da interceptação acontece em tempo real, perto do agente de IA. O agente tenta fazer algo, o Worker pega, manda pro nosso Backend pra validação e só libera se estiver tudo ok. Latência mínima, segurança máxima.
  • Banco de Dados (Supabase / PlanetScale): Drizzle ORM pra interagir com o banco, seja ele PostgreSQL no Supabase (com auth e storage inclusos) ou MySQL escalável no PlanetScale. Dados de políticas e logs de auditoria imutáveis.
  • Notificações: Se a IA pisar na bola, o sistema avisa na hora via webhooks ou e-mail.
  • Infraestrutura: Vercel para deploy contínuo e escalabilidade do Next.js, Cloudflare para a camada de edge e CDN.

3. Prompts Mestre por Categoria

Agora, a parte que vocês esperavam! Prompts cirúrgicos para cada pedaço do Agente Guardião.

🏗️ Prompts de Arquitetura & Backend

Aqui a gente define a espinha dorsal do sistema: banco de dados, APIs e a lógica de validação.

Contexto Geral: Projeto "Agente Guardião". Stack: Next.js 14+ (App Router), tRPC, Drizzle ORM, Supabase (PostgreSQL). Objetivo: MVP para governança de IA.

prompt
// Prompt para Claude/GPT-4 (Arquitetura de Dados - Drizzle ORM)

Role: Database Schema Architect
Task: Design the Drizzle ORM schema for the "Agente Guardião" project.
Context:
- Project: Agente Guardião, a platform for AI agent governance.
- Database: Supabase (PostgreSQL).
- ORM: Drizzle ORM.
- Core Features: Policy management, immutable audit logs, real-time interception.
- Entities needed:
    1.  `policies`: Stores rules for AI agent actions.
        -   `id`: UUID, primary key.
        -   `name`: String, unique, descriptive name for the policy.
        -   `description`: Text, detailed explanation of the policy.
        -   `rules`: JSONB, array of rule objects (e.g., `{ "type": "deny", "action": "access_sensitive_data", "condition": "user_role != 'admin'" }`).
        -   `isActive`: Boolean, default true.
        -   `createdAt`: Timestamp with time zone, default now.
        -   `updatedAt`: Timestamp with time zone, default now.
    2.  `auditLogs`: Stores immutable records of AI agent actions and policy evaluations.
        -   `id`: UUID, primary key.
        -   `agentId`: String, identifier of the AI agent.
        -   `actionType`: String, e.g., "data_access", "external_api_call", "decision_made".
        -   `actionPayload`: JSONB, details of the action (e.g., `{ "resource": "/users/123", "method": "GET" }`).
        -   `policyEvaluation`: JSONB, result of policy check (e.g., `{ "policyId": "uuid", "status": "blocked", "reason": "Sensitive data access denied" }`).
        -   `timestamp`: Timestamp with time zone, default now.
        -   `isBlocked`: Boolean, indicates if the action was blocked.
        -   `triggeredAlert`: Boolean, indicates if an alert was sent.
    3.  `users`: Basic user management for dashboard access.
        -   `id`: UUID, primary key.
        -   `email`: String, unique.
        -   `passwordHash`: String.
        -   `role`: Enum ('admin', 'viewer'), default 'viewer'.
        -   `createdAt`: Timestamp with time zone, default now.
Format: Provide Drizzle ORM schema definitions in TypeScript, including table, column, and index definitions.
Constraints:
-   Use `pgTable` for table definitions.
-   Ensure appropriate data types for PostgreSQL.
-   Add `uuid()` for IDs, `text()` for descriptions, `jsonb()` for dynamic data, `timestamp('name', { withTimezone: true, mode: 'string' })` for timestamps.
-   Include `primaryKey` and `unique` constraints where applicable.
-   Export the schema definitions.
prompt
// Prompt para Cursor AI/GPT-4 (API tRPC para Políticas)

Role: Backend Developer
Task: Implement the tRPC router and procedures for managing policies in the "Agente Guardião" backend.
Context:
- Project: Agente Guardião.
- Stack: Next.js 14 (App Router), tRPC, Drizzle ORM, Supabase.
- Schema: Based on the `policies` table defined previously.
- Features: CRUD operations for policies.
- Authentication: Assume a `protectedProcedure` exists for authenticated users.
Format: Provide TypeScript code for `_app/trpc/[trpc]/route.ts` and `server/routers/policy.ts`.
Constraints:
-   Create a `policyRouter` with `createPolicy`, `getPolicies`, `getPolicyById`, `updatePolicy`, `deletePolicy` procedures.
-   Use Drizzle ORM for database interactions.
-   Implement input validation using `zod` for all procedures.
-   `createPolicy` requires `name`, `description`, `rules` (array of objects), `isActive`.
-   `updatePolicy` requires `id` and optional fields for update.
-   `getPolicies` should support pagination and filtering (e.g., by `isActive`).
-   Handle errors appropriately (e.g., policy not found).
-   Ensure all procedures are protected.
prompt
// Prompt para Claude/GPT-4 (Cloudflare Worker para Interceptação)

Role: Edge Developer
Task: Create a Cloudflare Worker that acts as an interception proxy for AI agent actions, forwarding them to the "Agente Guardião" backend for policy evaluation.
Context:
- Project: Agente Guardião.
- Goal: Intercept AI agent requests, send payload to backend for validation, and either proxy the original request or block it.
- Backend Endpoint: `https://api.agente-guardiao.com/trpc/intercept.action` (example).
- AI Agent Request: Assumed to be a POST request containing action details in its body.
- Response from Backend: `{ status: 'allowed' }` or `{ status: 'blocked', reason: '...' }`.
Format: Provide JavaScript code for the Cloudflare Worker.
Constraints:
-   The Worker should listen for incoming requests (e.g., to a specific path like `/agent-action`).
-   Extract the relevant payload from the incoming request.
-   Make an internal `fetch` request to the Agente Guardião backend's intercept endpoint with the agent's action payload.
-   Based on the backend's response:
    -   If `status: 'allowed'`, proxy the *original* request to its intended destination (e.g., the actual LLM API or external service).
    -   If `status: 'blocked'`, return a `403 Forbidden` response to the AI agent with the reason.
-   Handle potential errors during backend communication (e.g., timeout, network error) by defaulting to `blocked` for safety.
-   Use `env` variables for backend URL and any API keys.
-   Include example of how to deploy and configure the worker.

🎨 Prompts de Frontend & Design

Aqui a gente cria a interface que o Alfredo vai usar pra controlar a IA dele. Dark mode first, minimalista e funcional.

Contexto Geral: Projeto "Agente Guardião". Stack: Next.js 14 (App Router), React 19, Tailwind CSS v4, shadcn/ui, Radix UI. Estilo: Dark mode first, minimalista, tipografia expressiva.

prompt
// Prompt para GPT-4/v0.dev (Componente de Tabela de Políticas)

Role: Frontend Developer / UI Designer
Task: Generate a React component for displaying a list of policies, using shadcn/ui components and Tailwind CSS.
Context:
- Project: Agente Guardião.
- Stack: Next.js 14, React 19, Tailwind CSS v4, shadcn/ui.
- Data: Array of policy objects (each with `id`, `name`, `description`, `isActive`, `createdAt`).
- Design: Dark mode first, minimalist.
- Features:
    -   Display policies in a table format.
    -   Each row should show policy `name`, `description` (truncated), `isActive` status (badge), `createdAt`.
    -   Actions column with "Edit" and "Delete" buttons (using `DropdownMenu` for more options).
    -   Filter input for policy name.
    -   Toggle switch for filtering by `isActive` status.
    -   Pagination controls.
Format: Provide a single React TypeScript component (`PoliciesTable.tsx`) using `shadcn/ui`'s `Table`, `Input`, `Button`, `Badge`, `Switch`, `DropdownMenu`, `Pagination` components. Include necessary imports and basic state management for filtering/pagination.
Constraints:
-   Ensure responsive design.
-   Use `zod` for prop validation if applicable (optional for this specific prompt).
-   Truncate long descriptions with a "..." and a tooltip on hover.
-   `isActive` should be represented by a `Badge` (e.g., "Active" in green, "Inactive" in gray).
-   The component should be functional and ready to integrate.
prompt
// Prompt para Claude/GPT-4 (Formulário de Criação/Edição de Política)

Role: Frontend Developer
Task: Develop a React component for creating or editing a policy, using shadcn/ui forms and Radix UI primitives.
Context:
- Project: Agente Guardião.
- Stack: Next.js 14, React 19, Tailwind CSS v4, shadcn/ui.
- Data: Policy object structure (name, description, rules, isActive).
- Design: Dark mode first, minimalist.
- Features:
    -   Form fields for `name` (text input), `description` (textarea), `isActive` (switch).
    -   A dynamic section for `rules`:
        -   Each rule should have fields for `type` (select: 'deny', 'allow'), `action` (text input), `condition` (text input).
        -   Buttons to "Add Rule" and "Remove Rule" for each rule.
    -   Submit button.
    -   Reset button.
Format: Provide a React TypeScript component (`PolicyForm.tsx`). Use `react-hook-form` with `zodResolver` for form management and validation.
Constraints:
-   Integrate `shadcn/ui` components: `Form`, `FormField`, `FormItem`, `FormLabel`, `FormControl`, `FormDescription`, `FormMessage`, `Input`, `Textarea`, `Switch`, `Button`, `Select`.
-   Implement dynamic array fields for `rules` using `useFieldArray` from `react-hook-form`.
-   Provide basic `zod` schema for validation (e.g., `name` required, `rules` array of objects).
-   The component should accept an optional `initialData` prop for editing existing policies.
-   On submit, log the form data to console.
prompt
// Prompt para GPT-4/Gemini (Layout Base do Dashboard)

Role: UI/UX Architect
Task: Design the base layout for the Agente Guardião dashboard, focusing on a dark, minimalist aesthetic with clear navigation.
Context:
- Project: Agente Guardião.
- Stack: Next.js 14 (App Router), Tailwind CSS v4, shadcn/ui.
- Design: Dark mode first, minimalist, focus on readability and clear information hierarchy.
- Sections: Dashboard (overview), Policies, Audit Logs, Settings.
Format: Provide a Next.js layout component (`dashboard-layout.tsx`) and a basic page component (`dashboard/page.tsx`) demonstrating the structure.
Constraints:
-   Use a fixed sidebar navigation on the left (collapsed by default, expanded on hover/click).
-   Top bar for user info, notifications, and potentially a global search.
-   Main content area should be clean and spacious.
-   Use `shadcn/ui` components like `Sheet` (for mobile sidebar), `Avatar`, `Button`, `Separator`.
-   Employ Tailwind CSS for styling, focusing on dark mode variables.
-   Include placeholder content for each section.
-   Ensure accessibility (keyboard navigation for sidebar).

🔍 Prompts de SEO & Schema.org

Mesmo sendo um SaaS B2B, a gente precisa que o Alfredo seja encontrado! SEO técnico é fundamental.

Contexto Geral: Projeto "Agente Guardião". Stack: Next.js 14 (App Router). Público: CFOs, CISOs, líderes de engenharia de IA.

prompt
// Prompt para GPT-4/Claude (Meta Tags e Estrutura de Conteúdo)

Role: SEO Specialist
Task: Generate optimized meta tags (title, description, open graph) and a content structure for the "Agente Guardião" landing page.
Context:
- Project: Agente Guardião.
- Target Audience: CFOs, CISOs, AI Engineering Leaders.
- Keywords: "governança de IA", "segurança de IA", "conformidade IA", "auditoria de agentes de IA", "prevenção de erros IA", "políticas de IA".
- Goal: Attract decision-makers looking for solutions to manage AI risks.
Format: Provide the `<head>` content for a Next.js `layout.tsx` file and a suggested content outline for the `page.tsx`.
Constraints:
-   Title: Max 60 chars, compelling and keyword-rich.
-   Description: Max 160 chars, highlight benefits and problem-solving.
-   Open Graph: `og:title`, `og:description`, `og:image`, `og:url`, `og:type`.
-   Image: Suggest a placeholder image URL.
-   Content Outline: Use H1, H2, H3, and bullet points for key sections. Focus on problem, solution, features, benefits, and call to action.
-   Emphasize E-E-A-T principles in content suggestions.
prompt
// Prompt para GPT-4/Gemini (Schema.org para SaaS Product)

Role: SEO Specialist / Structured Data Expert
Task: Create a JSON-LD Schema.org markup for the "Agente Guardião" landing page, specifically for a `SoftwareApplication` and `Product`.
Context:
- Project: Agente Guardião.
- Type: SaaS (Software as a Service).
- Target Audience: B2B.
- Key Information:
    -   Name: Agente Guardião
    -   Description: Plataforma de governança e conformidade para agentes de IA.
    -   URL: `https://www.agente-guardiao.com` (placeholder)
    -   Logo: `https://www.agente-guardiao.com/logo.png` (placeholder)
    -   Operating System: Web-based
    -   Application Category: BusinessApplication, SecurityApplication
    -   Offers: SaaS subscription model (placeholder for price/currency)
    -   Reviews: (Assume no reviews yet, but structure for future)
Format: Provide the JSON-LD script block ready to be embedded in the `<head>` of the Next.js page.
Constraints:
-   Use `@context` and `@type` correctly.
-   Combine `SoftwareApplication` and `Product` types where appropriate.
-   Include `name`, `description`, `url`, `logo`, `operatingSystem`, `applicationCategory`.
-   For `offers`, use `Offer` type with `priceCurrency`, `price`, `availability`, `url`.
-   For `aggregateRating` and `review`, provide placeholder structures.
-   Ensure all required properties for these types are present.
prompt
// Prompt para Claude/GPT-4 (Sitemap XML e Robots.txt)

Role: Technical SEO Specialist
Task: Generate a basic `sitemap.xml` and `robots.txt` file for the "Agente Guardião" Next.js application.
Context:
- Project: Agente Guardião.
- Pages: `/`, `/policies`, `/audit-logs`, `/settings`, `/login`, `/register`.
- Goal: Ensure proper crawlability and indexation by search engines.
- Exclusions: `/login`, `/register` should not be indexed.
Format: Provide the content for `sitemap.xml` and `robots.txt`.
Constraints:
-   `sitemap.xml`:
    -   Include all public pages (`/`, `/policies`, `/audit-logs`, `/settings`).
    -   Set `lastmod` to current date (placeholder).
    -   Set `changefreq` to `weekly` for dynamic content, `monthly` for static.
    -   Set `priority` appropriately (e.g., `1.0` for homepage, `0.8` for main sections).
-   `robots.txt`:
    -   Disallow `/login` and `/register`.
    -   Specify the `Sitemap` directive pointing to the generated sitemap.
    -   Allow all other paths.
-   Assume the domain is `https://www.agente-guardiao.com`.

⚡ Prompts de Performance & Core Web Vitals

Performance não é luxo, é requisito. Principalmente para um dashboard que vai ser usado por executivos.

Contexto Geral: Projeto "Agente Guardião". Stack: Next.js 14, React 19, Tailwind CSS v4. Objetivo: Otimizar para Core Web Vitals (LCP, INP, CLS).

prompt
// Prompt para GPT-4/Cursor AI (Otimização de Imagens e Fontes)

Role: Performance Engineer
Task: Outline and provide code snippets for optimizing images and fonts in the "Agente Guardião" Next.js application to improve LCP and overall performance.
Context:
- Project: Agente Guardião.
- Stack: Next.js 14, Tailwind CSS v4.
- Goal: Achieve excellent Core Web Vitals scores.
- Images: Logo, dashboard icons, potential hero images.
- Fonts: Inter (Google Fonts) as primary font.
Format: Provide a step-by-step guide with code examples for Next.js.
Constraints:
-   **Images:**
    -   Use `next/image` component for all images.
    -   Implement responsive images with `sizes` and `srcset` (handled by `next/image`).
    -   Prioritize LCP images with `priority` prop.
    -   Suggest using modern formats (WebP/AVIF) via Next.js optimization.
-   **Fonts:**
    -   Use `next/font/google` for Inter.
    -   Implement font preloading.
    -   Ensure `font-display: swap` to prevent FOIT/FOUT.
    -   Suggest subsetting fonts if only specific characters are needed.
prompt
// Prompt para Claude/GPT-4 (Bundle Splitting e Lazy Loading)

Role: Performance Engineer
Task: Explain and provide examples of how to implement bundle splitting and lazy loading in the "Agente Guardião" Next.js application to reduce initial bundle size and improve INP.
Context:
- Project: Agente Guardião.
- Stack: Next.js 14 (App Router), React 19.
- Goal: Improve initial page load and interactivity.
- Areas for optimization: Dashboard sections (e.g., Audit Logs, Settings) that are not immediately visible on load. Complex components like charts or heavy tables.
Format: Provide explanations and code snippets for Next.js.
Constraints:
-   **Bundle Splitting:**
    -   Explain how Next.js handles this automatically with App Router.
    -   Show how to achieve manual splitting using dynamic imports for specific components.
-   **Lazy Loading:**
    -   Demonstrate `React.lazy` and `Suspense` for client components.
    -   Show `next/dynamic` for dynamic imports with `ssr: false` for client-only components.
    -   Provide an example for a hypothetical `AuditLogsChart` component.
-   Focus on practical, easy-to-implement solutions.
prompt
// Prompt para GPT-4/Gemini (Critical CSS e Edge Caching)

Role: Performance Engineer
Task: Detail strategies for implementing critical CSS and leveraging edge caching to boost the "Agente Guardião" application's performance, specifically for LCP and overall speed.
Context:
- Project: Agente Guardião.
- Stack: Next.js 14, Tailwind CSS v4, Vercel, Cloudflare.
- Goal: Minimize render-blocking resources and serve content faster globally.
Format: Provide a conceptual explanation and practical guidance, including configuration examples where applicable.
Constraints:
-   **Critical CSS:**
    -   Explain the concept.
    -   Describe how Tailwind CSS with PurgeCSS (built into Next.js/PostCSS) helps.
    -   Suggest tools or methods for extracting critical CSS for specific routes (e.g., using `next/head` or inline styles for very small critical blocks).
-   **Edge Caching:**
    -   Explain the role of Vercel's CDN and Cloudflare.
    -   Describe how to configure `Cache-Control` headers for static assets (images, fonts, JS/CSS bundles).
    -   Discuss caching strategies for API routes (e.g., `stale-while-revalidate` for less dynamic data).
    -   Mention Vercel's `ISR` (Incremental Static Regeneration) for dashboard pages that don't change too frequently.

🚀 Prompts de Deploy & DevOps

Deploy sem dor de cabeça é o sonho de todo dev. Com Vercel e Cloudflare, a gente chega lá.

Contexto Geral: Projeto "Agente Guardião". Stack: Next.js 14, Vercel, Cloudflare Workers.

prompt
// Prompt para GPT-4/Cursor AI (CI/CD com Vercel)

Role: DevOps Engineer
Task: Outline the CI/CD pipeline configuration for deploying the "Agente Guardião" Next.js application to Vercel.
Context:
- Project: Agente Guardião.
- Stack: Next.js 14, Vercel.
- Goal: Automated deployments on every push to `main` and preview deployments for feature branches.
- Environment Variables: `DATABASE_URL`, `NEXTAUTH_SECRET`, `SUPABASE_KEY`, `SUPABASE_URL`.
Format: Provide a conceptual explanation of the Vercel CI/CD flow and how to configure environment variables.
Constraints:
-   Explain Vercel's native Git integration (GitHub/GitLab/Bitbucket).
-   Describe how Vercel automatically builds and deploys.
-   Detail how to set up environment variables for different environments (Production, Preview).
-   Mention automatic branch deployments and custom domains.
-   No explicit YAML file needed, focus on Vercel platform configuration.
prompt
// Prompt para Claude/GPT-4 (Configuração de Cloudflare Workers e DNS)

Role: DevOps Engineer
Task: Provide instructions for configuring Cloudflare Workers and DNS for the "Agente Guardião" project.
Context:
- Project: Agente Guardião.
- Stack: Cloudflare Workers.
- Goal: Deploy the interception Worker and manage DNS records for the main application.
- Domain: `agente-guardiao.com` (example).
- Worker Route: `agente-guardiao.com/agent-action/*` to trigger the interceptor.
Format: Step-by-step guide with command-line examples for `wrangler` and conceptual steps for Cloudflare dashboard.
Constraints:
-   **Cloudflare Workers:**
    -   Initialize a Worker project using `wrangler init`.
    -   Deploy the Worker using `wrangler deploy`.
    -   Configure the Worker's `wrangler.toml` for routes and environment variables (e.g., `AG_BACKEND_URL`).
    -   Set up a route for the Worker (e.g., `agente-guardiao.com/agent-action/*`).
-   **DNS:**
    -   Point the root domain (`agente-guardiao.com`) and `www` subdomain to Vercel (CNAME `cname.vercel-dns.com`).
    -   Ensure proper proxy status (orange cloud) for Vercel-hosted records.
    -   Explain how to verify DNS propagation.
prompt
// Prompt para GPT-4/Gemini (Monitoramento e Observabilidade)

Role: DevOps Engineer
Task: Recommend and outline a basic monitoring and observability setup for the "Agente Guardião" application.
Context:
- Project: Agente Guardião.
- Stack: Next.js 14, Vercel, Cloudflare Workers, Supabase.
- Goal: Monitor application health, performance, errors, and audit log activity.
Format: Provide a list of recommended tools and a brief explanation of how each would be used.
Constraints:
-   **Application Performance Monitoring (APM):** Vercel Analytics/Log Drains, Sentry.
-   **Error Tracking:** Sentry.
-   **Logging:** Vercel Log Drains (to Logtail/Datadog), Supabase logs.
-   **Uptime Monitoring:** UptimeRobot, Freshping.
-   **Custom Metrics:** How to send custom metrics from Cloudflare Workers (e.g., number of blocked actions) to a dashboard (e.g., Grafana/Prometheus via a push gateway, or simple webhook alerts).
-   Focus on MVP-friendly, cost-effective solutions.

4. Prompt Único Completo

Se você é o Alfredo e quer ver a mágica acontecer com um clique, aqui está o mega-prompt. Ele encapsula tudo que discutimos.

prompt
// Prompt Único Completo para Claude/GPT-4 (Agente Guardião MVP)

Role: Full-Stack AI Governance Platform Developer
Task: Develop a Minimum Viable Product (MVP) for the "Agente Guardião" platform, a real-time AI agent governance and compliance solution.
Context:
- Project Name: Agente Guardião
- Problem Solved: Prevents AI agents from errors, policy violations, and sensitive data exposure, ensuring real-time compliance and governance.
- Target Audience: CFOs, CISOs, AI Engineering Leaders.
- Core Features:
    1.  **Real-time Action Interception & Validation**: Intercepts AI agent actions, validates against policies.
    2.  **Immutable Audit Log**: Records all actions and policy evaluations.
    3.  **Customizable Policy & Alert Dashboard**: UI for defining policies and viewing audit trails.
- Desired Stack: Next.js 14+ (App Router), React 19, tRPC, Drizzle ORM, Supabase (PostgreSQL), Tailwind CSS v4, shadcn/ui, Radix UI, Cloudflare Workers, Vercel.
- Design Style: Minimalist, dark mode first.
- Deliverables:
    1.  **Drizzle ORM Schema**: For `policies`, `auditLogs`, and `users` tables.
    2.  **tRPC API**: CRUD for policies, and an `intercept.action` endpoint for real-time validation.
    3.  **Cloudflare Worker**: An edge-layer proxy to intercept AI agent requests, forward to tRPC `intercept.action`, and proxy/block based on response.
    4.  **Next.js Frontend**:
        -   Dashboard layout (dark mode, sidebar nav).
        -   Component for listing policies with filtering/pagination.
        -   Component for creating/editing policies (with dynamic rule fields).
        -   Placeholder for Audit Logs view.
    5.  **SEO Configuration**: Meta tags, basic JSON-LD for `SoftwareApplication`/`Product`, `sitemap.xml`, `robots.txt`.
    6.  **Performance Optimizations**: Code snippets/guidance for image/font optimization, bundle splitting, lazy loading, critical CSS, edge caching.
    7.  **Deployment & DevOps Guidance**: CI/CD with Vercel, Cloudflare Worker deployment, basic monitoring setup.
Format: Provide all deliverables as distinct code blocks (TypeScript, JavaScript, XML, JSON-LD) and clear textual explanations.
Constraints:
-   **Code Quality**: Use modern TypeScript, follow best practices for Next.js, React, tRPC, Drizzle.
-   **Security**: Implement basic authentication (placeholder for NextAuth.js), input validation with Zod.
-   **Immutability**: Ensure audit logs are designed to be immutable.
-   **Real-time**: Focus on low-latency interception logic.
-   **Modularity**: Components and services should be well-separated.
-   **Accessibility**: Basic ARIA attributes for UI components.
-   **Performance**: Prioritize Core Web Vitals in all frontend/backend decisions.
-   **Deployment**: Assume Vercel for Next.js and Cloudflare for Workers.
-   **Placeholder Data**: Use mock data or empty arrays for initial state where real data isn't available.
-   **No External Libraries for Interception**: The Cloudflare Worker should be self-contained.
-   **Output Length**: Comprehensive but concise, focusing on core functionality for an MVP.

5. Stack Mínima Viável

Pra lançar essa belezura em 48h, a gente precisa ser cirúrgico. Aqui está o que eu, Zé Mané, usaria pra ir pro ar rapidão:

  • Framework: Next.js 14 (App Router)
    • Por que: SSR, SSG, API Routes, otimização de imagens, tudo integrado.
  • UI Framework/Componentes: shadcn/ui + Tailwind CSS v4
    • Por que: Componentes acessíveis e personalizáveis, estilização rápida e consistente.
  • Banco de Dados: Supabase (PostgreSQL)
    • Por que: DBaaS, autenticação, armazenamento, tudo em um lugar só, fácil de começar.
  • ORM: Drizzle ORM
    • Por que: Tipagem end-to-end, performance, fácil integração com Supabase.
  • API Layer: tRPC
    • Por que: Tipagem segura entre frontend e backend, elimina boilerplate REST/GraphQL.
  • Validação: Zod
    • Por que: Validação de schemas robusta e tipada.
  • Edge Functions: Cloudflare Workers
    • Por que: Latência mínima para a camada de interceptação, deploy global instantâneo.
  • Deploy: Vercel
    • Por que: CI/CD nativo, escalabilidade automática, integração perfeita com Next.js.
  • Autenticação: NextAuth.js(para o dashboard)
    • Por que: Solução completa e segura para autenticação de usuários.

6. Checklist de Lançamento

Antes de apertar o botão de "Go Live", o Zé Mané tem 10 itens obrigatórios pra você checar:

  1. ✅ Testes de Unidade e Integração (MVP): Cobertura básica para as lógicas de validação de políticas e CRUD.
  2. ✅ Validação de Políticas em Tempo Real: Confirmar que o Cloudflare Worker está interceptando e o backend validando corretamente, bloqueando ações indevidas.
  3. ✅ Logs de Auditoria Imutáveis: Verificar se todas as ações (permitidas e bloqueadas) estão sendo registradas no Supabase com todos os detalhes.
  4. ✅ Autenticação e Autorização (Dashboard): Garantir que apenas usuários autorizados podem acessar e modificar políticas.
  5. ✅ Otimização de Imagens e Fontes: Rodar Lighthouse e PageSpeed Insights para verificar LCP e CLS.
  6. ✅ Meta Tags e Schema.org: Usar o Google Rich Results Test para validar o JSON-LD e as meta tags.
  7. ✅ Sitemap.xml e Robots.txt: Verificar se estão acessíveis e configurados corretamente para indexação.
  8. ✅ Variáveis de Ambiente: Garantir que todas as ENV_VARS estão configuradas corretamente no Vercel e Cloudflare Workers para produção.
  9. ✅ Configuração de Domínio e DNS: Apontar o domínio principal para Vercel e configurar as rotas do Cloudflare Worker.
  10. ✅ Alertas e Notificações: Testar o envio de alertas para violações de política (e-mail, webhook) para os CISOs e CFOs.

É isso, meus caros engenheiros! Com essa receita do Zé Mané, o Agente Guardião não é mais um sonho, mas uma realidade que vai proteger seus investimentos em IA e garantir a conformidade que o Alfredo tanto anseia. Agora, mãos à obra e bora codar!

Compartilhar