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

Prompts Mestre: AgentFlow Studio - Orquestração No-Code de IAs Multi-Agente com Next.js e Supabase

(há 8 dias)
Prompts Mestre: AgentFlow Studio - Orquestração No-Code de IAs Multi-Agente com Next.js e Supabase

E aí, galera da web! Zé Mané na área, pronto pra desmistificar mais um projeto que vai virar o jogo. Hoje, a gente vai pegar a visão do CEO Alfredo sobre o "AgentFlow Studio" e transformar essa ideia genial em um conjunto de prompts tão cirúrgicos que até a sua avó consegue codar (se ela tiver um bom LLM, claro).

O Alfredo mandou a real: a IA multi-agente é o futuro, mas a complexidade técnica tá barrando a galera. Ele quer democratizar isso. E o Zé Mané aqui vai mostrar como a gente constrói essa parada com o que há de mais moderno e performático, sem perder o fio da meada.

Preparem-se, porque o papo vai ser reto e os prompts, afiados!

O Projeto em 30 Segundos

O AgentFlow Studio é uma plataforma SaaS no-code que capacita usuários não-desenvolvedores a orquestrar IAs multi-agente de forma visual e intuitiva. Ele transforma a complexidade de frameworks como CrewAI em um editor drag-and-drop, permitindo a criação, gerenciamento e execução de "crews" de IA para automatizar processos complexos em diversas áreas de negócio. A arquitetura é baseada em Next.js 14+ com Edge Functions na Vercel, Supabase para persistência e autenticação, tRPC para tipagem end-to-end, Drizzle ORM para acesso a dados, e Tailwind CSS v4 com shadcn/ui para uma experiência de usuário minimalista e performática. O objetivo é um MVP com foco em performance (Core Web Vitals) e SEO técnico avançado, pronto para escalar e monetizar via Stripe.

Arquitetura Recomendada

A arquitetura do AgentFlow Studio será um sistema moderno, serverless-first, focado em performance, escalabilidade e uma DX (Developer Experience) impecável.

Mermaid Error: Parse error on line 4: ... C -->|API Calls (tRPC)| D(Vercel Edg -----------------------^ 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] -->|Acessa via Browser| B(Next.js 14+ Frontend)
    B -->|SSR/ISR/CSR| C(Vercel Edge Network)
    C -->|API Calls (tRPC)| D(Vercel Edge Functions)
    D -->|Auth, DB, Storage| E(Supabase)
    E -- Drizzle ORM --> F(PostgreSQL Database)
    D -->|AI Model Integrations| G(OpenAI, Anthropic, Google AI APIs)
    D -->|Payments| H(Stripe API)
    E -->|Object Storage| I(Supabase Storage)

    subgraph Frontend Stack
        B -- Tailwind CSS v4 --> J(shadcn/ui Components)
        B -- React 19 --> K(Visual Editor Drag-and-Drop)
    end

    subgraph Backend Stack (Edge Functions)
        D -- tRPC --> L(Type-safe API Endpoints)
        D -- Drizzle ORM --> M(Database Queries)
    end

    subgraph Data & Auth
        E -- Supabase Auth --> N(User Management)
        E -- Supabase Realtime --> O(Live Updates)
    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:#bfb,stroke:#333,stroke-width:2px
    style F fill:#fbb,stroke:#333,stroke-width:2px
    style G fill:#ffb,stroke:#333,stroke-width:2px
    style H fill:#fbc,stroke:#333,stroke-width:2px
    style I fill:#fbf,stroke:#333,stroke-width:2px
    style J fill:#ddf,stroke:#333,stroke-width:1px
    style K fill:#eef,stroke:#333,stroke-width:1px
    style L fill:#fdf,stroke:#333,stroke-width:1px
    style M fill:#fef,stroke:#333,stroke-width:1px
    style N fill:#cec,stroke:#333,stroke-width:1px
    style O fill:#efe,stroke:#333,stroke-width:1px

Prompts Mestre por Categoria

Aqui é onde a mágica acontece. Cada prompt é uma instrução precisa para o seu LLM favorito, transformando a complexidade em código funcional.

🏗️ Prompts de Arquitetura & Backend

Foco na estrutura de dados, APIs tipadas e autenticação robusta.

Prompt 1: Esquema do Banco de Dados (Drizzle ORM & Supabase)

prompt
Você é um arquiteto de banco de dados expert em Drizzle ORM e Supabase.
**Contexto:** Estamos construindo o AgentFlow Studio, uma plataforma SaaS no-code para orquestração de IAs multi-agente.
**Tarefa:** Crie um esquema de banco de dados completo usando Drizzle ORM para PostgreSQL, que suporte as seguintes entidades e seus relacionamentos:
1.  **Usuários (Users):** Integrado com Supabase Auth. Deve ter ID (UUID), email, nome, avatar_url, stripe_customer_id, subscription_status (enum: FREE, PRO, ENTERPRISE).
2.  **Agentes (Agents):** Definem as capacidades de uma IA (ex: "Pesquisador", "Redator"). Deve ter ID (UUID), user_id (FK para Users), nome, descrição, role (texto livre), goals (array de strings), backstory (texto livre), tools (array de strings, ex: "web_search", "file_reader").
3.  **Tarefas (Tasks):** Representam uma ação específica a ser executada por um agente. Deve ter ID (UUID), user_id (FK para Users), nome, descrição, agent_id (FK para Agents, opcional, se a tarefa for atribuída a um agente específico), expected_output (texto livre), async_execution (boolean), human_input (boolean).
4.  **Crews (Crews):** A orquestração de múltiplos agentes e tarefas. Deve ter ID (UUID), user_id (FK para Users), nome, descrição, manager_llm (string, ex: "gpt-4o"), process_type (enum: SEQUENTIAL, HIERARCHICAL), verbose (boolean), max_rpm (integer, opcional).
5.  **CrewAgents (Tabela de Junção):** Relaciona Crews com Agents (muitos para muitos). Deve ter crew_id (FK para Crews), agent_id (FK para Agents).
6.  **CrewTasks (Tabela de Junção):** Relaciona Crews com Tasks (muitos para muitos). Deve ter crew_id (FK para Crews), task_id (FK para Tasks), order (integer para sequenciamento).
7.  **Execuções (Executions):** Registra cada vez que uma crew é executada. Deve ter ID (UUID), crew_id (FK para Crews), user_id (FK para Users), status (enum: PENDING, RUNNING, COMPLETED, FAILED), start_time, end_time, input_data (JSONB), output_data (JSONB), logs (JSONB).

