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

Prompts Mestre: AgentFlow Studio – Orquestrando IA Multiagente Sem Código com Next.js e Supabase

(há 8 dias)
Prompts Mestre: AgentFlow Studio – Orquestrando IA Multiagente Sem Código com Next.js e Supabase

E aí, galera da web! Zé Mané na área, e hoje a gente vai desmistificar o futuro da IA com o AgentFlow Studio. Esquece essa balela de "IA é só para os gênios do código". Meu amigo, com essa parada aqui, até o seu cachorro vai conseguir orquestrar uma equipe de IAs para resolver problemas complexos. Chega de papo furado, vamos botar a mão na massa (ou melhor, nos prompts)!

🚀 O Projeto em 30 Segundos

O AgentFlow Studio é a plataforma no-code definitiva para PMEs e profissionais não-técnicos criarem, orquestrarem e monitorarem equipes de IA multiagente. Imagine um "Figma" para IAs: interface visual drag-and-drop para desenhar fluxos, configurar agentes (papéis, tarefas, ferramentas), integrar com APIs externas via conectores visuais, e depurar tudo em tempo real. A ideia é democratizar o poder de frameworks como CrewAI e LangGraph, transformando o inferno do código em um playground visual, com performance de ponta e ranqueamento garantido.

🏗️ Arquitetura Recomendada

Pra construir essa máquina, a gente vai de arquitetura moderna, escalável e com foco em Edge. Nada de gambiarra, só o filé!

Mermaid Error: Parse error on line 13: ... --> C SubGraph Monitoramento ----------------------^ Expecting 'SEMI', 'NEWLINE', 'EOF', 'AMP', 'START_LINK', 'LINK', 'LINK_ID', got 'NODE_STRING'

Show Code
graph TD
    A[Usuário Final] -->|Requisições HTTP| B(CDN/Vercel Edge)
    B --> C[Next.js 14+ / React 19]
    C -->|tRPC Calls| D(Vercel Edge Functions)
    D -->|Auth & DB Access| E[Supabase]
    E --> F(PostgreSQL via Drizzle ORM)
    D -->|AI Orchestration| G(Cloudflare Workers / Serverless Functions)
    G --> H(APIs de LLMs: OpenAI, Anthropic, Gemini)
    G --> I(APIs de Terceiros: CRM, ERP, Redes Sociais)
    C -->|Static Assets| J(Vercel Blob / S3)
    C -->|Real-time Updates| K(WebSockets via Supabase Realtime)
    L[Admin/Monitoramento] --> C
    SubGraph Monitoramento
        K --> M(Dashboard de Monitoramento)
        G --> M
    End
    SubGraph SEO/Performance
        B --> N(Lighthouse/PageSpeed)
        C --> O(Schema.org/JSON-LD)
    End

    style A fill:#f9f,stroke:#333,stroke-width:2px
    style B fill:#bbf,stroke:#333,stroke-width:2px
    style C fill:#ccf,stroke:#333,stroke-width:2px
    style D fill:#fcf,stroke:#333,stroke-width:2px
    style E fill:#ffc,stroke:#333,stroke-width:2px
    style F fill:#cfc,stroke:#333,stroke-width:2px
    style G fill:#fcc,stroke:#333,stroke-width:2px
    style H fill:#cff,stroke:#333,stroke-width:2px
    style I fill:#fcf,stroke:#333,stroke-width:2px
    style J fill:#f9f,stroke:#333,stroke-width:2px
    style K fill:#bfb,stroke:#333,stroke-width:2px
    style L fill:#f9f,stroke:#333,stroke-width:2px
    style M fill:#cff,stroke:#333,stroke-width:2px
    style N fill:#ccf,stroke:#333,stroke-width:2px
    style O fill:#ffc,stroke:#333,stroke-width:2px

📝 Prompts Mestre por Categoria

Aqui é onde a mágica acontece, meu caro! Prompts cirúrgicos para cada pedaço dessa máquina.

🏗️ Prompts de Arquitetura & Backend

Aqui a gente define a espinha dorsal: banco de dados, APIs e autenticação. Tudo no esquema serverless e tipado.

  1. Prompt para Drizzle ORM Schema & Supabase Setup

    prompt
    Você é um engenheiro de backend sênior especializado em Drizzle ORM e Supabase.
