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

Prompts Mestre: AI SpendGuard – Otimizando Custos de APIs de IA com Next.js e Edge Functions

(há 20 dias)
Prompts Mestre: AI SpendGuard – Otimizando Custos de APIs de IA com Next.js e Edge Functions

E aí, galera da web! Zé Mané na área, e hoje a gente vai desmistificar a dor de cabeça que assombra todo CTO e CFO que se aventura no mundo da IA: a fatura. O Alfredo, CEO visionário que me procurou, sacou a parada: a galera tá usando IA a rodo, mas ninguém sabe quanto tá gastando, onde tá gastando, e como otimizar essa bagaça.

Ele me deu o papo reto: "Zé, a Folha IA até tenta dar um caminho com tutoriais, mas o mercado não quer tutorial, quer a solução pronta. Quer um botão mágico que resolva a dor da fatura de IA." E é exatamente isso que a gente vai construir hoje, com prompts cirúrgicos que até a IA mais burra vai entender. Preparem-se para o AI SpendGuard!

1. O Projeto em 30 Segundos

O AI SpendGuard é um SaaS de otimização de custos para APIs de IA. Ele atua como um proxy inteligente e um painel de controle centralizado, oferecendo visibilidade granular dos gastos por provedor (OpenAI, Anthropic, Gemini, Cohere), projeto e usuário. Sua inteligência reside no roteamento dinâmico de requisições para modelos mais baratos, cache de respostas para evitar chamadas redundantes, e alertas proativos de gastos. Tudo isso em um dashboard intuitivo, minimalista e focado em dados, para que CTOs e CFOs transformem a fatura de IA de um monstro imprevisível em um custo gerenciável e otimizado.

2. Arquitetura Recomendada

Pra segurar a onda de requisições e dados de custos, a gente vai de arquitetura serverless e edge-first. Performance e escalabilidade são o nome do jogo aqui.