**Formato de Saída:** Código TypeScript para `schema.ts` usando Drizzle ORM, incluindo a configuração de `pgTable` e `relations`. Adicione comentários explicando cada tabela e relacionamento.

```typescript
// Exemplo de como Drizzle ORM define tabelas
import { pgTable, uuid, text, timestamp, boolean, jsonb, pgEnum, integer } from 'drizzle-orm/pg-core';
import { relations } from 'drizzle-orm';

// ... seu código aqui


#### Prompt 2: API tRPC para Gerenciamento de Crews

```prompt
Você é um engenheiro de backend expert em Next.js 14+, tRPC, Drizzle ORM e Supabase.
**Contexto:** Com base no esquema de banco de dados Drizzle ORM fornecido (assuma que `schema.ts` está disponível), precisamos de endpoints para gerenciar as "Crews".
**Tarefa:** Crie um módulo tRPC (`crew.ts` dentro de `/server/api/routers`) que forneça os seguintes procedimentos:
1.  **`createCrew`:** Cria uma nova crew. Recebe `name`, `description`, `manager_llm`, `process_type`, `verbose`, `max_rpm` (opcional). Retorna a crew criada.
2.  **`getCrewById`:** Busca uma crew por ID. Retorna a crew e seus agentes e tarefas relacionados.
3.  **`getAllCrews`:** Lista todas as crews do usuário autenticado. Retorna um array de crews.
4.  **`updateCrew`:** Atualiza uma crew existente. Recebe `id` e os campos a serem atualizados. Retorna a crew atualizada.
5.  **`deleteCrew`:** Deleta uma crew por ID. Retorna um status de sucesso.
6.  **`addAgentToCrew`:** Adiciona um agente existente a uma crew. Recebe `crewId` e `agentId`.
7.  **`removeAgentFromCrew`:** Remove um agente de uma crew. Recebe `crewId` e `agentId`.
8.  **`addTaskToCrew`:** Adiciona uma tarefa existente a uma crew. Recebe `crewId`, `taskId` e `order`.
9.  **`removeTaskFromCrew`:** Remove uma tarefa de uma crew. Recebe `crewId` e `taskId`.

**Restrições:**
-   Use `zod` para validação de input.
-   Garanta que todas as operações sejam autorizadas (o `ctx.session.user.id` deve ser usado para filtrar dados por usuário).
-   Utilize o Drizzle ORM para todas as interações com o banco de dados.
-   Inclua a tipagem end-to-end do tRPC.
-   Assuma que `drizzle.ts` (com a instância do Drizzle) e `trpc.ts` (com o `router` e `publicProcedure`/`protectedProcedure`) já estão configurados.

**Formato de Saída:** Código TypeScript completo para o arquivo `crew.ts`, incluindo imports, schemas Zod e a implementação dos procedimentos tRPC.

```typescript
// Exemplo de estrutura tRPC
import { z } from 'zod';
import { protectedProcedure, publicProcedure, router } from '../trpc';
import { db } from '../../drizzle';
import { crews, agents, crewAgents, tasks, crewTasks, users } from '../../schema';
import { eq, and } from 'drizzle-orm';

export const crewRouter = router({
    // ... seus procedimentos aqui
});


#### Prompt 3: Integração de Autenticação Supabase

```prompt
Você é um desenvolvedor full-stack expert em Next.js 14+ e Supabase.
**Contexto:** O AgentFlow Studio precisa de um sistema de autenticação robusto e seguro.
**Tarefa:** Implemente a autenticação de usuário no Next.js usando o Supabase.
1.  **Configuração do Cliente Supabase:** Crie um utilitário para inicializar o cliente Supabase no lado do cliente e no lado do servidor/Edge Functions.
2.  **Página de Login/Registro:** Crie uma página (`/login`) que permita aos usuários fazer login e registrar-se usando email/senha e provedores sociais (Google, GitHub). Use componentes `shadcn/ui` para o formulário.
3.  **Proteção de Rotas:** Implemente um middleware ou um HOC/hook para proteger rotas no lado do cliente e do servidor, redirecionando usuários não autenticados para a página de login.
4.  **Sessão de Usuário:** Crie um hook (`useUser`) para acessar a sessão do usuário e os dados do perfil em qualquer componente do lado do cliente.
5.  **Botão de Logout:** Adicione um botão de logout que encerre a sessão do Supabase.

**Restrições:**
-   Use `next/navigation` para redirecionamentos.
-   Utilize `shadcn/ui` para os componentes visuais (Button, Input, Label, Card).
-   A página de login deve ter um design minimalista dark.
-   O código deve ser modular e reutilizável.

