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

Prompts Mestre: AgentFlow AI – Orquestrando Agentes LangChain em Produção com Next.js e Supabase

(há 8 dias)
Prompts Mestre: AgentFlow AI – Orquestrando Agentes LangChain em Produção com Next.js e Supabase

E aí, meu povo da engenharia! Zé Mané na área, e hoje a gente vai desmistificar essa selva de agentes de IA em produção. O Alfredo, nosso CEO visionário, jogou a bola: a Yuxi é legal, mas foca no desenvolvimento. A dor real? Orquestrar, monitorar e otimizar um batalhão de agentes em produção. E é pra isso que a gente vai criar o AgentFlow AI!

Preparem-se para uma overdose de prompts cirúrgicos, arquitetura de ponta e aquele toque de gênio que só o Zé Mané tem. Vamos transformar essa complexidade em lucro e escala, usando o que há de mais moderno no desenvolvimento web.

1. O Projeto em 30 Segundos

O AgentFlow AI é uma plataforma SaaS para orquestrar, monitorar e otimizar agentes de IA baseados em LangChain em produção. Ele resolve o pântano operacional de gerenciar múltiplos agentes, oferecendo visibilidade granular de performance, gerenciamento de RAG (Retrieval Augmented Generation) e fontes de conhecimento, otimização de prompts e tools, e um CI/CD robusto para agentes. Nosso público-alvo são equipes de engenharia que buscam escalar e garantir a performance de suas operações com IA. A ideia é transformar a complexidade de um exército de LLMs em um fluxo de trabalho suave e eficiente, tudo isso com uma stack moderna e um design minimalista dark.

2. Arquitetura Recomendada

Pra segurar essa bronca, a gente precisa de uma arquitetura que seja performática, escalável e fácil de manter. Esquece gambiarra, aqui é engenharia de verdade. Vamos de Next.js no Edge, tRPC pra tipagem end-to-end, Drizzle ORM com PlanetScale pra banco de dados, Supabase para autenticação e storage, e Cloudflare Workers pra processamento assíncrono e escalabilidade das chamadas aos agentes.

Mermaid Error: Parse error on line 3: ... B -->|API Calls (tRPC)| C(Next.js 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/Cliente] -->|Requisição Web| B(Next.js 14+ Frontend/Backend - Vercel Edge)
    B -->|API Calls (tRPC)| C(Next.js API Routes - Vercel Serverless)
    C -->|AuthN/AuthZ| D(Supabase Auth)
    C -->|CRUD Operations| E(Drizzle ORM + PlanetScale - MySQL)
    C -->|Storage (RAG Docs, Agent Configs)| F(Supabase Storage)
    C -->|Agent Orchestration/Execution| G(Cloudflare Workers - LangChain Runner)
    G -->|LLM Calls| H(OpenAI API)
    G -->|Vector Store Ops| I(Pinecone/Weaviate - Vector DB)
    G -->|Metric Logging| J(Redis/Kafka - Async Metrics)
    J -->|Data Ingestion| K(TimescaleDB/ClickHouse - Analytics DB)
    B -->|Realtime Updates (Optional)| L(Supabase Realtime/WebSockets)
    SubGraph Agentes de IA
        G --> M[Agente LangChain 1]
        G --> N[Agente LangChain 2]
        M --> I
        N --> I
        M --> H
        N --> H
    End
    K --> B
    K --> O[Dashboard de Monitoramento]
    O --> B