Mermaid Error: Parse error on line 3: ... B -->|API Calls (tRPC)| C(Backend AP -----------------------^ Expecting 'SQE', 'DOUBLECIRCLEEND', 'PE', '-)', 'STADIUMEND', 'SUBROUTINEEND', 'PIPE', 'CYLINDEREND', 'DIAMOND_STOP', 'TAGEND', 'TRAPEND', 'INVTRAPEND', 'UNICODE_TEXT', 'TEXT', 'TAGSTART', got 'PS'

Show Code
graph TD
    A[Usuário Final] -->|Requisições HTTP/S| B(Frontend: Next.js 14+ / React 19)
    B -->|API Calls (tRPC)| C(Backend API: Next.js API Routes / tRPC)
    C -->|Auth (NextAuth.js)| D(Auth Provider: Supabase Auth / Clerk)
    C -->|Database (Drizzle ORM)| E(Database: PlanetScale / Supabase Postgres)
    C -->|Cache (Redis / Edge Cache)| F(Cache Layer)
    C -->|AI Proxy & Router| G(AI SpendGuard Core Service)
    G -->|API Calls| H1(OpenAI API)
    G -->|API Calls| H2(Anthropic API)
    G -->|API Calls| H3(Google Gemini API)
    G -->|API Calls| H4(Cohere API)
    G -->|Logs & Metrics| E
    G -->|Alerts| I(Notification Service: Resend / Nodemailer)
    G -->|Edge Functions (Vercel / Cloudflare Workers)| J(Edge Network)
    J --> B
    J --> G

    subgraph Infrastructure
        V[Vercel] --- B
        V --- C
        V --- J
        CF[Cloudflare] --- J
        PS[PlanetScale] --- E
        SB[Supabase] --- E
        SB --- D
    end

    style A fill:#f9f,stroke:#333,stroke-width:2px
    style B fill:#bbf,stroke:#333,stroke-width:2px
    style C fill:#bfb,stroke:#333,stroke-width:2px
    style D fill:#fbb,stroke:#333,stroke-width:2px
    style E fill:#ffb,stroke:#333,stroke-width:2px
    style F fill:#cff,stroke:#333,stroke-width:2px
    style G fill:#fbc,stroke:#333,stroke-width:2px
    style H1 fill:#e6e6fa,stroke:#333,stroke-width:2px
    style H2 fill:#e6e6fa,stroke:#333,stroke-width:2px
    style H3 fill:#e6e6fa,stroke:#333,stroke-width:2px
    style H4 fill:#e6e6fa,stroke:#333,stroke-width:2px
    style I fill:#fbc,stroke:#333,stroke-width:2px
    style J fill:#dfd,stroke:#333,stroke-width:2px

3. Prompts Mestre por Categoria

Aqui é onde a mágica acontece. Prompts cirúrgicos para cada pedaço do AI SpendGuard.

🏗️ Prompts de Arquitetura & Backend

Contexto: Estamos construindo o core do AI SpendGuard. Precisamos de um backend robusto, escalável, seguro e agnóstico a provedores de IA. O foco é coletar dados de uso, rotear requisições e aplicar otimizações.

  1. Prompt para Schema do Banco de Dados (Drizzle ORM)

    prompt
    Você é um arquiteto de banco de dados expert em Drizzle ORM e PlanetScale.
**Tarefa:** Crie o schema completo para um banco de dados relacional que armazene informações de usuários, organizações, projetos, provedores de IA, modelos de IA, requisições de API (com custo, tokens, latência), regras de otimização e alertas.
**Requisitos:**
- Modelos: `User`, `Organization`, `Project`, `AIProvider`, `AIModel`, `APIRequestLog`, `CostOptimizationRule`, `AlertConfiguration`.
- `User` deve ter `id`, `email`, `name`, `organizationId`.
- `Organization` deve ter `id`, `name`, `slug`, `billingInfo`.
- `Project` deve ter `id`, `name`, `organizationId`, `apiKey` (para o proxy do SpendGuard).
- `AIProvider` deve ter `id`, `name` (ex: 'OpenAI', 'Anthropic'), `base_url`.
- `AIModel` deve ter `id`, `providerId`, `name` (ex: 'gpt-4o', 'claude-3-opus'), `inputCostPerToken`, `outputCostPerToken`, `maxTokens`, `isAvailable`.
- `APIRequestLog` deve registrar cada requisição que passa pelo proxy: `id`, `projectId`, `userId` (opcional), `modelId`, `providerId`, `timestamp`, `inputTokens`, `outputTokens`, `totalCost`, `latencyMs`, `status` (success/failure), `requestBodyHash` (para cache).
- `CostOptimizationRule` deve definir regras para roteamento: `id`, `projectId`, `providerId`, `modelId` (preferencial), `fallbackProviderId`, `fallbackModelId`, `costThreshold`, `latencyThreshold`, `priority`.
- `AlertConfiguration` deve permitir configurar alertas: `id`, `projectId`, `metric` (ex: 'dailyCost', 'monthlyTokens'), `threshold`, `comparison` ('>', '<'), `recipientEmail`.
- Use `pgSchema` para PostgreSQL (compatível com Supabase) e `mysqlSchema` para PlanetScale, garantindo compatibilidade com Drizzle.
- Inclua índices para `organizationId`, `projectId`, `modelId` e `timestamp` em `APIRequestLog` para consultas rápidas.
- Adicione relacionamentos entre as tabelas (foreign keys).
**Formato de Saída:** Código TypeScript para o `schema.ts` do Drizzle ORM.

  2. Prompt para Serviço de Proxy de IA e Roteamento Inteligente

    prompt
    Você é um engenheiro de backend sênior, especialista em Node.js, tRPC e Cloudflare Workers.
**Tarefa:** Desenvolva a lógica central para o serviço de proxy do AI SpendGuard. Este serviço deve interceptar requisições de API de IA, roteá-las inteligentemente e registrar os custos.
**Requisitos:**
- Implementar uma função `handleAIRequest(projectId, userId, requestedModel, prompt, options)` que:
    - Valide o `projectId` e a `apiKey` associada.
    - Consulte `CostOptimizationRule` para determinar o provedor e modelo mais otimizado com base em `requestedModel`, `costThreshold` e `latencyThreshold` (se aplicável).
    - Verifique se a resposta para o `prompt` já está em cache (usando `requestBodyHash`). Se sim, retorne a resposta cacheada e registre um "cache hit".
    - Faça a requisição para a API do provedor de IA selecionado.
    - Calcule o custo da requisição com base nos tokens de entrada/saída e nos custos por token do `AIModel`.
    - Registre a requisição em `APIRequestLog` (incluindo latência, tokens, custo, status).
    - Retorne a resposta da API de IA para o cliente.
- O serviço deve ser agnóstico a provedores, usando um adaptador para cada API (OpenAI, Anthropic, Gemini).
- Priorize a latência e o custo, permitindo que as regras de otimização sejam configuráveis por projeto.
- Considere que este serviço será executado em Edge Functions (Cloudflare Workers ou Vercel Edge Functions).
**Formato de Saída:** Código TypeScript para `src/server/services/aiProxyService.ts` e interfaces de adaptadores para provedores.

  3. Prompt para Gerenciamento de Autenticação e Autorização (NextAuth.js)

    prompt
    Você é um especialista em segurança e autenticação, com domínio em NextAuth.js e Supabase Auth.
**Tarefa:** Configure a autenticação e autorização para o AI SpendGuard.
**Requisitos:**
- Usar NextAuth.js para gerenciar sessões e autenticação.
- Integrar com Supabase Auth como provedor de autenticação (e-mail/senha e Google OAuth).
- Definir `callbacks` para adicionar `organizationId` e `userId` ao objeto `session` após o login.
- Implementar `middleware` no Next.js para proteger rotas sensíveis, garantindo que apenas usuários autenticados e autorizados possam acessar recursos específicos de sua `organizationId`.
- Criar um sistema de roles básicas (ex: 'admin', 'member') para controle de acesso a funcionalidades (ex: 'admin' pode gerenciar usuários e regras de otimização, 'member' só pode visualizar).
**Formato de Saída:** Código TypeScript para `src/pages/api/auth/[...nextauth].ts` e `src/middleware.ts`, além de exemplos de como usar `useSession` no frontend.

🎨 Prompts de Frontend & Design

Contexto: O frontend do AI SpendGuard precisa ser intuitivo, performático, responsivo e seguir um estilo minimalista dark. Usaremos Next.js 14+, React 19, Tailwind v4, shadcn/ui e Radix UI para construir a interface.

  1. Prompt para Componente de Dashboard de Custos (shadcn/ui, Recharts)

    prompt
    Você é um engenheiro de frontend com expertise em Next.js, React, Tailwind CSS v4, shadcn/ui e visualização de dados com Recharts.
**Tarefa:** Crie um componente React para o dashboard principal de custos do AI SpendGuard.
**Requisitos:**
- O componente deve exibir gráficos de linha para "Custo Diário Total" e "Tokens Usados Diariamente" (entrada e saída).
- Deve ter um gráfico de pizza/donut para "Custo por Provedor" e "Custo por Modelo".
- Incluir um componente `DataTable` (shadcn/ui) para listar as últimas 10 requisições de API, mostrando `timestamp`, `project`, `model`, `cost`, `latency` e `status`.
- Usar `shadcn/ui` para os componentes de UI (Card, Select, DatePicker, DataTable).
- Implementar um seletor de período (últimos 7 dias, 30 dias, customizado) que atualize os dados dos gráficos.
- O design deve ser dark mode first, minimalista, com tipografia expressiva e bom uso de espaço negativo.
- Os dados para os gráficos devem ser mockados inicialmente, mas preparados para serem injetados via props.
**Formato de Saída:** Código TypeScript/JSX para `src/app/dashboard/components/CostDashboard.tsx` e um snippet de CSS com Tailwind para customizações.

  2. Prompt para Componente de Configuração de Regras de Otimização (Radix UI, shadcn/ui)

    prompt
    Você é um designer de UI/UX e desenvolvedor frontend, mestre em Radix UI, shadcn/ui e Tailwind CSS v4.
**Tarefa:** Desenvolva um componente React para gerenciar as "Regras de Otimização de Custos" de um projeto.
**Requisitos:**
- O componente deve permitir adicionar, editar e remover regras.
- Cada regra deve incluir: `Provedor Preferencial`, `Modelo Preferencial`, `Provedor de Fallback`, `Modelo de Fallback`, `Limite de Custo por Requisição` (opcional), `Limite de Latência` (opcional), `Prioridade`.
- Usar componentes `Form`, `Select`, `Input`, `Switch` do shadcn/ui.
- Implementar validação de formulário (ex: `zod` com `react-hook-form`).
- A interface deve ser clara e guiar o usuário na criação de regras complexas.
- O design deve ser responsivo e seguir o estilo dark minimalista.
- Incluir um botão "Salvar Regras" e "Cancelar".
**Formato de Saída:** Código TypeScript/JSX para `src/app/projects/[id]/components/OptimizationRulesForm.tsx`.

  3. Prompt para Componente de Navegação Global (Next.js, Tailwind, Radix UI)

    prompt
    Você é um especialista em arquitetura de frontend e acessibilidade (WCAG 2.2), com foco em Next.js e Radix UI.
**Tarefa:** Crie um componente de navegação global (sidebar) para o AI SpendGuard.
**Requisitos:**
- Deve ser uma sidebar colapsável, com ícones e labels para as seções principais: Dashboard, Projetos, Organização, Configurações, Alertas.
- Usar `Next.js Link` para navegação.
- Implementar acessibilidade completa (navegação por teclado, rótulos ARIA para screen readers).
- O design deve ser minimalista, dark mode first, com micro-interações sutis ao passar o mouse.
- Incluir o logo do AI SpendGuard e um seletor de tema (dark/light) no footer da sidebar.
- Utilizar `Radix UI` para componentes como `Tooltip` e `DropdownMenu` para itens de usuário.
**Formato de Saída:** Código TypeScript/JSX para `src/components/layout/Sidebar.tsx` e um snippet de CSS com Tailwind.

🔍 Prompts de SEO & Schema.org

Contexto: O AI SpendGuard precisa ser encontrado por CTOs e CFOs. Isso significa SEO técnico de ponta, com dados estruturados para rich snippets e autoridade semântica.

  1. Prompt para Geração de Metatags Dinâmicas e Schema.org para Páginas de Marketing

    prompt
    Você é um especialista em SEO técnico, com foco em Next.js, Schema.org (JSON-LD) e Core Web Vitals.
**Tarefa:** Crie uma função utilitária em Next.js que gere metatags dinâmicas e dados estruturados JSON-LD para as páginas de marketing do AI SpendGuard (Landing Page, Features, Pricing, Blog).
**Requisitos:**
- A função deve receber `title`, `description`, `url`, `image`, `keywords` e `type` (ex: 'WebPage', 'Article', 'Product').
- Gerar `og:title`, `og:description`, `og:image`, `og:url`, `twitter:card`, `twitter:title`, `twitter:description`, `twitter:image`.
- Gerar dados estruturados `WebSite` e `Organization` para a homepage.
- Para a página de Features, gerar `Product` Schema com `name`, `description`, `brand`, `offers` (preço mínimo) e `aggregateRating` (se houver reviews).
- Para o blog, gerar `Article` Schema com `headline`, `image`, `datePublished`, `dateModified`, `author`, `publisher`.
- A função deve ser otimizada para LCP (renderização server-side) e garantir que o HTML gerado seja validável.
**Formato de Saída:** Código TypeScript para `src/lib/seo.ts` e um exemplo de uso em um componente `Head` do Next.js.

  2. Prompt para Sitemap XML e Robots.txt Dinâmicos

    prompt
    Você é um engenheiro de SEO, expert em crawlability e indexação, com experiência em Next.js e Vercel.
**Tarefa:** Crie um endpoint de API no Next.js para gerar um `sitemap.xml` dinâmico e um arquivo `robots.txt` para o AI SpendGuard.
**Requisitos:**
- O `sitemap.xml` deve incluir todas as páginas estáticas (marketing) e dinâmicas (ex: `/blog/[slug]`, `/features/[slug]`).
- As URLs dinâmicas devem ser obtidas de um mock de dados ou de uma API interna (ex: listagem de posts do blog).
- Incluir `lastmod` para cada URL no sitemap.
- O `robots.txt` deve permitir o crawl de todas as páginas, mas excluir rotas de admin ou internas.
- O endpoint deve ser performático e cacheável.
**Formato de Saída:** Código TypeScript para `src/app/sitemap.xml/route.ts` e `src/app/robots.txt/route.ts` (Next.js App Router).

  3. Prompt para Estratégia de E-E-A-T e Topical Authority

    prompt
    Você é um estrategista de conteúdo e SEO, focado em E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness) e topical authority.