**Formato de Saída:** Snippets de código TypeScript para:
-   `supabase/client.ts`
-   `supabase/server.ts`
-   `app/login/page.tsx`
-   `middleware.ts` (para proteção de rotas)
-   `hooks/useUser.ts`
-   Um componente `AuthButton.tsx` (para login/logout).

🎨 Prompts de Frontend & Design

Foco na experiência do usuário, componentes reutilizáveis e um design minimalista dark.

Prompt 1: Componente de Editor Visual Drag-and-Drop (Crew Builder)

prompt
Você é um engenheiro de frontend expert em React 19, Next.js 14+, Tailwind CSS v4, shadcn/ui e bibliotecas de drag-and-drop.
**Contexto:** O coração do AgentFlow Studio é um editor visual para construir "Crews" de IA.
**Tarefa:** Crie um componente React (`CrewBuilder.tsx`) para um editor visual drag-and-drop que permita ao usuário:
1.  **Arrastar e Soltar Agentes e Tarefas:** Uma barra lateral (sidebar) deve listar "Agentes Disponíveis" e "Tarefas Disponíveis". O usuário deve poder arrastar esses itens para uma área de canvas principal.
2.  **Conectar Agentes e Tarefas:** No canvas, o usuário deve poder desenhar linhas de conexão entre tarefas para definir o fluxo (sequência de execução).
3.  **Configurar Itens:** Ao clicar em um Agente ou Tarefa no canvas, um painel lateral (inspector) deve aparecer com formulários para editar suas propriedades (nome, descrição, etc.).
4.  **Visualização Minimalista Dark:** O design deve ser minimalista, dark mode first, usando `shadcn/ui` para os componentes básicos (Card, Button, Input, Select) e Tailwind CSS v4 para estilização.
5.  **Exemplo de Dados:** Use dados mockados para Agentes e Tarefas para demonstrar a funcionalidade.

**Restrições:**
-   Utilize uma biblioteca de drag-and-drop de sua escolha (ex: `react-dnd`, `react-flow-renderer` ou similar que suporte nós e arestas). Se for `react-flow-renderer`, foque na integração com shadcn/ui.
-   O canvas deve ser responsivo.
-   A sidebar e o inspector devem ser componentes `shadcn/ui` (ex: Sheet, Dialog).
-   Use `useState` e `useCallback` para gerenciar o estado e otimizar renderizações.

**Formato de Saída:** Código TypeScript completo para `CrewBuilder.tsx`, incluindo imports, componentes aninhados (Sidebar, Canvas, Inspector) e lógica de estado. Inclua um exemplo de `page.tsx` para demonstrar o uso.

Prompt 2: Design System com Tailwind CSS v4 e shadcn/ui

prompt
Você é um designer de frontend e desenvolvedor expert em design systems, Tailwind CSS v4 e shadcn/ui.
**Contexto:** O AgentFlow Studio precisa de uma identidade visual coesa e minimalista, com foco em dark mode.
**Tarefa:** Crie a configuração inicial de um design system para o AgentFlow Studio.
1.  **Configuração do Tailwind CSS v4:** Configure o `tailwind.config.ts` com uma paleta de cores dark mode first (primária, secundária, fundo, texto, acento), fontes personalizadas (ex: Inter para texto, Mono para código) e espaçamentos.
2.  **Componentes shadcn/ui:** Adapte os componentes `shadcn/ui` para usar as variáveis de CSS custom properties definidas no Tailwind, garantindo que o dark mode seja o padrão e que as cores se integrem perfeitamente.
3.  **Variáveis CSS Globais:** Crie um arquivo CSS global (`globals.css`) que defina as custom properties para cores, fontes e outros tokens de design que serão consumidos pelo Tailwind e shadcn/ui.
4.  **Exemplo de Componente:** Crie um componente `Button` customizado que demonstre a aplicação das novas cores e tipografia, com variações (primary, secondary, ghost, destructive) e estados (hover, active).

**Restrições:**
-   O design deve ser "dark mode first" e minimalista.
-   Priorize a legibilidade e o contraste.
-   Use as convenções de nomeação de cores do Tailwind (ex: `primary-500`, `gray-800`).
-   Garanta que a transição de cores seja suave se houver um toggle de tema (mas o foco é dark mode padrão).

**Formato de Saída:**
-   `tailwind.config.ts`
-   `app/globals.css`
-   `components/ui/button.tsx` (modificado ou novo, demonstrando o design system)
-   Explicação sobre como as cores e fontes se integram.

Prompt 3: Micro-interações e Motion Design com Framer Motion

prompt
Você é um especialista em UX/UI e motion design, com experiência em React e Framer Motion.
**Contexto:** Para elevar a experiência do usuário do AgentFlow Studio, precisamos de micro-interações e transições suaves.
**Tarefa:** Adicione micro-interações e motion design a elementos chave da UI, usando Framer Motion.
1.  **Animação de Entrada de Página:** Uma transição sutil de fade-in e slide-up para o conteúdo principal de uma página ao carregar.
2.  **Hover em Cards:** Animação de escala e sombra ao passar o mouse sobre os cards de Agentes e Crews.
3.  **Feedback de Botão:** Animação de "press" (escala para baixo e volta) ao clicar em botões importantes.
4.  **Notificações/Toasts:** Animação de entrada e saída para notificações (ex: sucesso ao salvar uma crew).

**Restrições:**
-   As animações devem ser sutis, rápidas e não intrusivas.
-   Use `framer-motion` para todas as animações.
-   Integre-se com os componentes `shadcn/ui` existentes.
-   O código deve ser modular, preferencialmente encapsulado em componentes ou hooks reutilizáveis.