**Contexto:** Estamos construindo o AgentFlow Studio, uma plataforma no-code para orquestração de IA multiagente. Precisamos de um schema de banco de dados robusto para gerenciar usuários, workspaces, projetos (fluxos de agentes), agentes, tarefas, ferramentas, e logs de execução.
**Tarefa:**
1.  Crie o schema Drizzle ORM completo para PostgreSQL, incluindo as tabelas `users`, `workspaces`, `projects`, `agents`, `tasks`, `tools`, `integrations`, e `execution_logs`.
2.  Defina os campos essenciais para cada tabela, incluindo chaves primárias, chaves estrangeiras, tipos de dados (UUIDs para IDs, JSONB para configurações flexíveis, timestamps para created_at/updated_at).
3.  Inclua relacionamentos entre as tabelas (ex: `users` <-> `workspaces`, `workspaces` <-> `projects`, `projects` <-> `agents`).
4.  Forneça instruções claras para configurar o Supabase (criação de tabelas, RLS policies básicas para `users` e `workspaces`).
**Formato de Saída:** Código TypeScript para o schema Drizzle, seguido por um bloco de texto com as instruções Supabase.
**Restrições:** Use `pgTable` do Drizzle, UUIDs para IDs, e `jsonb` para campos de configuração complexos. Garanta que as políticas RLS iniciais protejam dados sensíveis por `user_id` e `workspace_id`.

  2. Prompt para tRPC API Definition (Backend)

    prompt
    Você é um arquiteto de APIs com expertise em tRPC e Next.js API Routes.
**Contexto:** O AgentFlow Studio precisa de uma API robusta e tipada para o frontend interagir com o backend (Supabase/Drizzle) e as funções de orquestração de IA.
**Tarefa:**
1.  Defina um `appRouter` tRPC inicial com as seguintes rotas:
    -   `auth`: `login`, `register`, `logout` (usando Supabase Auth).
    -   `workspaces`: `create`, `getById`, `list`, `update`, `delete`.
    -   `projects`: `create`, `getById`, `listByWorkspace`, `update`, `delete`, `duplicate`.
    -   `agents`: `create`, `getById`, `listByProject`, `update`, `delete`.
    -   `executions`: `startFlow`, `getExecutionStatus`, `getExecutionLogs`.
2.  Para cada rota, defina os `input` e `output` schemas usando Zod para validação.
3.  Implemente placeholders para a lógica de cada procedimento (ex: `ctx.db.insert(...)`, `ctx.supabase.auth.signInWithPassword(...)`).
**Formato de Saída:** Código TypeScript para o `_app.ts` do tRPC, incluindo o `appRouter` e os procedimentos definidos.
**Restrições:** Use Zod para validação. Garanta que as rotas de `executions` chamem funções assíncronas que serão implementadas como Edge Functions/Workers.

  3. Prompt para Função de Orquestração de Agentes (Cloudflare Worker)

    prompt
    Você é um engenheiro de sistemas distribuídos com foco em Cloudflare Workers e IA.
**Contexto:** O coração do AgentFlow Studio é a orquestração de equipes de IA. Precisamos de uma função serverless altamente escalável e de baixa latência para executar os fluxos de agentes definidos pelos usuários.
**Tarefa:**
1.  Crie um Cloudflare Worker (`agent-orchestrator.ts`) que recebe um `flowId` e `inputData` via POST request.
2.  O Worker deve:
    -   Autenticar a requisição (ex: via um token JWT passado no header).
    -   Buscar a configuração do fluxo de agentes (agentes, tarefas, ferramentas) do Supabase (via RPC ou HTTP call seguro).
    -   Simular a orquestração de agentes (ex: um agente `Planner` gera um plano, um agente `Researcher` executa uma pesquisa, um agente `Writer` gera um relatório).
    -   Registrar logs de execução no Supabase em tempo real (via Supabase Realtime ou HTTP call).
    -   Retornar o resultado final ou um ID de execução para monitoramento assíncrono.
**Formato de Saída:** Código TypeScript para o Cloudflare Worker.
**Restrições:** Simule a lógica de orquestração (não precisa implementar CrewAI/LangGraph completo, apenas a estrutura). Use `fetch` para interagir com Supabase e APIs de LLMs. Foco na estrutura do Worker e na passagem de dados.

🎨 Prompts de Frontend & Design

Aqui a gente dá vida à interface, com foco em experiência do usuário, acessibilidade e um visual minimalista dark, usando o que há de melhor em componentes.

  1. Prompt para Componente AgentFlowCanvas (Drag-and-Drop)

    prompt
    Você é um engenheiro de frontend com expertise em React 19, shadcn/ui e bibliotecas de drag-and-drop.