Explicação da Arquitetura:

  • Frontend/Backend (Next.js 14+): Unificado para SSR/SSG/ISR e API Routes. Hospedado na Vercel para aproveitar o Edge e as funções serverless.
  • Autenticação (Supabase Auth): Gerenciamento de usuários, roles e permissões.
  • Banco de Dados Principal (PlanetScale + Drizzle ORM): MySQL escalável com branching, ideal para dados transacionais e de configuração da plataforma. Drizzle ORM para tipagem segura e queries eficientes.
  • Storage (Supabase Storage): Armazenamento de documentos para RAG, configurações de agentes, logs de execução.
  • Orquestração de Agentes (Cloudflare Workers): O coração do sistema. Workers são ideais para rodar os agentes LangChain de forma isolada, escalável e com baixa latência, próximos aos usuários. Eles farão as chamadas para LLMs (OpenAI) e Vector DBs (Pinecone/Weaviate).
  • Bancos de Dados Vetoriais (Pinecone/Weaviate): Essenciais para o RAG, armazenando embeddings de documentos e permitindo buscas semânticas rápidas.
  • Filas de Mensagens/Cache (Redis/Kafka): Para ingestão assíncrona de métricas e logs de execução dos agentes, desacoplando o processo de monitoramento.
  • Banco de Dados Analítico (TimescaleDB/ClickHouse): Onde as métricas e logs de performance dos agentes serão armazenados para análises complexas, dashboards e otimização.
  • tRPC: Para comunicação segura e tipada entre o frontend e as APIs do Next.js.

3. Prompts Mestre por Categoria

Vamos aos prompts que vão fazer a IA suar a camisa e entregar o ouro!

🏗️ Prompts de Arquitetura & Backend

Aqui a gente define a espinha dorsal do AgentFlow AI: como os dados se organizam, como os agentes são executados e como a autenticação funciona.

prompt
// Prompt para Claude/GPT-4
**Contexto:** Estamos construindo o AgentFlow AI, um SaaS para orquestração e monitoramento de agentes LangChain. A stack de backend principal é Next.js 14+ (API Routes) com tRPC, Drizzle ORM e PlanetScale (MySQL). A execução dos agentes será em Cloudflare Workers.

**Papel:** Arquiteto de Backend e Engenheiro de Dados.

**Tarefa:** Projete o esquema do banco de dados (PlanetScale via Drizzle ORM) para as entidades `Agent`, `AgentConfig`, `AgentRun`, `KnowledgeBase`, `Document` e `User`. Inclua campos essenciais para cada entidade, como IDs (UUID), timestamps (createdAt, updatedAt), relações (foreign keys), e campos específicos para a funcionalidade (ex: `agent_id`, `model_name`, `prompt_template`, `status`, `duration_ms`, `cost_usd`, `source_url` para documentos). Pense na escalabilidade e na capacidade de consulta para dashboards de monitoramento.

**Formato de Saída:**
1.  Diagrama de Entidade-Relacionamento (ERD) simplificado em Mermaid.
2.  Definições de esquema Drizzle ORM (TypeScript) para cada tabela, incluindo índices relevantes.
3.  Exemplo de query tRPC para buscar as últimas 10 execuções de um agente específico, com paginação.

**Restrições:**
*   Use UUIDs para IDs primários.
*   Todos os campos de texto devem considerar o tamanho máximo razoável.
*   Inclua campos para métricas de custo e duração em `AgentRun`.
*   As configurações do agente (`AgentConfig`) devem ser versionadas (ex: `version` field ou uma tabela de histórico).
*   Considere a otimização para consultas de monitoramento (ex: índices em `agent_id`, `status`, `createdAt` em `AgentRun`).
prompt
// Prompt para Claude/GPT-4
**Contexto:** No AgentFlow AI, precisamos de um serviço de execução de agentes LangChain que seja resiliente, escalável e monitorável. A execução ocorrerá em Cloudflare Workers.

**Papel:** Engenheiro de Cloudflare Workers e LangChain.

**Tarefa:** Crie um esqueleto de um Cloudflare Worker que:
1.  Receba requisições via POST contendo o `agent_id` e os `inputs` para o agente.
2.  Busque a `AgentConfig` mais recente do `agent_id` no PlanetScale (via uma API do Next.js ou diretamente se possível, mas prefira via API).
3.  Inicialize um agente LangChain (pode ser um `AgentExecutor` simples com um `ChatOpenAI` e algumas `tools` mock).
4.  Execute o agente com os `inputs` fornecidos.
5.  Capture o resultado, logs intermediários, duração e custo estimado da execução.
6.  Persista os dados da `AgentRun` (incluindo status, output, métricas) no PlanetScale (via API do Next.js).
7.  Envie logs detalhados para um endpoint de ingestão de métricas (simule um `fetch` para `api/metrics/ingest`).
8.  Retorne o resultado final do agente para o cliente.