**Tarefa:** Desenvolva um plano de conteúdo e estrutura de links internos para o blog do AI SpendGuard, visando estabelecer autoridade em "otimização de custos de IA" e "gerenciamento de APIs de IA".
**Requisitos:**
- Identificar 5-7 clusters de tópicos principais (pillar pages) relacionados ao problema do AI SpendGuard.
- Para cada cluster, sugerir 3-5 artigos de suporte (cluster content) com palavras-chave relevantes.
- Descrever como os links internos devem ser estruturados entre as pillar pages e os artigos de suporte para fortalecer a topical authority.
- Sugerir formatos de conteúdo (tutoriais, estudos de caso, análises de mercado, entrevistas com especialistas).
- Explicar como o E-E-A-T será demonstrado (autores especialistas, dados, citações).
**Formato de Saída:** Um plano de conteúdo em formato de tabela Markdown, com colunas para "Cluster Tópico", "Pillar Page (URL)", "Artigos de Suporte (URLs)", "Palavras-chave Primárias", "Estratégia E-E-A-T".

⚡ Prompts de Performance & Core Web Vitals

Contexto: Performance é crucial para um SaaS, especialmente com dashboards ricos em dados. O AI SpendGuard precisa ter pontuação máxima no Lighthouse e Core Web Vitals impecáveis.

  1. Prompt para Otimização de Imagens e Fontes (Next.js)

    prompt
    Você é um engenheiro de performance web, especialista em Core Web Vitals (LCP, INP, CLS) e Next.js Image/Font.