**Formato de Saída:** Snippets de código TypeScript para:
-   Um componente `PageTransition.tsx` (ou HOC).
-   Modificações em um componente `Card` (ex: `CrewCard.tsx`).
-   Modificações em um componente `Button` (se necessário, ou um wrapper).
-   Um exemplo de componente `Toast` com animações.

🔍 Prompts de SEO & Schema.org

Foco na visibilidade do Google, rich snippets e autoridade semântica.

Prompt 1: Otimização de Meta Tags e Open Graph para Next.js 14+

prompt
Você é um especialista em SEO técnico e desenvolvimento Next.js 14+.
**Contexto:** O AgentFlow Studio precisa de uma base sólida de SEO para ranquear bem e ter uma boa apresentação em redes sociais.
**Tarefa:** Implemente meta tags dinâmicas e Open Graph para as principais páginas do AgentFlow Studio.
1.  **Meta Tags Essenciais:** Para a homepage (`/`) e páginas de detalhe de Crew (`/crew/[id]`), inclua `title`, `description`, `keywords` (para fins internos, não primário para ranqueamento), `canonical` URL.
2.  **Open Graph (OG):** Para as mesmas páginas, inclua `og:title`, `og:description`, `og:image` (gerada dinamicamente ou padrão), `og:url`, `og:type` (`website` para homepage, `article` para crews, etc.).
3.  **Twitter Cards:** Inclua `twitter:card`, `twitter:site`, `twitter:creator`, `twitter:title`, `twitter:description`, `twitter:image`.
4.  **Geração Dinâmica:** Para a página de detalhe de Crew, o `title`, `description` e `og:image` devem ser gerados com base nos dados da crew (ex: `crew.name`, `crew.description`). Para `og:image`, sugira uma abordagem para gerar imagens dinâmicas (ex: via Vercel OG Image Generation ou serviço externo).

**Restrições:**
-   Use a API de Metadata do Next.js 14+ (`metadata` export).
-   Garanta que as tags sejam semanticamente corretas.
-   As descrições devem ser concisas e persuasivas.
-   A imagem OG padrão deve ser um placeholder minimalista dark.

**Formato de Saída:**
-   `app/layout.tsx` (para meta tags globais)
-   `app/page.tsx` (para meta tags da homepage)
-   `app/crew/[id]/page.tsx` (para meta tags dinâmicas de crew)
-   Um snippet de como gerar `og:image` dinamicamente (conceitual ou com exemplo de Vercel OG).

Prompt 2: Dados Estruturados Schema.org para Rich Snippets

prompt
Você é um especialista em SEO técnico e Schema.org com foco em JSON-LD.
**Contexto:** Para o AgentFlow Studio, queremos maximizar a visibilidade nos resultados de busca com rich snippets.
**Tarefa:** Crie dados estruturados em formato JSON-LD para as seguintes entidades:
1.  **Website:** Para a homepage, descreva o site como um `WebSite` e `Organization`.
2.  **Product/SoftwareApplication:** Para a página principal do produto (homepage ou landing page), descreva o AgentFlow Studio como um `SoftwareApplication` ou `Product` com `offers` (plano gratuito/pago), `aggregateRating` (se houver reviews), `applicationCategory`, `operatingSystem`.
3.  **HowTo:** Para um guia de "Como criar sua primeira Crew" (assuma uma página `/how-to/create-crew`), use o Schema `HowTo` com `step` e `supply`.

**Restrições:**
-   Use JSON-LD.
-   Os dados devem ser o mais completos e precisos possível, usando propriedades relevantes.
-   Integre os dados estruturados diretamente no HTML da página via `script` tag.
-   Assuma dados mockados para o `aggregateRating` e `offers` se não houver dados reais.

**Formato de Saída:** Snippets de código TypeScript/JSX para:
-   `app/page.tsx` (para Website/Organization e Product/SoftwareApplication)
-   `app/how-to/create-crew/page.tsx` (para HowTo)
-   Cada snippet deve ser envolto em um `<script type="application/ld+json">` tag.

Prompt 3: Sitemap XML e Robots.txt com Next.js

prompt
Você é um especialista em SEO técnico e otimização de crawlability.
**Contexto:** O AgentFlow Studio precisa de um sitemap XML e um arquivo robots.txt bem configurados para guiar os crawlers dos motores de busca.
**Tarefa:** Crie os arquivos `sitemap.xml` e `robots.txt` para o AgentFlow Studio.
1.  **`robots.txt`:** Permita o crawl de todo o site, mas desautorize rotas administrativas ou de usuário (ex: `/dashboard`, `/settings`). Inclua o link para o sitemap.
2.  **`sitemap.xml`:** Gere um sitemap XML dinâmico que inclua:
    -   A homepage (`/`).
    -   Páginas estáticas (ex: `/about`, `/pricing`, `/how-to/create-crew`).
    -   Páginas dinâmicas de Crews (`/crew/[id]`), buscando os IDs de crews do banco de dados (assuma uma função `getAllCrewIds` que retorna `Promise<string[]>`).
    -   Inclua `lastmod` e `priority` (opcionalmente) para cada URL.

**Restrições:**
-   Use a abordagem de geração de sitemap do Next.js (arquivo `sitemap.ts` na pasta `app`).
-   O `robots.txt` deve ser um arquivo estático na pasta `public`.
-   Garanta que o sitemap seja atualizado automaticamente (ou via revalidação) quando novas crews forem criadas.

**Formato de Saída:**
-   `public/robots.txt`
-   `app/sitemap.ts` (código TypeScript para gerar o sitemap)