**Contexto:** O AgentFlow Studio precisa de um canvas interativo onde os usuários possam arrastar e soltar "nós" (agentes, tarefas, ferramentas) para construir seus fluxos multiagente.
**Tarefa:**
1.  Crie um componente React (`AgentFlowCanvas.tsx`) que utilize uma biblioteca de drag-and-drop (ex: `react-flow-renderer` ou similar) para criar um canvas.
2.  Defina três tipos de nós: `AgentNode`, `TaskNode`, `ToolNode`.
3.  Implemente a funcionalidade básica de arrastar e soltar nós de uma paleta lateral para o canvas.
4.  Permita a conexão entre nós (ex: um `AgentNode` pode ser conectado a um `TaskNode`, que pode usar um `ToolNode`).
5.  Estilize o canvas e os nós usando Tailwind v4 e shadcn/ui para um tema dark minimalista.
**Formato de Saída:** Código TypeScript/React para o componente, incluindo estilos Tailwind.
**Restrições:** O foco é na estrutura do canvas e na interação básica. Os nós devem ser visualmente distintos e ter inputs para edição de propriedades (placeholders).

  2. Prompt para Design System e Tema Dark (Tailwind v4 & shadcn/ui)

    prompt
    Você é um designer de UI/UX e engenheiro de frontend com profundo conhecimento em Tailwind v4, shadcn/ui e design systems.
**Contexto:** O AgentFlow Studio precisa de um design system coeso e um tema dark-first, minimalista e funcional.
**Tarefa:**
1.  Configure o `tailwind.config.ts` para incluir as cores primárias, secundárias, de fundo, texto e bordas para um tema dark. Use tons de cinza escuro, azuis sutis e acentos vibrantes para interatividade.
2.  Personalize os componentes shadcn/ui essenciais (Button, Input, Card, Dialog, Select) para se alinharem ao tema dark e ao estilo minimalista.
3.  Crie um arquivo `globals.css` com variáveis CSS customizadas (CSS custom properties) para cores e fontes, garantindo fácil manutenção e consistência.
4.  Defina uma tipografia expressiva mas legível (ex: uma fonte sans-serif moderna para títulos e outra para corpo de texto).
**Formato de Saída:** Arquivos `tailwind.config.ts`, `globals.css` e um snippet de um componente shadcn/ui customizado (ex: `Button.tsx`).
**Restrições:** Aderir estritamente ao tema dark-first. Evitar cores berrantes. Foco na legibilidade e no espaço negativo.

  3. Prompt para Componentes de Formulário Dinâmico (Configuração de Agentes)

    prompt
    Você é um desenvolvedor React experiente em construção de formulários dinâmicos e acessíveis.
**Contexto:** Os usuários precisam configurar seus agentes com papéis, objetivos, ferramentas e modelos de LLM. Isso requer formulários dinâmicos, onde a seleção de uma ferramenta pode revelar campos adicionais.
**Tarefa:**
1.  Crie um componente React (`AgentConfigurationForm.tsx`) que receba um objeto `agentConfig` como prop e renderize um formulário.
2.  Use `react-hook-form` e Zod para validação e gerenciamento de estado do formulário.
3.  Inclua campos para: `name`, `role`, `goal`, `backstory` (textarea), `llmModel` (select), `tools` (multi-select).
4.  Implemente lógica condicional: se uma ferramenta específica for selecionada, revele campos adicionais relacionados a essa ferramenta (ex: para uma ferramenta "Web Search", um campo "search_depth").
5.  Utilize componentes shadcn/ui para todos os inputs e selects.
**Formato de Saída:** Código TypeScript/React para o componente de formulário.
**Restrições:** Garantir acessibilidade (rótulos, mensagens de erro). O formulário deve ser responsivo e se integrar ao tema dark.

🔍 Prompts de SEO & Schema.org

Não adianta ter a melhor ferramenta se ninguém encontra. Aqui a gente garante que o Google ame o AgentFlow Studio.

  1. Prompt para Meta Tags e Estratégia de Conteúdo (Next.js)

    prompt
    Você é um especialista em SEO técnico e marketing de conteúdo para SaaS.