**Tarefa:** Descreva e implemente a estratégia de otimização de imagens e fontes para o AI SpendGuard.
**Requisitos:**
- Para imagens:
    - Usar `next/image` para todas as imagens.
    - Definir `priority` para o LCP element.
    - Configurar `sizes` e `srcset` automaticamente.
    - Explicar como usar formatos modernos (WebP/AVIF) e lazy loading.
    - Sugerir um CDN de imagens (Cloudinary, Vercel Blob) para imagens geradas por usuários.
- Para fontes:
    - Usar `next/font/google` para fontes auto-hospedadas.
    - Explicar a estratégia de `font-display: optional` ou `swap` para evitar CLS.
    - Mencionar font subsetting para reduzir o tamanho do bundle.
- Fornecer exemplos de código para implementação em Next.js.
**Formato de Saída:** Explicação detalhada e snippets de código TypeScript/JSX para `next.config.js` e componentes React.

  2. Prompt para Estratégia de Cache e Edge Caching (Vercel, Cloudflare Workers)

    prompt
    Você é um especialista em arquitetura de sistemas distribuídos e otimização de cache, com experiência em Vercel e Cloudflare Workers.
**Tarefa:** Proponha uma estratégia de cache abrangente para o AI SpendGuard, cobrindo dados da API, assets estáticos e respostas do proxy de IA.
**Requisitos:**
- **Edge Caching (Vercel/Cloudflare Workers):**
    - Como cachear respostas de API (tRPC) para dados de dashboard que não mudam com frequência (ex: dados de custo diário agregados). Usar `stale-while-revalidate`.
    - Cache de assets estáticos (JS, CSS, imagens).