⚡ Prompts de Performance & Core Web Vitals

Foco em velocidade, responsividade e otimização da experiência do usuário.

Prompt 1: Otimização de Imagens e Fontes com Next.js

prompt
Você é um especialista em performance web e Core Web Vitals.
**Contexto:** Imagens e fontes são frequentemente os maiores gargalos de performance. O AgentFlow Studio precisa carregar rápido.
**Tarefa:** Implemente otimizações de imagens e fontes no AgentFlow Studio.
1.  **Otimização de Imagens:**
    -   Use o componente `next/image` para todas as imagens.
    -   Configure `sizes` e `priority` para o LCP (Largest Contentful Paint) hero image na homepage.
    -   Garanta que as imagens sejam servidas em formatos modernos (WebP/AVIF) e com tamanhos responsivos.
2.  **Otimização de Fontes:**
    -   Use `next/font` para carregar fontes do Google Fonts (ex: Inter, Roboto Mono).
    -   Configure `display: swap` ou `block` para evitar CLS (Cumulative Layout Shift) e garantir FOUT/FOIT adequados.
    -   Subconjunto de fontes (font subsetting) para carregar apenas os caracteres necessários (se aplicável).

**Restrições:**
-   Todas as imagens devem usar `next/image`.
-   Todas as fontes devem usar `next/font`.
-   Priorize o LCP e minimize o CLS.
-   O código deve ser fácil de entender e aplicar em outros locais.

**Formato de Saída:** Snippets de código TypeScript/JSX para:
-   `app/layout.tsx` (para configuração de fontes globais)
-   `app/page.tsx` (para exemplo de uso de `next/image` com `priority` e `sizes` para a hero image)
-   Um exemplo de como usar `next/image` em um componente `Card` (ex: para avatares de agentes).

Prompt 2: Bundle Splitting e Lazy Loading de Componentes

prompt
Você é um especialista em performance JavaScript e otimização de carregamento de recursos.
**Contexto:** O AgentFlow Studio terá um editor visual complexo, que não precisa ser carregado para todos os usuários imediatamente.
**Tarefa:** Implemente bundle splitting e lazy loading para otimizar o carregamento inicial da aplicação.
1.  **Lazy Load do Editor Visual:** O componente `CrewBuilder.tsx` é grande e só é necessário na página `/crew/[id]/edit`. Implemente lazy loading para que ele só seja carregado quando o usuário acessar essa rota.
2.  **Lazy Load de Bibliotecas Grandes:** Identifique e sugira como lazy load de bibliotecas grandes (ex: uma biblioteca de diagramação, se não for `react-flow-renderer` que já é otimizada) pode ser implementado.
3.  **Import dinâmico de componentes:** Demonstre como usar `React.lazy` e `Suspense` para carregar componentes sob demanda.

**Restrições:**
-   Use `React.lazy` e `Suspense` para lazy loading.
-   O fallback do `Suspense` deve ser um spinner simples ou um skeleton loader (`shadcn/ui` Skeleton).
-   O código deve ser compatível com Next.js 14+ App Router.

**Formato de Saída:** Snippets de código TypeScript/JSX para:
-   `app/crew/[id]/edit/page.tsx` (demonstrando o lazy load do `CrewBuilder`)
-   Um componente `LoadingSpinner.tsx` (ou `Skeleton`) para o fallback.
-   Explicação sobre como isso afeta o tamanho do bundle e o FCP (First Contentful Paint).

Prompt 3: Estratégias de Cache e Revalidação com Vercel e Next.js

prompt
Você é um especialista em arquitetura de performance, caching e revalidação para aplicações Next.js na Vercel.
**Contexto:** O AgentFlow Studio precisa de dados frescos e carregamento rápido de conteúdo estático e dinâmico.
**Tarefa:** Implemente estratégias de cache e revalidação eficientes.
1.  **ISR (Incremental Static Regeneration):** Para páginas que não mudam com frequência mas precisam ser atualizadas periodicamente (ex: `/pricing`, `/about`), configure ISR.
2.  **Cache de Dados com `fetch`:** Use a API `fetch` do Next.js com opções de cache e revalidação para dados que não mudam com frequência (ex: lista de modelos de IA disponíveis).
3.  **Revalidação On-Demand:** Implemente uma rota de API (`/api/revalidate`) que possa ser chamada por um webhook do Supabase (ou manualmente) para revalidar páginas específicas (ex: `/crew/[id]`) quando os dados da crew forem atualizados.

**Restrições:**
-   Use as funcionalidades nativas de cache e revalidação do Next.js 14+.
-   Priorize a experiência do usuário, servindo conteúdo o mais rápido possível enquanto mantém a frescura dos dados.
-   O código deve ser claro e demonstrar o uso correto das opções de cache.

**Formato de Saída:** Snippets de código TypeScript/JSX para:
-   `app/pricing/page.tsx` (com ISR)
-   `app/crew/[id]/page.tsx` (com `fetch` e revalidação on-demand)
-   `app/api/revalidate/route.ts` (para a rota de revalidação)
-   Explicação sobre como cada estratégia contribui para a performance.

🚀 Prompts de Deploy & DevOps

Foco na automação do deploy, monitoramento e escalabilidade.

Prompt 1: Configuração de Deploy na Vercel com Edge Functions