**Contexto:** O AgentFlow Studio é uma plataforma SaaS inovadora. Precisamos otimizar as páginas principais (Home, Features, Pricing, Blog) para ranquear bem nos termos de busca relevantes.
**Tarefa:**
1.  Defina as meta tags (`title`, `description`, `og:title`, `og:description`, `og:image`, `twitter:card`) para a página inicial do AgentFlow Studio.
2.  Sugira 5 palavras-chave primárias e 10 secundárias para as páginas principais, focando em intenção de busca de PMEs e profissionais não-técnicos.
3.  Crie um snippet de código Next.js (`<head>` component) para implementar essas meta tags dinamicamente.
4.  Proponha 3 tópicos de blog que demonstrem E-E-A-T e topical authority para "IA multiagente sem código" e "automação de processos com IA para PMEs".
**Formato de Saída:** Tabela de palavras-chave, código React para meta tags, e lista de tópicos de blog.
**Restrições:** Foco em termos de cauda longa e intenção de busca comercial. As meta tags devem ser concisas e persuasivas.

  2. Prompt para Schema.org (JSON-LD) para SaaS e Produto

    prompt
    Você é um expert em dados estruturados e Schema.org.
**Contexto:** Para o AgentFlow Studio, precisamos fornecer ao Google informações ricas e estruturadas sobre o nosso produto SaaS e a organização.
**Tarefa:**
1.  Crie um JSON-LD para o tipo `SoftwareApplication` que represente o AgentFlow Studio. Inclua propriedades como `name`, `description`, `applicationCategory`, `operatingSystem`, `offers` (com `price`, `priceCurrency`, `availability`), `aggregateRating` (placeholder), `screenshot`, `featureList`.
2.  Crie um JSON-LD para o tipo `Organization` representando a empresa por trás do AgentFlow Studio, com `name`, `url`, `logo`, `sameAs` (redes sociais).
3.  Forneça um exemplo de como integrar esses JSON-LDs em uma página Next.js.
**Formato de Saída:** Dois blocos de código JSON-LD, seguidos por um snippet React.
**Restrições:** Use as propriedades mais relevantes para um SaaS. Garanta que o JSON-LD seja válido e otimizado para rich snippets.

  3. Prompt para Sitemap XML e Robots.txt Otimizados

    prompt
    Você é um especialista em rastreamento e indexação de sites.
**Contexto:** O AgentFlow Studio terá páginas dinâmicas (projetos, workspaces) e estáticas (marketing, blog). Precisamos de um sitemap e robots.txt que garantam a correta indexação.
**Tarefa:**
1.  Gere um `sitemap.xml` que inclua:
    -   Páginas estáticas (Home, Features, Pricing, About, Contact).
    -   Páginas de blog (ex: `/blog/post-1`).
    -   Um exemplo de como incluir URLs dinâmicas (ex: `/workspace/[id]/project/[id]`) com `lastmod` e `changefreq` apropriados (mesmo que estas sejam `noindex` para usuários não logados).
2.  Crie um `robots.txt` que permita o rastreamento geral, mas disallow certas áreas (ex: `/dashboard`, `/admin`, `/api`).
3.  Forneça um snippet de código Next.js para gerar o sitemap dinamicamente (para URLs de blog, por exemplo).
**Formato de Saída:** Código XML para sitemap, código de texto para robots.txt, e snippet React/Node.js para geração dinâmica.
**Restrições:** O sitemap deve ser bem estruturado. O robots.txt deve proteger áreas sensíveis sem bloquear conteúdo público importante.

⚡ Prompts de Performance & Core Web Vitals

Performance não é luxo, é obrigação! Vamos garantir que o AgentFlow Studio seja um foguete.

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

    prompt
    Você é um ninja de performance web, mestre em Core Web Vitals.
**Contexto:** O AgentFlow Studio, apesar de minimalista, terá algumas imagens (ilustrações, logos) e fontes customizadas. Precisamos otimizar tudo para LCP e CLS.
**Tarefa:**
1.  Crie um exemplo de uso do componente `next/image` para uma imagem hero na página inicial, garantindo `priority`, `fill` ou `width/height` e `alt` text.
2.  Descreva a estratégia para otimização de fontes: pré-carregamento (`<link rel="preload">`), `font-display: swap`, e subsetting (ex: com `next/font`).
3.  Forneça um snippet de código CSS para garantir que as fontes sejam carregadas de forma otimizada, evitando CLS.
**Formato de Saída:** Snippet React para `next/image`, instruções para fontes, e snippet CSS.
**Restrições:** Priorizar WebP/AVIF. Assegurar que o CLS seja zero ou mínimo para fontes e imagens.

  2. Prompt para Estratégia de Lazy Loading e Bundle Splitting (Next.js)

    prompt
    Você é um especialista em otimização de carregamento de recursos.