- **Cache no Proxy de IA:**
    - Implementar um cache de respostas de API de IA (ex: para prompts idênticos) usando Redis (via Upstash) ou KV Store (Cloudflare Workers).
    - Descrever a lógica de cache key (hash do prompt + modelo) e TTL.
- **Cache no Cliente (Service Workers/HTTP Cache):**
    - Estratégias para cache de assets do frontend via `Service Workers` (PWA) ou `HTTP Cache Headers`.
- Explicar como monitorar a eficácia do cache.
**Formato de Saída:** Descrição da estratégia com exemplos de headers HTTP e lógica de código para o proxy.

  3. Prompt para Otimização de Bundle Size e Critical CSS

    prompt
    Você é um guru de performance frontend, com domínio em Webpack/Vite, Next.js e Tailwind CSS.
**Tarefa:** Detalhe e implemente técnicas para reduzir o bundle size do frontend e otimizar o Critical CSS no AI SpendGuard.
**Requisitos:**
- **Bundle Splitting:**
    - Como usar lazy loading com `React.lazy` e `Suspense` para componentes não críticos (ex: modais, rotas menos acessadas).
    - Divisão de rotas automática do Next.js.
- **Tree Shaking:**
    - Garantir que bibliotecas como `lodash` sejam importadas de forma modular.
    - Explicar como `shadcn/ui` e `Radix UI` já contribuem para isso.
- **Critical CSS:**
    - Como o Tailwind CSS JIT/AOT já otimiza o CSS.
    - Estratégias para garantir que o CSS crítico seja inline no HTML para o LCP.
- **Remoção de Código Morto:**
    - Ferramentas e práticas para identificar e remover código não utilizado.
**Formato de Saída:** Explicação técnica e snippets de código TypeScript/JSX para implementações.