prompt
Você é um especialista em DevOps e deploy de aplicações Next.js na Vercel.
**Contexto:** O AgentFlow Studio será deployado na Vercel para aproveitar as Edge Functions e a CDN global.
**Tarefa:** Descreva a configuração ideal para o deploy do AgentFlow Studio na Vercel.
1.  **Configuração do Projeto Vercel:** Detalhe como configurar o projeto no dashboard da Vercel, conectando ao repositório GitHub.
2.  **Variáveis de Ambiente:** Liste as variáveis de ambiente essenciais (Supabase URL, Supabase Anon Key, Stripe Secret Key, OpenAI API Key, etc.) e como configurá-las na Vercel (Development, Preview, Production).
3.  **Edge Functions:** Explique como as Edge Functions do Next.js (para tRPC API e outras lógicas de backend) são automaticamente deployadas e escaladas pela Vercel.
4.  **Configuração `vercel.json` (Opcional, se necessário):** Se houver alguma configuração específica de build ou roteamento que não seja padrão do Next.js.

**Restrições:**
-   Foco na simplicidade e automação que a Vercel oferece.
-   Mencione a importância da segurança das variáveis de ambiente.
-   Assuma um setup padrão do Next.js App Router.

**Formato de Saída:**
-   Um arquivo `vercel.json` (se necessário, senão uma explicação de por que não é).
-   Uma lista detalhada das variáveis de ambiente com exemplos de valores.
-   Explicação em texto sobre o processo de deploy e os benefícios das Edge Functions.

Prompt 2: CI/CD Básico com GitHub Actions

prompt
Você é um engenheiro de DevOps expert em CI/CD e GitHub Actions.
**Contexto:** Para garantir a qualidade e agilidade do desenvolvimento do AgentFlow Studio, precisamos de um pipeline CI/CD básico.
**Tarefa:** Crie um workflow de GitHub Actions para o AgentFlow Studio.
1.  **Workflow de Pull Request:**
    -   Acionado em cada Pull Request para `main`.
    -   Instala dependências.
    -   Executa testes unitários (assuma `jest` ou `vitest`).
    -   Executa linter (`eslint`).
    -   Executa verificação de tipagem (`tsc`).
2.  **Workflow de Deploy:**
    -   Acionado em cada merge para `main`.
    -   Instala dependências.
    -   Cria um build de produção do Next.js.
    -   Deploya para a Vercel (usando o `vercel-action`).

**Restrições:**
-   Use o GitHub Actions.
-   Mantenha o workflow simples e focado nos passos essenciais.
-   Assuma que as credenciais da Vercel estão configuradas como secrets no GitHub.

**Formato de Saída:**
-   `.github/workflows/ci.yml`
-   `.github/workflows/deploy.yml`
-   Explicação sobre como configurar os secrets necessários.

Prompt 3: Monitoramento de Performance e Erros

prompt
Você é um engenheiro de confiabilidade (SRE) e especialista em monitoramento de aplicações web.
**Contexto:** Precisamos monitorar a performance e identificar erros no AgentFlow Studio em produção.
**Tarefa:** Sugira e descreva a integração de ferramentas de monitoramento.
1.  **Core Web Vitals e Performance:**
    -   Como usar o Google Search Console e o PageSpeed Insights para monitorar as Core Web Vitals.
    -   Sugira uma ferramenta de RUM (Real User Monitoring) como Vercel Analytics, Sentry Performance ou New Relic para monitoramento de performance em tempo real.
2.  **Monitoramento de Erros:**
    -   Integre Sentry para captura e notificação de erros no frontend e backend (Edge Functions).
    -   Como configurar o Sentry para Next.js e tRPC.
3.  **Logs e Observabilidade:**
    -   Como usar os logs da Vercel para depuração de Edge Functions.
    -   Sugira uma ferramenta de agregação de logs (ex: Logtail, Datadog) se a Vercel não for suficiente.

**Restrições:**
-   Foco em ferramentas que se integram bem com a stack Next.js/Vercel.
-   Descreva a configuração mínima para começar.
-   Priorize a identificação proativa de problemas.

**Formato de Saída:**
-   Explicação textual detalhada sobre as ferramentas e suas integrações.
-   Snippets de código para a inicialização do Sentry no Next.js (cliente e servidor).
-   Exemplo de como configurar a Vercel para enviar logs para um serviço externo (se aplicável).

Prompt Único Completo

Este é o mega-prompt, para quando você quer que a IA te entregue o projeto quase pronto. Lembre-se, quanto mais contexto e restrições, melhor o resultado.

prompt
Você é o Zé Mané, um engenheiro de software full-stack autodidata e genial, expert em Next.js 14+, React 19, tRPC, Drizzle ORM, Supabase, Tailwind CSS v4, shadcn/ui, Vercel e SEO técnico avançado.
**Contexto Geral:** Estamos construindo o "AgentFlow Studio", uma plataforma SaaS no-code para orquestração visual de IAs multi-agente, focada em usuários não-desenvolvedores. O projeto deve ser um MVP, com design minimalista dark, alta performance (Core Web Vitals), SEO técnico robusto e pronto para monetização via Stripe.

**Tarefa Principal:** Gere todo o código-fonte essencial e as configurações para o MVP do AgentFlow Studio, seguindo a arquitetura e as especificações abaixo.