**Formato de Saída:**
1.  Código TypeScript para o Cloudflare Worker (`src/worker.ts`).
2.  Exemplo de `wrangler.toml` para deploy.
3.  Esqueleto da função API do Next.js para persistir `AgentRun` e buscar `AgentConfig`.

**Restrições:**
*   Use `itty-router` ou similar para roteamento no Worker.
*   Simule as `tools` do LangChain (ex: uma tool para "search" que retorna um texto fixo).
*   Priorize a robustez e o tratamento de erros.
*   A comunicação com o Next.js API deve ser via `fetch`.
prompt
// Prompt para Claude/GPT-4
**Contexto:** O AgentFlow AI precisa de um sistema robusto para gerenciar fontes de conhecimento (RAG). Isso envolve upload de documentos, chunking, embedding e armazenamento em um Vector DB (Pinecone ou Weaviate).

**Papel:** Engenheiro de RAG e Processamento de Dados.

**Tarefa:** Projete e implemente um fluxo de ingestão de documentos para uma `KnowledgeBase` específica.
1.  Crie uma API no Next.js (`/api/knowledge-base/[id]/upload`) que aceite um arquivo (PDF, TXT, DOCX) via `multipart/form-data`.
2.  Use Supabase Storage para armazenar o arquivo original.
3.  Após o upload, enfileire uma tarefa assíncrona (simule com um `setTimeout` ou um log) para processamento.
4.  A tarefa de processamento (simule em um Cloudflare Worker ou uma função serverless separada) deve:
    *   Baixar o documento do Supabase Storage.
    *   Dividir o documento em chunks (use uma estratégia simples como `RecursiveCharacterTextSplitter` do LangChain, simulado).
    *   Gerar embeddings para cada chunk (simule com a API OpenAI Embeddings).
    *   Armazenar os chunks e seus embeddings no Vector DB (simule as chamadas para Pinecone/Weaviate).
    *   Atualizar o status do `Document` no PlanetScale.

**Formato de Saída:**
1.  Código TypeScript para a API de upload no Next.js.
2.  Esqueleto da função de processamento assíncrono.
3.  Definição do `Document` no Drizzle ORM com campos como `status` (pending, processed, failed), `file_path`, `knowledge_base_id`.

**Restrições:**
*   Foco na arquitetura e fluxo, a implementação do chunking/embedding pode ser simplificada.
*   Garanta que a API de upload seja segura (autenticação via Supabase Auth).
*   Considere o tratamento de arquivos grandes.

🎨 Prompts de Frontend & Design

Agora, vamos dar vida ao AgentFlow AI com uma interface que seja tão funcional quanto bonita, usando o que há de melhor em design systems e acessibilidade.

prompt
// Prompt para Claude/GPT-4
**Contexto:** O AgentFlow AI precisa de um dashboard de monitoramento de agentes. O design é minimalista dark. A stack de frontend é Next.js 14+, React 19, Tailwind v4, shadcn/ui e Radix UI.

**Papel:** Engenheiro de Frontend e Designer de UI/UX.

**Tarefa:** Crie o layout e os componentes principais para o dashboard de monitoramento de um agente individual.
1.  **Layout:** Um layout de página com sidebar de navegação (para lista de agentes) e área de conteúdo principal.
2.  **Componente `AgentOverviewCard`:** Um card que exiba métricas chave de um agente: nome, status (ativo/inativo), total de execuções, custo total, média de duração, e um sparkline de execuções/dia (dados mock).
3.  **Componente `AgentRunTable`:** Uma tabela paginada que liste as execuções recentes do agente. Colunas: ID da execução, Status (sucesso/falha), Duração, Custo, Entrada (truncada), Saída (truncada), Timestamp. Use componentes de `shadcn/ui` para a tabela e paginação.
4.  **Estilo:** Aplique o tema dark minimalista usando Tailwind CSS.