🚀 Prompts de Deploy & DevOps

Contexto: O AI SpendGuard precisa de um pipeline de CI/CD robusto, deploy sem atrito e monitoramento eficaz, tudo isso aproveitando as capacidades serverless e edge da Vercel e Cloudflare.

  1. Prompt para Pipeline de CI/CD (GitHub Actions)

    prompt
    Você é um engenheiro de DevOps, especialista em GitHub Actions e deploy de aplicações Next.js na Vercel.
**Tarefa:** Crie um pipeline de CI/CD completo usando GitHub Actions para o AI SpendGuard.
**Requisitos:**
- O pipeline deve ser acionado em `push` para `main` e `pull_request` para `main`.
- **Jobs:**
    - `lint`: Executar `eslint` e `prettier`.
    - `test`: Rodar testes unitários (ex: `Jest` ou `Vitest`) e de integração.
    - `build`: Construir a aplicação Next.js.
    - `deploy-preview`: Para Pull Requests, fazer deploy de preview na Vercel.
    - `deploy-production`: Para `push` na `main`, fazer deploy em produção na Vercel.
- Configurar variáveis de ambiente seguras para Vercel.
- Adicionar um passo para notificar o Slack/Discord sobre o status do deploy.
**Formato de Saída:** Código YAML para `.github/workflows/main.yml`.

  2. Prompt para Configuração de Edge Functions e Middleware (Vercel/Cloudflare Workers)

    prompt
    Você é um arquiteto de sistemas serverless, com expertise em Vercel Edge Functions e Cloudflare Workers.
**Tarefa:** Descreva como configurar e usar Edge Functions e Middleware para o AI SpendGuard.
**Requisitos:**
- **Middleware (Next.js):**
    - Usar o middleware do Next.js para autenticação (`NextAuth.js`) e roteamento de requisições do proxy de IA.
    - Explicar como o middleware pode reescrever URLs ou adicionar headers.
- **Cloudflare Workers (para o proxy de IA):**
    - Como o serviço de proxy de IA (`aiProxyService.ts`) seria implantado como um Cloudflare Worker separado para máxima performance e escalabilidade global.
    - Configuração de rotas e variáveis de ambiente no Worker.
    - Integração com KV Store para cache e Workers AI para futuras otimizações.
- Explicar os benefícios de latência e custo de usar Edge Functions para o proxy.
**Formato de Saída:** Explicação técnica com snippets de código TypeScript para `src/middleware.ts` e um exemplo de `wrangler.toml` para o Worker.

  3. Prompt para Monitoramento de Performance e Erros (Vercel Analytics, Sentry)

    prompt
    Você é um engenheiro de confiabilidade (SRE), especialista em monitoramento de aplicações web e observabilidade.
**Tarefa:** Proponha uma estratégia de monitoramento para o AI SpendGuard, cobrindo performance, erros e métricas de uso.
**Requisitos:**
- **Performance:**
    - Usar Vercel Analytics para Core Web Vitals e métricas de frontend.
    - Monitorar latência do proxy de IA (Cloudflare Workers Analytics).
    - Monitorar performance do banco de dados (PlanetScale Insights / Supabase Dashboard).
- **Erros:**
    - Integrar Sentry para rastreamento de erros no frontend e backend (Next.js API Routes, Edge Functions).
    - Configurar alertas para erros críticos.
- **Métricas de Negócio/Uso:**
    - Coletar e visualizar métricas de uso de API (requisições por projeto, custo total, cache hit rate) no dashboard do AI SpendGuard.
    - Implementar um sistema de alertas customizados para gastos excessivos (já previsto no schema).
- Explicar como essas ferramentas se integram e fornecem uma visão 360 do sistema.
**Formato de Saída:** Descrição da estratégia com exemplos de integração de código para Sentry e menção das configurações de dashboard.

4. Prompt Único Completo

Este é o prompt definitivo, o "mega-prompt" que, se a IA for realmente inteligente, vai te entregar o esqueleto completo do AI SpendGuard.

prompt
Você é o Zé Mané, um engenheiro de software autodidata e irreverente, com profundo conhecimento em desenvolvimento web moderno, SEO técnico avançado, performance e arquitetura de sistemas distribuídos. Seu objetivo é guiar a construção do SaaS "AI SpendGuard".