**Especificações Detalhadas:**
1.  **Estrutura do Projeto:** Crie a estrutura de pastas para um projeto Next.js 14+ App Router.
2.  **Backend (tRPC, Drizzle, Supabase):**
    *   **Esquema de Banco de Dados:** Gere `drizzle/schema.ts` com as tabelas `users`, `agents`, `tasks`, `crews`, `crewAgents`, `crewTasks`, `executions`, conforme detalhado no Prompt 1 de Arquitetura.
    *   **Configuração Drizzle:** Gere `drizzle/drizzle.ts` para conectar ao Supabase PostgreSQL.
    *   **API tRPC:** Crie `server/api/trpc.ts` (base router) e `server/api/routers/crew.ts` com os procedimentos CRUD para `Crews` e seus relacionamentos (`addAgentToCrew`, `addTaskToCrew`, etc.), conforme detalhado no Prompt 2 de Arquitetura. Use `zod` para validação e `protectedProcedure` para autorização.
    *   **Autenticação Supabase:** Implemente a integração de login/registro (email/senha, Google, GitHub) e proteção de rotas (`middleware.ts`), conforme detalhado no Prompt 3 de Arquitetura.
3.  **Frontend (Next.js, React, Tailwind, shadcn/ui):**
    *   **Design System:** Configure `tailwind.config.ts` e `app/globals.css` para um tema "dark mode first" minimalista, com paleta de cores e fontes personalizadas (Inter, Roboto Mono), conforme detalhado no Prompt 2 de Frontend.
    *   **Componentes shadcn/ui:** Configure `components/ui` com os componentes padrão `shadcn/ui` adaptados ao tema.
    *   **Página de Login:** Crie `app/login/page.tsx` com formulários de login/registro usando `shadcn/ui` (Card, Input, Button) e integração com Supabase Auth.
    *   **Editor Visual Drag-and-Drop (CrewBuilder):** Crie `components/CrewBuilder.tsx` para o editor visual de crews, com sidebar de agentes/tarefas, canvas de fluxo e painel de propriedades, usando uma biblioteca de drag-and-drop (ex: `react-flow-renderer` ou `react-dnd`) e `shadcn/ui` para os elementos visuais, conforme detalhado no Prompt 1 de Frontend.
    *   **Micro-interações:** Adicione animações sutis com `framer-motion` para transições de página, hover em cards e feedback de botões, conforme detalhado no Prompt 3 de Frontend.
4.  **SEO Técnico & Performance:**
    *   **Meta Tags & Open Graph:** Implemente meta tags dinâmicas e Open Graph para homepage (`/`) e páginas de crew (`/crew/[id]`) usando a API de Metadata do Next.js, conforme detalhado no Prompt 1 de SEO.
    *   **Schema.org JSON-LD:** Adicione dados estruturados `WebSite`, `Organization`, `SoftwareApplication` (ou `Product`) e `HowTo` (para uma página `/how-to/create-crew`) em JSON-LD, conforme detalhado no Prompt 2 de SEO.
    *   **Sitemap & Robots.txt:** Gere `public/robots.txt` e `app/sitemap.ts` (dinâmico para crews), conforme detalhado no Prompt 3 de SEO.
    *   **Otimização de Imagens e Fontes:** Use `next/image` e `next/font` para otimização de assets, conforme detalhado no Prompt 1 de Performance.
    *   **Lazy Loading:** Implemente lazy loading para o `CrewBuilder` na rota `/crew/[id]/edit` usando `React.lazy` e `Suspense`, conforme detalhado no Prompt 2 de Performance.
    *   **Cache & Revalidação:** Configure ISR para páginas estáticas e revalidação on-demand para páginas de crew, conforme detalhado no Prompt 3 de Performance.
5.  **Integrações Externas:**
    *   **Stripe:** Crie um placeholder para a integração do Stripe (ex: um componente `PricingPage.tsx` com botões de assinatura que simulariam a chamada à API do Stripe).
    *   **Modelos de IA:** Crie um placeholder para a integração com APIs de modelos de IA (OpenAI, Gemini, Claude) em uma Edge Function, mostrando como uma chamada seria feita.

**Restrições Globais:**
-   Todo o código deve ser TypeScript.
-   Priorize a segurança, performance e acessibilidade.
-   Use apenas as tecnologias especificadas.
-   O código deve ser limpo, modular e bem comentado.
-   Para dados dinâmicos, use dados mockados onde o banco de dados não está totalmente implementado (ex: para listar agentes/tarefas disponíveis).
-   O foco é o MVP, então funcionalidades complexas (ex: execução real de crews com LLMs) podem ser representadas por placeholders ou simulações.

**Formato de Saída:** Um arquivo ZIP (representado por blocos de código markdown para cada arquivo essencial) contendo a estrutura de pastas e o código-fonte para todos os itens acima. Inclua um `README.md` com instruções de setup e deploy.