**Formato de Saída:**
1.  Estrutura de pastas e arquivos para os componentes.
2.  Código React/TypeScript para os componentes `AgentOverviewCard` e `AgentRunTable`.
3.  Exemplo de uso em uma página Next.js.
4.  Configuração básica do Tailwind CSS para o tema dark.

**Restrições:**
*   Use `shadcn/ui` para componentes como `Table`, `Pagination`, `Card`.
*   O design deve ser responsivo.
*   Dados podem ser mockados para demonstração.
*   Foco na estrutura e estilização, não na lógica de fetching de dados (que virá do tRPC).
prompt
// Prompt para Claude/GPT-4
**Contexto:** Para o AgentFlow AI, precisamos de um editor de configurações de agente que seja intuitivo e poderoso. A stack é Next.js, React, Tailwind v4, shadcn/ui, Radix UI.

**Papel:** Engenheiro de Frontend e Especialista em Formulários.

**Tarefa:** Desenvolva um componente `AgentConfigEditor` que permita editar as configurações de um agente.
1.  **Formulário:** Crie um formulário com campos para: `name` (string), `description` (textarea), `model_name` (select: gpt-3.5-turbo, gpt-4, claude-3), `prompt_template` (textarea para o prompt principal), `temperature` (slider: 0.0-1.0), `tools` (multi-select de ferramentas disponíveis, ex: Search, Calculator, Code Interpreter - dados mock).
2.  **Validação:** Adicione validação básica (ex: `name` é obrigatório).
3.  **Estado:** Gerencie o estado do formulário (pode ser com `react-hook-form` ou estado local simples).
4.  **Botões:** Inclua botões "Salvar" e "Cancelar".
5.  **Design:** Use componentes `shadcn/ui` (`Input`, `Textarea`, `Select`, `Slider`, `MultiSelect`).

**Formato de Saída:**
1.  Código React/TypeScript para o componente `AgentConfigEditor`.
2.  Exemplo de como integrar este componente em uma página.
3.  Instruções para configurar o `MultiSelect` (se não for nativo do shadcn, pode ser um componente customizado simples).

**Restrições:**
*   Priorize a usabilidade e a clareza do formulário.
*   O componente deve ser reutilizável.
*   Dados para `model_name` e `tools` podem ser hardcoded.
prompt
// Prompt para Claude/GPT-4
**Contexto:** O AgentFlow AI precisa de uma experiência de usuário fluida e moderna, especialmente ao navegar entre as páginas e ao interagir com elementos. A stack é Next.js, React, Tailwind v4, View Transitions API.

**Papel:** Especialista em UX e Frontend Performance.

**Tarefa:** Implemente as seguintes melhorias de UX/UI:
1.  **View Transitions API:** Aplique a View Transitions API para navegação entre páginas (ex: da lista de agentes para o detalhe de um agente).
2.  **Micro-interações:** Adicione micro-interações sutis em botões e links (ex: hover states com leve escala ou mudança de cor, feedback visual ao clicar).
3.  **Dark Mode First:** Garanta que todos os componentes e layouts sejam projetados e estilizados com o tema dark como padrão, com a possibilidade de alternar para light mode (se houver, mas o foco é dark).
4.  **Acessibilidade:** Verifique e implemente atributos ARIA básicos para navegação e formulários, garantindo que o teclado seja totalmente funcional.

**Formato de Saída:**
1.  Exemplo de implementação da View Transitions API em um `layout.tsx` ou `page.tsx` do Next.js.
2.  Snippets de CSS/Tailwind para micro-interações.
3.  Verificação de acessibilidade para um componente de formulário ou navegação.
4.  Instruções para configurar o dark mode no Tailwind.

**Restrições:**
*   A View Transitions API deve ser usada de forma elegante, sem distrações.
*   As micro-interações devem ser sutis e funcionais, não intrusivas.
*   Priorize a compatibilidade com leitores de tela e navegação por teclado.

🔍 Prompts de SEO & Schema.org