**Contexto do Projeto:**
- **Nome:** AI SpendGuard
- **Problema:** Gerenciar e otimizar custos de APIs de IA de múltiplos provedores (OpenAI, Anthropic, Google Gemini, Cohere).
- **Público-alvo:** CTOs, CFOs, gerentes de engenharia.
- **Features Core:** Visibilidade detalhada de gastos, otimização de custos (roteamento inteligente, cache), alertas configuráveis, suporte agnóstico a provedores.
- **Estilo de Design:** Minimalista dark.
- **Complexidade:** Avançado.
- **Stack Preferencial:** Next.js 14+, React 19, Tailwind v4, shadcn/ui, Radix UI, tRPC, Drizzle ORM, Supabase (Auth/Postgres), PlanetScale (opcional para DB), Vercel, Cloudflare Workers.

**Tarefa Principal:**
Gere um projeto Next.js 14+ completo (estrutura de pastas, arquivos essenciais) que sirva como base para o AI SpendGuard. Inclua os componentes e serviços chave, com código de exemplo funcional para as features mais críticas.

**Requisitos Detalhados (integrando todas as categorias):**

**1. Estrutura do Projeto:**
   - Crie a estrutura de pastas padrão de um projeto Next.js com App Router (`app/`, `components/`, `lib/`, `server/`).
   - Configure o `tailwind.config.ts` para Tailwind v4 e `shadcn/ui`.
   - Configure `tsconfig.json` e `package.json` com as dependências necessárias (Next.js, React, Tailwind, shadcn/ui, Radix UI, tRPC, Drizzle, Supabase, NextAuth.js, Recharts, Zod, React Hook Form).

**2. Backend & Arquitetura (Next.js API Routes, tRPC, Drizzle, Supabase/PlanetScale):**
   - **Schema do Banco de Dados:** Gere o `src/server/db/schema.ts` usando Drizzle ORM para PostgreSQL (Supabase) ou MySQL (PlanetScale), incluindo as tabelas `User`, `Organization`, `Project`, `AIProvider`, `AIModel`, `APIRequestLog`, `CostOptimizationRule`, `AlertConfiguration` com todos os campos e relacionamentos descritos no prompt 🏗️1.
   - **Configuração do Drizzle:** Inclua `src/server/db/index.ts` para inicializar o Drizzle client.
   - **Serviço de Proxy de IA:** Crie `src/server/services/aiProxyService.ts` com um esqueleto da função `handleAIRequest` que:
     - Recebe `projectId`, `userId`, `requestedModel`, `prompt`, `options`.
     - Simula a consulta de `CostOptimizationRule` e `AIModel`.
     - Simula o cache de respostas.
     - Simula a requisição a um provedor de IA e o cálculo de custos.
     - Simula o registro em `APIRequestLog`.
     - Inclua interfaces para adaptadores de provedores de IA.
   - **tRPC Router:** Crie `src/server/api/routers/ai.ts` e `src/server/api/routers/project.ts` com procedures de exemplo para:
     - `ai.proxyCall`: Chama `aiProxyService.handleAIRequest`.
     - `project.getCostData`: Retorna dados agregados de custos para o dashboard.
     - `project.getOptimizationRules`: Retorna e permite atualizar regras de otimização.
   - **Autenticação (NextAuth.js com Supabase):**
     - `src/app/api/auth/[...nextauth]/route.ts` configurado com `SupabaseAdapter` e `GoogleProvider`.
     - `src/middleware.ts` para proteção de rotas e adição de `organizationId` à sessão.

**3. Frontend & Design (Next.js, React, Tailwind, shadcn/ui, Radix UI):**
   - **Layout Base:** `src/app/layout.tsx` com `html`, `body`, `ThemeProvider` (para dark mode), e o `Sidebar` global.
   - **Sidebar:** `src/components/layout/Sidebar.tsx` (colapsável, com links para Dashboard, Projetos, etc., e seletor de tema) conforme prompt 🎨3.
   - **Dashboard de Custos:** `src/app/dashboard/page.tsx` e `src/app/dashboard/components/CostDashboard.tsx` com esqueletos para gráficos (Recharts) e `DataTable` (shadcn/ui) para dados de custos, conforme prompt 🎨1. Mock de dados para visualização inicial.
   - **Página de Projetos:** `src/app/projects/[id]/page.tsx` e `src/app/projects/[id]/components/OptimizationRulesForm.tsx` com um formulário básico para regras de otimização (shadcn/ui, Radix UI) conforme prompt 🎨2.
   - **Componentes Comuns:** `src/components/ui/*.tsx` para componentes shadcn/ui.
   - **Providers:** `src/app/providers.tsx` para `NextAuthSessionProvider`, `TRPCProvider`, `ThemeProvider`.