**Contexto:** O AgentFlow Studio terá um canvas complexo e muitas dependências. Precisamos de lazy loading e bundle splitting para reduzir o tamanho inicial do bundle e melhorar o LCP.
**Tarefa:**
1.  Identifique componentes candidatos para lazy loading (ex: o `AgentFlowCanvas`, modais de configuração, componentes de gráficos de monitoramento).
2.  Forneça um exemplo de como implementar lazy loading para um componente React usando `React.lazy` e `Suspense` em Next.js.
3.  Descreva como o Next.js lida com bundle splitting automaticamente e sugira como podemos otimizar ainda mais (ex: importações dinâmicas em rotas).
**Formato de Saída:** Explicação da estratégia, e snippet React para lazy loading.
**Restrições:** Foco em otimização de carregamento inicial. Explicar como essas técnicas impactam o LCP.

  3. Prompt para Critical CSS e Edge Caching com Vercel

    prompt
    Você é um arquiteto de performance focado em Edge Computing.
**Contexto:** Para o AgentFlow Studio, precisamos que o CSS essencial seja carregado o mais rápido possível e que os recursos sejam cacheados na edge para máxima velocidade.
**Tarefa:**
1.  Explique o conceito de Critical CSS e como o Tailwind JIT (ou PostCSS) ajuda a gerar apenas o CSS necessário para cada página.
2.  Descreva como configurar o Vercel para cachear recursos estáticos (CSS, JS, imagens) na CDN de forma agressiva.
3.  Forneça um exemplo de `vercel.json` para configurar headers de cache (`Cache-Control`) para diferentes tipos de assets.
**Formato de Saída:** Explicação técnica, e snippet de `vercel.json`.
**Restrições:** Foco em Next.js/Tailwind e Vercel. A estratégia deve visar TTFB e LCP baixos.

🚀 Prompts de Deploy & DevOps

Deploy é arte, não acidente! Vamos garantir que o AgentFlow Studio esteja sempre no ar, performático e seguro.

  1. Prompt para CI/CD com Vercel e GitHub Actions

    prompt
    Você é um engenheiro de DevOps especializado em CI/CD para Next.js e Vercel.
**Contexto:** O AgentFlow Studio precisa de um pipeline de CI/CD automatizado para garantir que cada commit no `main` branch seja testado, construído e deployado para produção, e cada PR tenha um preview deploy.
**Tarefa:**
1.  Crie um arquivo `.github/workflows/main.yml` para GitHub Actions.
2.  O workflow deve:
    -   Rodar testes unitários e de integração (`npm test`).
    -   Construir o projeto Next.js (`npm run build`).
    -   Deployar para Vercel para cada push no `main` (produção).
    -   Criar um preview deploy para cada Pull Request.
3.  Inclua as variáveis de ambiente necessárias para o Vercel (ex: `VERCEL_ORG_ID`, `VERCEL_PROJECT_ID`, `SUPABASE_URL`, `SUPABASE_ANON_KEY`).
**Formato de Saída:** Código YAML para o GitHub Actions workflow.
**Restrições:** Use as ações oficiais do Vercel e Node.js. O pipeline deve ser eficiente e robusto.

  2. Prompt para Monitoramento de Erros e Performance (Sentry/Vercel Analytics)

    prompt
    Você é um especialista em observabilidade e monitoramento de aplicações.
**Contexto:** Precisamos monitorar proativamente erros no frontend e backend do AgentFlow Studio, além de acompanhar as Core Web Vitals e a performance geral.
**Tarefa:**
1.  Descreva como integrar Sentry para monitoramento de erros em um projeto Next.js (frontend e API Routes). Inclua um snippet de código para inicialização do Sentry.
2.  Explique como usar o Vercel Analytics e Web Analytics para monitorar Core Web Vitals e tráfego.
3.  Sugira métricas chave para monitorar a saúde dos Cloudflare Workers (ex: latência, erros, invocações).
**Formato de Saída:** Explicação técnica, snippet de código Sentry, e lista de métricas.
**Restrições:** Foco em soluções que se integram bem com a stack (Next.js, Vercel, Cloudflare).

  3. Prompt para Configuração de Variáveis de Ambiente Seguras

    prompt
    Você é um engenheiro de segurança com foco em práticas de variáveis de ambiente.