Mesmo sendo um SaaS B2B, o SEO técnico é crucial para o AgentFlow AI. Precisamos garantir que os mecanismos de busca entendam o que fazemos e para quem.

prompt
// Prompt para Claude/GPT-4
**Contexto:** O AgentFlow AI é um SaaS para orquestração de agentes de IA. Precisamos otimizar a página inicial e as páginas de recursos para SEO. A stack é Next.js 14+.

**Papel:** Especialista em SEO Técnico e Dados Estruturados.

**Tarefa:** Crie as meta tags essenciais e dados estruturados Schema.org (JSON-LD) para a página inicial do AgentFlow AI.
1.  **Meta Tags:** `title`, `description`, `og:title`, `og:description`, `og:image`, `twitter:card`, `twitter:title`, `twitter:description`, `twitter:image`, `canonical` URL.
2.  **Schema.org (JSON-LD):** Implemente o tipo `SoftwareApplication` e `Organization`. Inclua propriedades como `name`, `description`, `url`, `logo`, `operatingSystem`, `applicationCategory`, `offers` (com `price`, `priceCurrency`, `availability`).

**Formato de Saída:**
1.  Código React/TypeScript para o `head` de uma página Next.js, usando o componente `Metadata` ou `Head`.
2.  Bloco de JSON-LD para o Schema.org, incorporado no componente.

**Restrições:**
*   Use placeholders para valores dinâmicos (ex: `process.env.NEXT_PUBLIC_SITE_URL`).
*   A descrição deve ser concisa e focada nos benefícios do AgentFlow AI.
*   A imagem OG deve ser de alta qualidade (ex: 1200x630px).
prompt
// Prompt para Claude/GPT-4
**Contexto:** Para o AgentFlow AI, é fundamental que as páginas de documentação e recursos sobre LangChain e otimização de agentes sejam bem ranqueadas.

**Papel:** Especialista em Conteúdo e SEO Semântico.

**Tarefa:** Proponha uma estratégia de SEO para as páginas de documentação e blog do AgentFlow AI, focando em E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness) e topical authority.
1.  **Estrutura de URLs:** Sugira uma estrutura de URL amigável e hierárquica (ex: `/docs/agentes/langchain/orquestracao`, `/blog/otimizacao-prompts-rag`).
2.  **Palavras-chave:** Liste 10-15 palavras-chave primárias e secundárias relevantes para "orquestração de agentes LangChain", "monitoramento de IA em produção", "otimização de RAG", "escalabilidade de LLMs".
3.  **Conteúdo E-E-A-T:** Descreva como o conteúdo deve ser construído para demonstrar experiência e autoridade (ex: estudos de caso, tutoriais detalhados, autores com credenciais).
4.  **Link Building Programático:** Sugira abordagens para link building interno e externo que reforcem a autoridade do domínio (ex: links para documentação de ferramentas externas, menções a papers de pesquisa).

**Formato de Saída:**
1.  Lista de sugestões de URLs.
2.  Tabela de palavras-chave com volume de busca estimado (mock) e intenção.
3.  Diretrizes de conteúdo para E-E-A-T.
4.  Estratégias de link building.

**Restrições:**
*   As palavras-chave devem ser de cauda longa e focadas no nicho.
*   As diretrizes de conteúdo devem ser acionáveis.
*   O foco é em SEO técnico e de conteúdo, não em campanhas de marketing pagas.

⚡ Prompts de Performance & Core Web Vitals

Performance não é luxo, é requisito. O AgentFlow AI precisa ser rápido como um raio para garantir a melhor experiência e ranqueamento.

prompt
// Prompt para Claude/GPT-4
**Contexto:** O AgentFlow AI é um SaaS complexo com muitos componentes de UI e dados. Precisamos garantir que as Core Web Vitals (LCP, INP, CLS) sejam excelentes. A stack é Next.js 14+, React 19, Tailwind v4, shadcn/ui.

**Papel:** Especialista em Performance Web e Core Web Vitals.