```prompt
// Exemplo de estrutura de arquivo:
//
// /app
//   /api
//     /revalidate
//       route.ts
//   /crew
//     /[id]
//       /edit
//         page.tsx
//       page.tsx
//   /login
//     page.tsx
//   /pricing
//     page.tsx
//   layout.tsx
//   page.tsx
//   sitemap.ts
// /components
//   /ui
//     button.tsx
//     card.tsx
//     // ... outros componentes shadcn/ui
//   AuthButton.tsx
//   CrewBuilder.tsx
//   LoadingSpinner.tsx
//   PageTransition.tsx
// /drizzle
//   drizzle.ts
//   schema.ts
// /hooks
//   useUser.ts
// /public
//   robots.txt
// /server
//   /api
//     /routers
//       crew.ts
//     trpc.ts
// /supabase
//   client.ts
//   server.ts
// .env.example
// tailwind.config.ts
// tsconfig.json
// package.json
// README.md

// --- Conteúdo do README.md ---
// # AgentFlow Studio MVP
//
// Este é o MVP do AgentFlow Studio, construído com Next.js 14+, tRPC, Drizzle ORM, Supabase, Tailwind CSS v4 e shadcn/ui.
//
// ## Setup
// 1. Clone o repositório.
// 2. Instale as dependências: `pnpm install` (ou `npm install`/`yarn install`).
// 3. Configure seu arquivo `.env.local` com as variáveis de ambiente (veja `.env.example`).
// 4. Configure seu projeto Supabase (Database, Auth, Storage).
// 5. Execute as migrações do Drizzle (se aplicável, ou crie as tabelas manualmente no Supabase).
// 6. Inicie o servidor de desenvolvimento: `pnpm dev`.
//
// ## Deploy
// Este projeto é otimizado para deploy na Vercel. Conecte seu repositório GitHub e configure as variáveis de ambiente na Vercel.
//
// ## Variáveis de Ambiente (.env.example)
// ```
// NEXT_PUBLIC_SUPABASE_URL=
// NEXT_PUBLIC_SUPABASE_ANON_KEY=
// SUPABASE_SERVICE_ROLE_KEY=
// STRIPE_SECRET_KEY=
// NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
// OPENAI_API_KEY=
// GOOGLE_CLIENT_ID=
// GOOGLE_CLIENT_SECRET=
// GITHUB_CLIENT_ID=
// GITHUB_CLIENT_SECRET=
// NEXTAUTH_SECRET= // Para NextAuth, se usado, ou para cookies seguros
// NEXT_PUBLIC_APP_URL=http://localhost:3000 // URL base da aplicação
// ```
//
// --- Conteúdo de app/layout.tsx ---
// // ... seu código aqui
//
// --- Conteúdo de app/page.tsx ---
// // ... seu código aqui
//
// // ... e assim por diante para todos os arquivos listados


---

## Stack Mínima Viável

Para lançar o AgentFlow Studio em 48 horas (o famoso "Zé Mané Time-to-Market"), a gente foca no essencial, mas com a base tecnológica mais robusta possível.

1.  **Next.js 14+ (App Router)**: O framework. Performance, SEO e DX de ponta.
    *   [Documentação Oficial](https://nextjs.org/docs)
2.  **Vercel**: Hospedagem e Edge Functions. Deploy contínuo, escalabilidade e CDN global.
    *   [Documentação Vercel](https://vercel.com/docs)
3.  **Supabase**: Banco de dados (PostgreSQL), Autenticação e Storage. Tudo em um, fácil de usar.
    *   [Documentação Supabase](https://supabase.com/docs)
4.  **Drizzle ORM**: ORM leve e tipado para PostgreSQL.
    *   [Documentação Drizzle](https://orm.drizzle.team/docs/overview)
5.  **tRPC**: API tipada end-to-end. Adeus, problemas de tipagem entre frontend e backend.
    *   [Documentação tRPC](https://trpc.io/docs)
6.  **Tailwind CSS v4 (JIT)**: Estilização utilitária e performática.
    *   [Documentação Tailwind CSS](https://tailwindcss.com/docs)
7.  **shadcn/ui**: Componentes React acessíveis e personalizáveis, feitos com Tailwind e Radix UI.
    *   [Documentação shadcn/ui](https://ui.shadcn.com/docs)
8.  **Stripe**: Processamento de pagamentos SaaS.
    *   [Documentação Stripe](https://stripe.com/docs)
9.  **Zod**: Validação de schemas em TypeScript. Essencial para segurança e tipagem.
    *   [Documentação Zod](https://zod.dev/)
10. **Framer Motion**: Micro-interações e animações. Para dar aquele toque de polimento.
    *   [Documentação Framer Motion](https://www.framer.com/motion/)

---

## Checklist de Lançamento

Antes de apertar o botão "Go Live", o Zé Mané tem um checklist de 10 itens técnicos que são **obrigatórios**. Não vacila!

1.  ✅ **Core Web Vitals Verificadas**: PageSpeed Insights e Lighthouse (mobile e desktop) com pontuações verdes para LCP, FID/INP e CLS.
2.  ✅ **Robots.txt e Sitemap.xml Otimizados**: `robots.txt` bloqueando rotas sensíveis e `sitemap.xml` listando todas as URLs indexáveis, incluindo as dinâmicas, com `lastmod` correto.
3.  ✅ **Dados Estruturados Schema.org Válidos**: Testados no Rich Results Test do Google, sem erros, para as principais páginas (Website, SoftwareApplication, HowTo).
4.  ✅ **Meta Tags e Open Graph Completos**: `title`, `description`, `og:image`, `twitter:card` configurados dinamicamente para todas as páginas importantes.
5.  ✅ **Autenticação e Autorização Robustas**: Testadas para edge cases (usuário não logado, usuário sem permissão, token expirado) e com proteção CSRF/XSS.
6.  ✅ **Segurança do Banco de Dados**: Políticas RLS (Row Level Security) no Supabase configuradas corretamente para evitar acesso não autorizado aos dados do usuário.
7.  ✅ **Otimização de Imagens e Fontes**: Todas as imagens via `next/image` e fontes via `next/font`, com formatos modernos e carregamento otimizado.
8.  ✅ **Testes de Acessibilidade (WCAG 2.2)**: Navegação por teclado, contraste de cores, rótulos ARIA para componentes interativos.
9.  ✅ **Monitoramento de Erros e Performance Ativo**: Sentry configurado para capturar erros, Vercel Analytics (ou similar) monitorando performance em produção.
10. ✅ **Backup e Recuperação de Dados**: Estratégia de backup do Supabase configurada e testada.

É isso aí, meu povo! Com esses prompts e esse checklist, o AgentFlow Studio vai sair do papel voando baixo e com a qualidade que só o Zé Mané garante. Agora, mãos à obra e bora codar!

Compartilhar