**Contexto:** O AgentFlow Studio terá chaves de API sensíveis (Supabase, LLMs, serviços de terceiros). Precisamos gerenciá-las de forma segura em desenvolvimento e produção.
**Tarefa:**
1.  Explique a diferença entre `.env.local`, `.env.development`, `.env.production` e como o Next.js os carrega.
2.  Descreva como configurar variáveis de ambiente seguras no Vercel UI e via Vercel CLI, e como elas são acessadas em Edge Functions.
3.  Forneça um exemplo de como acessar uma variável de ambiente no lado do cliente (com prefixo `NEXT_PUBLIC_`) e no lado do servidor/Edge Function.
**Formato de Saída:** Explicação conceitual, e snippets de código para acesso a variáveis.
**Restrições:** Enfatizar a nunca commitar arquivos `.env` sensíveis.

🌟 Prompt Único Completo

Se você é corajoso (ou preguiçoso o suficiente para não copiar e colar), aqui está o mega-prompt para gerar o projeto inteiro. Prepare-se para a magia!

prompt
Você é o Zé Mané, um engenheiro de software full-stack irreverente e genial, especializado em Next.js 14+, React 19, Tailwind v4, shadcn/ui, Drizzle ORM, Supabase, Vercel Edge Functions, Cloudflare Workers, tRPC, e SEO técnico avançado. Seu objetivo é construir o "AgentFlow Studio", uma plataforma no-code para orquestração de equipes de IA multiagente para PMEs.

**Contexto Geral do Projeto:**
-   **Nome:** AgentFlow Studio
-   **Problema Resolvido:** Democratiza a criação e orquestração de equipes de IA multiagente para PMEs sem necessidade de código, transformando frameworks complexos em uma interface visual intuitiva.
-   **Público-alvo:** PMEs, agências, consultorias e profissionais não-técnicos.
-   **Estilo de Design:** Minimalista dark-first.
-   **Features Core:**
    1.  Interface visual 'drag-and-drop' para design de fluxos multiagente.
    2.  Configuração de papéis, tarefas e ferramentas para agentes de IA sem código.
    3.  Monitoramento e depuração em tempo real de fluxos de agentes.
    4.  Integração com APIs de terceiros (CRM, ERP, redes sociais) via conectores visuais.
    5.  Biblioteca de templates de fluxos multiagente pré-construídos.
    6.  Gerenciamento de versões e histórico de fluxos de agentes.

**Tarefa:**
Gere um esqueleto de projeto completo para o AgentFlow Studio, seguindo as especificações abaixo.

**Estrutura de Saída Detalhada:**

1.  **Estrutura de Pastas e Arquivos:**
    -   `./src/app/` (Next.js App Router)
    -   `./src/components/ui/` (shadcn/ui customizados)
    -   `./src/components/` (componentes customizados como `AgentFlowCanvas`, `AgentConfigurationForm`)
    -   `./src/server/` (tRPC router, Drizzle schema, Supabase client)
    -   `./src/lib/` (utilitários, helpers)
    -   `./src/styles/globals.css`
    -   `./src/workers/agent-orchestrator.ts` (Cloudflare Worker)
    -   `./public/` (imagens, favicon)
    -   `./tailwind.config.ts`
    -   `./drizzle.config.ts`
    -   `./.env.example`
    -   `./.github/workflows/main.yml`
    -   `./robots.txt`
    -   `./sitemap.xml` (ou script para gerar)
    -   `./vercel.json`