**Tarefa:** Proponha e implemente otimizações de performance para uma página de dashboard complexa (ex: a página de detalhes de um agente com gráficos e tabelas).
1.  **LCP (Largest Contentful Paint):** Estratégias para otimizar o LCP, incluindo pré-carregamento de fontes e imagens críticas, e Critical CSS.
2.  **INP (Interaction to Next Paint):** Técnicas para melhorar a responsividade, como lazy loading de componentes não críticos, debouncing/throttling de eventos e uso de `useTransition` ou `startTransition` do React.
3.  **CLS (Cumulative Layout Shift):** Como evitar shifts de layout, garantindo dimensões explícitas para imagens e embeds, e pré-alocando espaço para conteúdo dinâmico.
4.  **Bundle Splitting & Lazy Loading:** Demonstre como aplicar bundle splitting e lazy loading para componentes pesados ou rotas específicas.

**Formato de Saída:**
1.  Snippets de código para cada otimização (Next.js `Image`, `next/dynamic`, CSS).
2.  Configuração do `next.config.js` para otimização de imagens e fontes.
3.  Explicação de como monitorar essas métricas com Lighthouse e PageSpeed Insights.

**Restrições:**
*   As otimizações devem ser práticas e aplicáveis à stack.
*   Foco em exemplos de código, não apenas teoria.
*   Considere a otimização de fontes customizadas.
prompt
// Prompt para Claude/GPT-4
**Contexto:** O AgentFlow AI lida com muitos dados e pode ter gráficos complexos. Precisamos garantir que a renderização seja eficiente e que as imagens sejam otimizadas.

**Papel:** Engenheiro de Frontend e Otimização.

**Tarefa:** Implemente as seguintes otimizações de recursos:
1.  **Otimização de Imagens:** Configure o Next.js `Image` para servir imagens no formato WebP/AVIF, com tamanhos responsivos e lazy loading.
2.  **Font Subsetting:** Demonstre como otimizar o carregamento de fontes customizadas, usando font subsetting e `font-display: swap`.
3.  **Edge Caching para APIs:** Descreva como configurar o cache no Vercel Edge para endpoints de API que servem dados estáticos ou pouco mutáveis (ex: lista de modelos de LLM disponíveis).
4.  **Service Workers:** Proponha um caso de uso para Service Workers no AgentFlow AI para melhorar a resiliência e performance (ex: cache de assets estáticos, notificações offline - pode ser um esqueleto).

**Formato de Saída:**
1.  Exemplo de uso do componente `next/image`.
2.  Configuração do `next.config.js` para fontes.
3.  Exemplo de `Cache-Control` headers para APIs no Next.js.
4.  Esqueleto de um Service Worker (`public/service-worker.js`) e como registrá-lo.

**Restrições:**
*   As otimizações devem ser realistas para um SaaS.
*   O Service Worker pode ser um exemplo básico, sem implementação completa.
*   Foco em ganhos de performance tangíveis.

🚀 Prompts de Deploy & DevOps

Colocar o AgentFlow AI no ar e mantê-lo rodando liso é a missão do DevOps. Automação, monitoramento e resiliência são as palavras-chave.

prompt
// Prompt para Claude/GPT-4
**Contexto:** O AgentFlow AI será implantado na Vercel (Next.js) e Cloudflare (Workers). Precisamos de um pipeline de CI/CD robusto.

**Papel:** Engenheiro de DevOps e Automação.

**Tarefa:** Crie um pipeline de CI/CD para o AgentFlow AI usando GitHub Actions.
1.  **Next.js (Vercel):** Configure um workflow para deploy automático do frontend/backend (Next.js) na Vercel em push para `main` e previews em PRs.
2.  **Cloudflare Workers:** Configure um workflow para deploy automático dos Cloudflare Workers em push para `main`.
3.  **Testes:** Inclua etapas para rodar testes unitários e de integração (simule com `npm test`).
4.  **Linting:** Adicione uma etapa de linting (`npm run lint`).
5.  **Variáveis de Ambiente:** Demonstre como gerenciar variáveis de ambiente de forma segura.