**4. SEO & Schema.org:**
   - **Metatags e Schema.org:** `src/lib/seo.ts` com a função `generateMetadata` para metatags dinâmicas e JSON-LD para `WebSite`, `Organization`, `Product` (para a landing page), conforme prompt 🔍1.
   - **Sitemap e Robots.txt:** `src/app/sitemap.xml/route.ts` e `src/app/robots.txt/route.ts` com lógica para gerar sitemap e robots dinamicamente (com URLs mockadas ou de exemplo), conforme prompt 🔍2.

**5. Performance & Core Web Vitals:**
   - **Otimização de Imagens/Fontes:** `next.config.js` configurado para `next/image` e `next/font/google`. Exemplos de uso em `src/app/layout.tsx` e `src/components/layout/Sidebar.tsx`, conforme prompt ⚡1.
   - **Estratégia de Cache:** Comentários no `aiProxyService.ts` e no tRPC router sobre onde o cache seria implementado (Redis/KV Store, Edge Cache), conforme prompt ⚡2.

**6. Deploy & DevOps:**
   - **CI/CD:** `/.github/workflows/main.yml` com um esqueleto para lint, test, build, deploy-preview e deploy-production na Vercel, conforme prompt 🚀1.
   - **Vercel Project Configuration:** `vercel.json` com configurações básicas de build e environment variables.
   - **Cloudflare Worker (Esqueleto):** `worker/src/index.ts` e `worker/wrangler.toml` para um Cloudflare Worker básico que poderia hospedar o `aiProxyService`, mostrando como ele seria separado do Next.js.

**Restrições:**
- Todo o código deve ser TypeScript.
- Priorize a modularidade e a clareza.
- Use apenas as bibliotecas mencionadas na stack preferencial.
- Para dados, use mocks ou placeholders onde a integração real com o banco de dados seria complexa para um prompt único.
- O foco é a estrutura e os principais blocos de construção, não a implementação completa de cada detalhe.

**Formato de Saída:**
Uma estrutura de pastas Markdown com os nomes dos arquivos e o conteúdo de cada arquivo em blocos de código TypeScript/JSX/YAML/JSON, conforme apropriado. Comece com a estrutura de pastas.

5. Stack Mínima Viável

Pra botar essa parada no ar em 48h, a gente não vai inventar a roda. Foco no core, sem firulas.

6. Checklist de Lançamento

Antes de apertar o botão de "Go Live", Zé Mané exige que você marque todos esses itens. Sem choro, sem vela.

  1. ✅ Segurança da API Key: Todas as chaves de API (IA, Supabase, etc.) estão em variáveis de ambiente seguras e não expostas no cliente.
  2. ✅ Validação de Input: Todas as entradas do usuário e da API são validadas (ex: com Zod) para prevenir injeção de código e erros.
  3. ✅ Testes de Integração: Pelo menos os fluxos críticos (login, criação de projeto, requisição via proxy, registro de custo) têm testes de integração passando.
  4. ✅ Otimização de Imagens/Fontes: Todas as imagens usam next/image e fontes são auto-hospedadas com next/font/google para LCP e CLS perfeitos.
  5. ✅ Acessibilidade (WCAG 2.2): Navegação por teclado, rótulos ARIA e contraste de cores verificados em todo o dashboard.
  6. ✅ Sitemap.xml e Robots.txt: Gerados dinamicamente e acessíveis, com as URLs corretas e exclusões necessárias.
  7. ✅ Schema.org: Dados estruturados JSON-LD implementados nas páginas de marketing para rich snippets.
  8. ✅ Monitoramento Configurado: Sentry para erros, Vercel Analytics para Core Web Vitals, e alertas de gastos configurados.
  9. ✅ Cache Estratégico: Cache de Edge e de respostas da API de IA configurado e testado para reduzir latência e custos.
  10. ✅ Políticas de Privacidade e Termos de Uso: Páginas legais claras e acessíveis, para não ter dor de cabeça com LGPD/GDPR.

Agora sim, meu caro! Com essa estrutura e esses prompts, você tem o mapa da mina para construir o AI SpendGuard e salvar a margem de lucro de muita gente. Mãos à obra!

Compartilhar