2.  **Conteúdo de Arquivos Específicos:**

    *   **`./src/server/db/schema.ts`**: Drizzle ORM schema completo para PostgreSQL (`users`, `workspaces`, `projects`, `agents`, `tasks`, `tools`, `integrations`, `execution_logs`). Inclua UUIDs, JSONB e relacionamentos.
    *   **`./src/server/trpc/router.ts`**: `appRouter` tRPC com rotas para `auth`, `workspaces`, `projects`, `agents`, `executions`. Use Zod para validação.
    *   **`./src/components/AgentFlowCanvas.tsx`**: Componente React para o canvas drag-and-drop de fluxos de agentes (simule com `react-flow-renderer` ou similar). Inclua `AgentNode`, `TaskNode`, `ToolNode`. Estilo Tailwind/shadcn dark.
    *   **`./src/components/AgentConfigurationForm.tsx`**: Componente React de formulário dinâmico para configurar agentes (nome, papel, objetivo, LLM, ferramentas). Use `react-hook-form` e Zod. Estilo Tailwind/shadcn dark.
    *   **`./src/app/layout.tsx`**: Layout principal com meta tags otimizadas para SEO (title, description, og:image, etc.), JSON-LD para `SoftwareApplication` e `Organization`.
    *   **`./src/styles/globals.css`**: Configuração inicial de Tailwind e CSS custom properties para o tema dark-first.
    *   **`./tailwind.config.ts`**: Configuração completa do Tailwind v4 com paleta de cores dark, fontes e customizações de shadcn/ui.
    *   **`./src/workers/agent-orchestrator.ts`**: Esqueleto de Cloudflare Worker para orquestração de agentes.
    *   **`./.github/workflows/main.yml`**: GitHub Actions para CI/CD (testes, build, deploy Vercel).
    *   **`./robots.txt`**: Arquivo `robots.txt` otimizado.
    *   **`./vercel.json`**: Configuração Vercel com headers de cache.
    *   **`./.env.example`**: Exemplo de variáveis de ambiente necessárias.

**Restrições e Qualidade:**
-   **Código:** TypeScript, moderno, limpo, modular.
-   **Design:** Minimalista, dark-first, responsivo, usando Tailwind v4 e shadcn/ui.
-   **Performance:** Otimizado para Core Web Vitals (LCP, FID/INP, CLS) com lazy loading, otimização de imagens/fontes, critical CSS.
-   **SEO:** Meta tags, JSON-LD, sitemap, robots.txt otimizados.
-   **Segurança:** Variáveis de ambiente seguras, RLS no Supabase.
-   **Explicações:** Inclua comentários relevantes no código e pequenas notas explicativas onde necessário.
-   **Tamanho:** Geração completa de todos os arquivos solicitados, com conteúdo funcional (mesmo que com placeholders para lógica complexa).

🛠️ Stack Mínima Viável (MVP em 48h)

Pra lançar essa belezinha rapidão e validar a ideia, a gente foca no essencial. Sem firula, só o que realmente importa.

  • Frontend Framework: Next.js 14+ (com App Router)
  • UI Library: shadcn/ui (com Tailwind CSS v4)
  • Database & Auth: Supabase (PostgreSQL + Auth)
  • ORM: Drizzle ORM (para tipagem e consultas ao Supabase)
  • API Layer: tRPC (para comunicação tipada entre frontend e backend)
  • Hosting & Edge Functions: Vercel
  • Orquestração de IA (Mock): Funções serverless mockadas em Vercel Edge Functions ou Cloudflare Workers.

✅ Checklist de Lançamento (Zé Mané Approved!)

Antes de apertar o botão "Go Live", passa o pente fino nessa lista. Não quero ver ninguém passando vergonha!

  1. Core Web Vitals Verificadas: LCP < 2.5s, FID/INP < 100ms, CLS < 0.1 (Lighthouse/PageSpeed Insights).
  2. Meta Tags e Schema.org Implementados: Todas as páginas principais com title, description, og:image e JSON-LD de SoftwareApplication/Organization.
  3. Sitemap XML e Robots.txt Válidos: Submetidos ao Google Search Console.
  4. Otimização de Imagens e Fontes: Todas as imagens em WebP/AVIF, next/image usado corretamente, fontes pré-carregadas e com font-display: swap.
  5. Acessibilidade (WCAG 2.2): Navegação por teclado, rótulos ARIA, contraste de cores (especialmente no tema dark).
  6. Autenticação Segura: RLS no Supabase configurado, JWTs protegidos, variáveis de ambiente seguras.
  7. Testes de Ponta a Ponta: Cypress ou Playwright para garantir que os fluxos críticos funcionam.
  8. Monitoramento Ativo: Sentry para erros, Vercel Analytics para CWV e tráfego, logs de orquestração.
  9. Responsividade Completa: Testado em diferentes tamanhos de tela (mobile, tablet, desktop).
  10. Política de Privacidade e Termos de Uso: Páginas legais claras e acessíveis.

É isso aí, meu povo! Com essa bíblia de prompts e o meu guia, o AgentFlow Studio vai ser um sucesso estrondoso. Agora vai lá e bota pra rodar! Zé Mané, vazando!

Compartilhar