**Formato de Saída:**
1.  Arquivo `.github/workflows/main.yml` completo.
2.  Instruções para configurar os segredos no GitHub e Vercel/Cloudflare.

**Restrições:**
*   Use as ações oficiais do Vercel e Cloudflare para deploy.
*   O pipeline deve ser eficiente e rápido.
*   Priorize a segurança das credenciais.
prompt
// Prompt para Claude/GPT-4
**Contexto:** O AgentFlow AI precisa de monitoramento granular para a saúde da plataforma e a performance dos agentes.

**Papel:** Engenheiro de Observabilidade e SRE.

**Tarefa:** Projete uma estratégia de monitoramento e alertas para o AgentFlow AI.
1.  **Métricas de Aplicação (Next.js):** Quais métricas coletar (ex: latência de API, erros 5xx, uso de memória/CPU das funções serverless).
2.  **Métricas de Agentes (Cloudflare Workers):** Quais métricas coletar para cada `AgentRun` (ex: duração, custo, tokens usados, taxa de sucesso/falha, latência de LLM/Vector DB).
3.  **Logs:** Estratégia de log centralizado (ex: Vercel Logs, Cloudflare Logpush para um sistema como Datadog/New Relic/Grafana Loki).
4.  **Alertas:** Defina 3-5 regras de alerta críticas (ex: taxa de erro > 5%, LCP > 2.5s, custo de agente excedendo limite).
5.  **Dashboards:** Sugira os principais gráficos e visualizações para um dashboard de visibilidade operacional.

**Formato de Saída:**
1.  Lista de métricas por componente.
2.  Estratégia de log.
3.  Regras de alerta com thresholds (mock).
4.  Esboço de dashboard (descrição textual).

**Restrições:**
*   Foco em métricas acionáveis.
*   Considere ferramentas de monitoramento modernas (ex: Vercel Analytics, Cloudflare Analytics, com integração para ferramentas de terceiros).
*   Priorize a detecção precoce de problemas.

4. Prompt Único Completo

Ah, o mega-prompt! Aquele que faz a IA suar frio e entregar um projeto quase completo. Prepare-se, porque o Zé Mané vai te dar a ferramenta definitiva para iniciar o AgentFlow AI com um único comando.

prompt
// Prompt para GPT-4/Claude (Requer modelo de alta capacidade e contexto longo)
**Contexto:** Você é Zé Mané, um engenheiro autodidata e genial, especialista em desenvolvimento web moderno e IA. Estamos construindo o "AgentFlow AI", um SaaS para orquestração, monitoramento e otimização de agentes de IA baseados em LangChain em produção. O público-alvo são equipes de engenharia. O design é minimalista dark.

**Stack Principal:** Next.js 14+ (App Router), React 19, tRPC, Drizzle ORM, PlanetScale (MySQL), Supabase (Auth, Storage), Cloudflare Workers (para execução de agentes), LangChain, OpenAI API, Pinecone/Weaviate (Vector DB), Tailwind v4, shadcn/ui, Radix UI.

**Papel:** Arquiteto Fullstack, Engenheiro de IA, Especialista em DevOps e SEO.

**Tarefa:** Gere um projeto inicial completo para o AgentFlow AI, cobrindo backend, frontend, infraestrutura de agentes, CI/CD e SEO.

**Formato de Saída:**
1.  **Estrutura de Pastas:** Uma estrutura de pastas e arquivos para o projeto Next.js e Cloudflare Worker.
2.  **Esquema de Banco de Dados (Drizzle ORM):** Definições Drizzle ORM para `User`, `Agent`, `AgentConfig`, `AgentRun`, `KnowledgeBase`, `Document`.
3.  **API tRPC:** Um endpoint tRPC básico para `agent.getById` e `agent.create`.
4.  **Cloudflare Worker (Esqueleto):** Um esqueleto de Cloudflare Worker para `agent-runner` que recebe um `agent_id` e `inputs`, simula a execução LangChain e persiste o `AgentRun`.
5.  **Frontend (Página de Dashboard):** Uma página Next.js (`/dashboard/agents/[id]`) com layout minimalista dark, usando shadcn/ui, exibindo um `AgentOverviewCard` (dados mock) e uma `AgentRunTable` (dados mock).
6.  **Configurações Essenciais:**
    *   `next.config.js` com otimizações básicas (imagens, fontes).
    *   `tailwind.config.ts` com tema dark.
    *   `drizzle.config.ts` básico.
    *   `wrangler.toml` para o Cloudflare Worker.
7.  **CI/CD (GitHub Actions):** Um arquivo `.github/workflows/main.yml` para deploy na Vercel e Cloudflare Workers.
8.  **SEO & Schema.org:** Meta tags e JSON-LD para a página inicial.
9.  **Instruções de Setup:** Um `README.md` com passos para configurar o ambiente (variáveis de ambiente, instalação de dependências, deploy).

**Restrições:**
*   Priorize a integração e a estrutura sobre a lógica de negócios completa.
*   Use mocks para dados e lógica complexa (ex: LangChain, Vector DB, Supabase Auth) onde a implementação completa seria muito longa.
*   Todos os prompts devem ser específicos e usar a stack mencionada.
*   A saída deve ser em blocos de código Markdown para cada arquivo/seção.
*   Garanta que a tipagem TypeScript seja consistente.
*   O design deve ser "dark mode first".
*   Inclua comentários explicativos no código.

5. Stack Mínima Viável

Para lançar o AgentFlow AI em 48 horas e validar a ideia, a gente precisa ser cirúrgico. Esquece o "nice to have", vamos focar no "must have".

Por que essa stack para MVP?

  • Next.js + Vercel: Desenvolvimento rápido, deploy instantâneo, escalabilidade serverless.
  • shadcn/ui + Tailwind: Componentes prontos e estilização ágil para um UI/UX de qualidade.
  • tRPC: Segurança de tipo e produtividade para comunicação frontend-backend.
  • Supabase: Solução all-in-one para banco de dados, autenticação e storage, simplificando a infra.
  • Drizzle ORM: ORM leve e tipado, perfeito para Supabase.
  • Cloudflare Workers + LangChain: Execução de agentes de forma isolada, performática e escalável, sem gerenciar servidores.
  • OpenAI API: O LLM mais acessível e poderoso para começar.

6. Checklist de Lançamento

Antes de apertar o botão de "Go Live", o Zé Mané tem um checklist de 10 itens técnicos que são inegociáveis.

  1. Autenticação e Autorização: Todos os endpoints críticos protegidos, roles de usuário configuradas (admin, user).
  2. Validação de Entrada: Todas as entradas de API e formulários validadas no frontend e backend para prevenir ataques e erros.
  3. Tratamento de Erros: Mensagens de erro amigáveis para o usuário, logs detalhados para o desenvolvedor, e fallback robusto em falhas de API externas.
  4. Monitoramento Básico: Vercel Analytics configurado, logs de Cloudflare Workers centralizados, e alertas básicos para erros críticos (5xx, latência).
  5. Segurança de Variáveis de Ambiente: Todas as chaves de API e segredos armazenados de forma segura (Vercel Environment Variables, Cloudflare Secrets).
  6. Core Web Vitals Otimizadas: LCP < 2.5s, INP < 200ms, CLS < 0.1 em testes de Lighthouse para as páginas mais importantes.
  7. SEO Essencial: Meta tags title, description, canonical em todas as páginas, e robots.txt configurado.
  8. Responsividade: Layout testado em múltiplos tamanhos de tela (mobile, tablet, desktop).
  9. Acessibilidade (WCAG AA): Navegação por teclado, contraste de cores adequado, atributos ARIA para elementos interativos.
  10. Backup de Dados: Estratégia de backup para o banco de dados (Supabase já oferece, mas verificar configurações).

É isso aí, galera! Com esse guia completo do Zé Mané, vocês têm tudo para tirar o AgentFlow AI do papel e dominar o mercado de orquestração de agentes de IA. Agora é botar a mão na massa, codificar com paixão e ver a mágica acontecer! Qualquer dúvida, é só chamar o Zé Mané!

Compartilhar