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

Prompts Mestre: LLM-Edge Pro - IA Local e Segura para Mercados Regulados

(há 8 dias)
Prompts Mestre: LLM-Edge Pro - IA Local e Segura para Mercados Regulados

E aí, galera da web! Zé Mané na área, pronto pra desmistificar mais um pepino que o Alfredo jogou no meu colo. E olha, o Alfredo é um gênio, mas ele gosta de um desafio que faz a gente suar as sete camisas. Mas relaxa, Zé Mané tá aqui pra transformar suor em código otimizado e prompts cirúrgicos.

O papo de hoje é sobre um bicho-papão que assombra as empresas mais reguladas: como usar IA de ponta sem dar seus dados pra nuvem alheia? O Alfredo quer que a gente construa o LLM-Edge Pro, a solução definitiva pra essa dor. E eu, como sempre, já tenho o mapa da mina, ou melhor, o mapa dos prompts!

Vamos nessa, porque o tempo é curto e o código não se escreve sozinho!

1. O Projeto em 30 Segundos

O LLM-Edge Pro é uma plataforma SaaS B2B focada em IA on-premise para setores regulados. Ele permite que empresas com dados sensíveis (saúde, finanças, jurídico) implementem e gerenciem Modelos de Linguagem Grandes (LLMs) como o Llama 3 diretamente em sua própria infraestrutura. O objetivo é garantir privacidade, segurança e conformidade regulatória (GDPR, LGPD, HIPAA), eliminando a necessidade de enviar dados para serviços de IA baseados em nuvem. A interface será um painel de controle intuitivo para orquestração de modelos e monitoramento, construído com Next.js, tRPC e Supabase, com uma estética minimalista dark.

2. Arquitetura Recomendada

Pra resolver esse dilema do Alfredo, a gente precisa de uma arquitetura que seja robusta, escalável e, acima de tudo, privada. O segredo aqui é separar a interface de gerenciamento (que pode viver na nuvem, mas com dados mínimos) da execução real dos LLMs, que ocorre no edge do cliente.

Mermaid Error: Parse error on line 2: ... subgraph Cliente (Navegador/App) -----------------------^ Expecting 'SEMI', 'NEWLINE', 'SPACE', 'EOF', 'GRAPH', 'DIR', 'subgraph', 'SQS', 'end', 'AMP', 'COLON', 'START_LINK', 'STYLE', 'LINKSTYLE', 'CLASSDEF', 'CLASS', 'CLICK', 'DOWN', 'UP', 'NUM', 'NODE_STRING', 'BRKT', 'MINUS', 'MULT', 'UNICODE_TEXT', got 'PS'

Show Code
graph TD
    subgraph Cliente (Navegador/App)
        A[Next.js Client-side App] -- tRPC/API --> B(Next.js Server-side/API Routes)
    end

    subgraph Vercel (Cloud Hosting - Frontend/API Gateway)
        B -- Supabase Client/Auth --> C(Supabase Auth & Database)
        B -- tRPC/API --> D(Cloudflare Workers - Edge API)
    end

    subgraph Supabase (Backend as a Service)
        C -- PostgreSQL --> E(Supabase Database - Metadata)
        C -- Storage --> F(Supabase Storage - Configs/Binários Leves)
        C -- Edge Functions --> G(Supabase Edge Functions - Utils)
    end

    subgraph Cloudflare (Edge Network)
        D -- API Gateway --> H(Cloudflare Workers - Edge API)
        H -- Secure Tunnel (mTLS/VPN) --> I(On-Premise LLM Orchestrator)
    end

    subgraph Cliente On-Premise (Infraestrutura do Cliente)
        I[On-Premise LLM Orchestrator] -- gRPC/REST --> J(Llama 3 Model - Containerizado)
        I -- Monitoramento --> K(Prometheus/Grafana - Opcional)
        I -- Logs --> L(ELK Stack - Opcional)
        J -- Dados Sensíveis --> M(Data Lake/DB do Cliente)
    end

    style Cliente fill:#f9f,stroke:#333,stroke-width:2px
    style Vercel fill:#ccf,stroke:#333,stroke-width:2px
    style Supabase fill:#cff,stroke:#333,stroke-width:2px
    style Cloudflare fill:#fcf,stroke:#333,stroke-width:2px
    style Cliente On-Premise fill:#ffc,stroke:#333,stroke-width:2px

    linkStyle 0 stroke:#00f,stroke-width:2px,color:blue;
    linkStyle 1 stroke:#00f,stroke-width:2px,color:blue;
    linkStyle 2 stroke:#00f,stroke-width:2px,color:blue;
    linkStyle 3 stroke:#00f,stroke-width:2px,color:blue;
    linkStyle 4 stroke:#00f,stroke-width:2px,color:blue;
    linkStyle 5 stroke:#00f,stroke-width:2px,color:blue;
    linkStyle 6 stroke:#00f,stroke-width:2px,color:blue;
    linkStyle 7 stroke:#00f,stroke-width:2px,color:blue;
    linkStyle 8 stroke:#00f,stroke-width:2px,color:blue;
    linkStyle 9 stroke:#00f,stroke-width:2px,color:blue;
    linkStyle 10 stroke:#00f,stroke-width:2px,color:blue;
    linkStyle 11 stroke:#00f,stroke-width:2px,color:blue;

Explicação Sucinta:

  1. Frontend (Next.js/React): Painel de controle para o cliente gerenciar seus LLMs. Hospedado na Vercel.
  2. Backend (tRPC/Next.js API Routes): Camada de API para o frontend, autenticação via Supabase Auth.
  3. Banco de Dados (Supabase PostgreSQL): Armazena metadados dos modelos, configurações de usuários, logs de auditoria (NÃO dados sensíveis do cliente).
  4. Edge API (Cloudflare Workers): Atua como um gateway seguro e de baixa latência para a infraestrutura on-premise do cliente. Isso é CRUCIAL para a segurança.
  5. On-Premise LLM Orchestrator (Serviço do Cliente): Um serviço (Docker/Kubernetes) que o cliente instala em sua rede. Ele é responsável por:
    • Receber comandos da Edge API (Cloudflare Workers).
    • Gerenciar o ciclo de vida do Llama 3 (ou outro LLM) containerizado.
    • Interagir com os dados sensíveis do cliente (que NUNCA saem da rede local).
    • Enviar metadados de uso (anonimizados) de volta para o Supabase.
  6. Llama 3 Model (On-Premise): O modelo de IA real, rodando em hardware do cliente, processando dados do cliente.

3. Prompts Mestre por Categoria

Chega de papo, vamos aos prompts que o Zé Mané preparou. Cada um é uma bala de prata pra gerar código e configs com precisão cirúrgica.

🏗️ Prompts de Arquitetura & Backend

Aqui a gente define a espinha dorsal do projeto. Pense em como o Next.js vai conversar com o Supabase e, mais importante, como a nuvem vai interagir de forma segura com o ambiente on-premise do cliente.

Prompt 1: Esquema do Banco de Dados (Supabase PostgreSQL)

prompt
Você é um arquiteto de banco de dados especializado em Drizzle ORM e Supabase.
**Contexto:** Estamos construindo o LLM-Edge Pro. Precisamos de um esquema de banco de dados para gerenciar usuários, organizações, configurações de modelos (metadados, não o modelo em si), e logs de auditoria de uso dos LLMs on-premise.
**Tarefa:** Crie o esquema Drizzle ORM para PostgreSQL, incluindo as tabelas `users`, `organizations`, `llm_models_config`, e `audit_logs`.
**Formato de Saída:** Código TypeScript para o `schema.ts` do Drizzle ORM, com tipos inferidos e relações definidas.
**Restrições:**
- Use `pgTable` do `drizzle-orm/pg-core`.
- Inclua `id` (UUID), `created_at`, `updated_at` para todas as tabelas.
- `users` deve ter `email`, `password_hash`, `organization_id`.
- `organizations` deve ter `name`, `slug`.
- `llm_models_config` deve ter `organization_id`, `model_name`, `version`, `status` (enum: 'active', 'inactive', 'deploying'), `on_premise_endpoint` (URL interna do cliente), `config_json` (JSONB para configs específicas do modelo).
- `audit_logs` deve ter `organization_id`, `user_id`, `action` (e.g., 'deploy_model', 'update_config'), `details` (JSONB), `timestamp`.
- Adicione índices e chaves estrangeiras onde apropriado.

Prompt 2: Configuração Inicial do tRPC Router

prompt
Você é um engenheiro backend expert em tRPC e Next.js.
**Contexto:** Estamos criando a API para o LLM-Edge Pro usando tRPC. Precisamos de um router inicial com procedimentos para autenticação (login/registro via Supabase) e para listar as configurações de modelos de IA de uma organização.
**Tarefa:** Crie o arquivo `_app.ts` para o tRPC, definindo um `appRouter` e alguns procedimentos básicos.
**Formato de Saída:** Código TypeScript para o `src/server/api/routers/index.ts` e um exemplo de `src/server/api/trpc.ts` com o contexto.
**Restrições:**
- Use `@supabase/supabase-js` para autenticação.
- O contexto do tRPC deve incluir o `supabase` client e o `db` (Drizzle ORM client).
- Crie um middleware de autenticação que verifica o token do usuário.
- Crie um procedimento `auth.login` e `auth.register`.
- Crie um procedimento `llm.getModelsConfig` que retorne as configurações de modelos para a organização do usuário autenticado.
- As respostas devem ser tipadas.

Prompt 3: Serviço On-Premise LLM Orchestrator (Esboço)

prompt
Você é um especialista em arquitetura de microsserviços e orquestração de containers.
**Contexto:** O componente mais crítico do LLM-Edge Pro é o "On-Premise LLM Orchestrator", um serviço que o cliente instala em sua infraestrutura para gerenciar o Llama 3 localmente. Ele precisa se comunicar com nossa API na nuvem de forma segura e gerenciar containers Docker.
**Tarefa:** Descreva a arquitetura e as funcionalidades chave deste serviço, incluindo um esboço de como ele se comunicaria com a Cloudflare Workers Edge API e como ele gerencia o Llama 3 via Docker.
**Formato de Saída:** Descrição técnica detalhada em Markdown, com um diagrama ASCII opcional e pseudocódigo para as principais operações.
**Restrições:**
- Foco em segurança: mTLS para comunicação com a nuvem, isolamento de containers.
- Funcionalidades: Pull de imagens do Llama 3, deploy/undeploy de containers, monitoramento de status, envio de logs anonimizados.
- Linguagem sugerida para o serviço: Go ou Python (com Docker SDK).
- A comunicação com a Cloudflare Workers deve ser unidirecional (pull de comandos, push de status).

🎨 Prompts de Frontend & Design

Aqui é onde a mágica acontece para o usuário final. O painel precisa ser intuitivo, performático e, claro, seguir o estilo minimalista dark que o Alfredo tanto gosta.

Prompt 1: Componente ModelCard para o Dashboard

prompt
Você é um engenheiro frontend mestre em React, Next.js, Tailwind CSS e shadcn/ui.
**Contexto:** Precisamos de um componente `ModelCard` para exibir cada modelo de IA gerenciado no dashboard do LLM-Edge Pro. Ele deve ser interativo e refletir o estilo minimalista dark.
**Tarefa:** Crie o código React para o componente `ModelCard`.
**Formato de Saída:** Código TypeScript/TSX para o componente, usando Tailwind CSS para estilização e componentes shadcn/ui (Card, Button, Badge, DropdownMenu).
**Restrições:**
- O card deve exibir: `model_name`, `version`, `status` (com badge colorido: 'active' verde, 'inactive' cinza, 'deploying' amarelo), `on_premise_endpoint`.
- Inclua um `DropdownMenu` com opções: "View Details", "Edit Config", "Deploy/Undeploy", "Delete".
- O design deve ser minimalista dark, com bom uso de espaço negativo.
- Adicione um `onClick` básico para cada opção do dropdown.
- Use `motion` do `framer-motion` para uma micro-interação sutil ao hover.

Prompt 2: Layout Base do Dashboard (Dark Mode First)

prompt
Você é um designer de UI/UX e desenvolvedor frontend com foco em Next.js, Tailwind CSS e acessibilidade.
**Contexto:** Desenvolva o layout base para o dashboard do LLM-Edge Pro. Ele precisa ser responsivo, dark mode first, e incluir uma barra lateral de navegação e uma área de conteúdo principal.
**Tarefa:** Crie o código para o `layout.tsx` (Next.js App Router) e o componente de navegação lateral.
**Formato de Saída:** Código TypeScript/TSX, usando Tailwind CSS para o layout e estilos.
**Restrições:**
- Layout de 2 colunas: barra lateral fixa à esquerda (largura `w-64`) e conteúdo principal à direita.
- A barra lateral deve ter um logo no topo, links de navegação (e.g., "Dashboard", "Models", "Settings", "Audit Logs") e um link para o perfil do usuário/logout no final.
- O conteúdo principal deve ter um cabeçalho com o título da página e um espaço para o conteúdo.
- Design dark mode first, com cores contrastantes e tipografia clara.
- Garanta que seja responsivo para mobile (barra lateral se transforma em menu hambúrguer ou esconde).
- Use `shadcn/ui` para os componentes básicos (Button, Sheet para mobile nav).

Prompt 3: Formulário de Configuração de Modelo (shadcn/ui & React Hook Form)

prompt
Você é um desenvolvedor frontend expert em formulários complexos, React Hook Form, Zod e shadcn/ui.
**Contexto:** Precisamos de um formulário para criar ou editar as configurações de um modelo de IA no LLM-Edge Pro.
**Tarefa:** Crie um componente de formulário para `llm_models_config`.
**Formato de Saída:** Código TypeScript/TSX para o componente, usando `react-hook-form`, `zod` para validação e componentes de formulário do `shadcn/ui`.
**Restrições:**
- Campos obrigatórios: `model_name` (texto), `version` (texto), `on_premise_endpoint` (URL).
- Campo opcional: `config_json` (textarea para JSON, com validação de JSON).
- Inclua botões "Salvar" e "Cancelar".
- Validação em tempo real com Zod.
- Estilo dark mode, com feedback visual claro para erros.
- Use `Form` e `FormField` do `shadcn/ui`.

🔍 Prompts de SEO & Schema.org

Mesmo sendo B2B, SEO é crucial. Precisamos garantir que empresas reguladas encontrem o LLM-Edge Pro quando buscarem por "IA on-premise", "conformidade GDPR LLM", etc.

Prompt 1: Meta Tags Dinâmicas para Páginas de Marketing

prompt
Você é um especialista em SEO técnico e Next.js.
**Contexto:** O LLM-Edge Pro terá páginas de marketing (Home, Features, Pricing, About). Precisamos de meta tags dinâmicas para otimização de busca e compartilhamento social.
**Tarefa:** Crie uma função utilitária em TypeScript que gere um objeto de meta tags para o Next.js `metadata` API, com base em parâmetros de entrada.
**Formato de Saída:** Código TypeScript para a função `generateMetadata` e um exemplo de uso em uma página Next.js.
**Restrições:**
- A função deve aceitar `title`, `description`, `keywords` (array), `ogImage` (URL), `canonicalUrl`.
- Deve gerar `title`, `description`, `keywords`, `og:title`, `og:description`, `og:image`, `twitter:card`, `twitter:title`, `twitter:description`, `twitter:image`, e `canonical` link.
- Use um fallback padrão para `title` e `description` se não forem fornecidos.
- O `twitter:card` deve ser `summary_large_image`.
- O `og:type` deve ser `website`.

Prompt 2: Schema.org para SoftwareApplication

prompt
Você é um ninja em Schema.org e dados estruturados JSON-LD.
**Contexto:** O LLM-Edge Pro é um software SaaS. Precisamos de dados estruturados para que os motores de busca entendam o que somos.
**Tarefa:** Crie um bloco JSON-LD para a página inicial do LLM-Edge Pro, usando o tipo `SoftwareApplication`.
**Formato de Saída:** Bloco de código JSON-LD.
**Restrições:**
- Inclua propriedades essenciais: `@context`, `@type`, `name`, `description`, `url`, `applicationCategory` (e.g., "BusinessApplication"), `operatingSystem` (e.g., "Web"), `offers` (com `price`, `priceCurrency`), `aggregateRating` (se houver reviews).
- Adicione `featureList` para destacar as funcionalidades chave (on-premise LLM, conformidade regulatória).
- Use o nome "LLM-Edge Pro" e a descrição focada em "IA on-premise para setores regulados".

Prompt 3: Sitemap XML e Robots.txt Otimizados

prompt
Você é um especialista em crawlability e indexação.
**Contexto:** Precisamos de um sitemap XML e um arquivo `robots.txt` bem configurados para o LLM-Edge Pro.
**Tarefa:** Crie o conteúdo para `sitemap.xml` e `robots.txt`.
**Formato de Saída:** Dois blocos de texto separados, um para cada arquivo.
**Restrições:**
- `sitemap.xml`: Deve incluir as URLs das páginas de marketing (home, features, pricing, about, contact, privacy, terms). Use `changefreq` e `priority` apropriados.
- `robots.txt`: Deve permitir o rastreamento de todos os user-agents, apontar para o sitemap, e disallow apenas URLs de administração interna ou de teste.
- Exemplo de URLs a incluir no sitemap: `/`, `/features`, `/pricing`, `/about`, `/contact`, `/privacy`, `/terms`.
- Exemplo de URLs a disallow no robots.txt: `/admin/*`, `/dashboard/*` (se forem apenas para usuários logados e não precisarem de indexação).

⚡ Prompts de Performance & Core Web Vitals

Performance é um feature, não um afterthought! O Alfredo não quer um site lento. A gente precisa garantir que o LLM-Edge Pro seja um foguete, mesmo com a complexidade de um SaaS.

Prompt 1: Otimização de Imagens para o Next.js

prompt
Você é um especialista em performance web e otimização de imagens.
**Contexto:** O LLM-Edge Pro terá algumas imagens hero e ícones no frontend. Precisamos garantir que elas carreguem rapidamente e não impactem o LCP.
**Tarefa:** Descreva a estratégia de otimização de imagens e forneça exemplos de uso do componente `next/image`.
**Formato de Saída:** Descrição técnica em Markdown e snippets de código TSX.
**Restrições:**
- Foco em `next/image` e formatos modernos (WebP, AVIF).
- Explique `priority`, `sizes`, `fill` e `quality`.
- Forneça um exemplo para uma imagem hero responsiva e para um ícone SVG.
- Mencione a importância de `loading="lazy"` para imagens abaixo do fold.

Prompt 2: Critical CSS e Font Subsetting

prompt
Você é um guru de performance frontend e otimização de CSS/Fontes.
**Contexto:** Para garantir um LCP excelente no LLM-Edge Pro, precisamos otimizar o carregamento de CSS e fontes.
**Tarefa:** Explique como implementar Critical CSS e Font Subsetting no contexto de um projeto Next.js com Tailwind CSS.
**Formato de Saída:** Descrição técnica em Markdown, com exemplos de configuração e menção às ferramentas.
**Restrições:**
- Para Critical CSS: Explique o conceito e como o Next.js/Tailwind já ajuda (PurgeCSS/JIT), mas também como extrair CSS para above-the-fold se necessário.
- Para Font Subsetting: Explique a importância e como usar `next/font` para otimização e auto-hosting.
- Mencione a importância de pré-carregar fontes (`preload`).

Prompt 3: Estratégias de Lazy Loading e Code Splitting

prompt
Você é um mestre em otimização de bundle e carregamento sob demanda.
**Contexto:** O dashboard do LLM-Edge Pro pode ter componentes pesados (gráficos, editores de JSON). Precisamos de estratégias para carregar esses componentes apenas quando necessários.
**Tarefa:** Explique e forneça exemplos de como implementar lazy loading de componentes e code splitting no Next.js.
**Formato de Saída:** Descrição técnica em Markdown e snippets de código TSX.
**Restrições:**
- Para lazy loading de componentes: Use `React.lazy` e `Suspense`.
- Para code splitting de rotas: Explique como o Next.js faz isso automaticamente e como otimizar.
- Mencione a importância de `dynamic` imports do Next.js para componentes.
- Forneça um exemplo de um componente de gráfico que é carregado apenas quando visível (usando `IntersectionObserver` ou uma biblioteca como `react-intersection-observer`).

🚀 Prompts de Deploy & DevOps

O Alfredo quer lançar em 48h, então o deploy precisa ser suave como manteiga. Vercel e Cloudflare Workers são nossos amigos aqui.

Prompt 1: Configuração de Deploy Vercel (Next.js)

prompt
Você é um especialista em CI/CD e deploy com Vercel.
**Contexto:** O frontend e a API do LLM-Edge Pro (Next.js) serão hospedados na Vercel.
**Tarefa:** Descreva o processo de deploy na Vercel e forneça um exemplo de `vercel.json` para configurações avançadas.
**Formato de Saída:** Descrição técnica em Markdown e um arquivo `vercel.json`.
**Restrições:**
- Explique a integração com Git (GitHub/GitLab/Bitbucket).
- Mencione a configuração de variáveis de ambiente.
- O `vercel.json` deve incluir:
    - `build` com `env` para variáveis de build.
    - `routes` para redirecionamentos ou reescritas básicas (e.g., `/api/(.*)` para `/api/trpc/$1`).
    - `headers` para cabeçalhos de segurança (CSP, HSTS).
    - `functions` para otimização de edge functions se necessário.
- Foco em performance e segurança.

Prompt 2: Deploy de Cloudflare Workers (Edge API)

prompt
Você é um engenheiro de DevOps expert em Cloudflare Workers e Wrangler CLI.
**Contexto:** A Edge API que atua como gateway para a infraestrutura on-premise do cliente será um Cloudflare Worker.
**Tarefa:** Crie um exemplo de código para um Cloudflare Worker que atua como um proxy seguro e um `wrangler.toml` para deploy.
**Formato de Saída:** Código TypeScript para o Worker e um arquivo `wrangler.toml`.
**Restrições:**
- O Worker deve receber requisições do frontend e encaminhá-las (proxy) para um endpoint on-premise pré-configurado (via variáveis de ambiente).
- Deve incluir validação de token de autenticação (e.g., JWT) antes de proxy.
- Deve adicionar cabeçalhos de segurança (CORS, etc.).
- O `wrangler.toml` deve configurar o nome do worker, tipo (`javascript.esm`), e variáveis de ambiente (e.g., `ON_PREMISE_API_KEY`, `ON_PREMISE_BASE_URL`).
- Mencione a importância de usar Cloudflare Tunnel para a conexão segura on-premise.

Prompt 3: Monitoramento Básico (Vercel Analytics & Supabase Logs)

prompt
Você é um engenheiro de confiabilidade (SRE) e especialista em monitoramento.
**Contexto:** Precisamos de um setup de monitoramento básico para o LLM-Edge Pro para identificar problemas rapidamente.
**Tarefa:** Descreva como configurar o monitoramento usando as ferramentas nativas da Vercel e do Supabase.
**Formato de Saída:** Descrição técnica em Markdown.
**Restrições:**
- Para Vercel: Explique como usar Vercel Analytics para Core Web Vitals e Vercel Logs para funções serverless.
- Para Supabase: Explique como acessar os logs do banco de dados e das Edge Functions.
- Mencione a importância de configurar alertas para erros críticos.
- Discuta como os logs de auditoria no Supabase complementam o monitoramento.

4. Prompt Único Completo

Ah, o mega-prompt! Aquele que faz a IA suar a camisa, mas entrega o ouro. Prepare-se, porque o Zé Mané vai soltar a artilharia pesada. Este prompt é para uma IA mais avançada, como GPT-4 ou Claude 3 Opus, que consegue manter um contexto longo e gerar múltiplas saídas coerentes.

prompt
Você é o Zé Mané, um engenheiro autodidata e irreverente, com profundo domínio técnico em desenvolvimento web moderno. Seu objetivo é gerar um projeto MVP completo para o "LLM-Edge Pro", seguindo as especificações detalhadas abaixo.

**Contexto do Projeto:**
- **Nome:** LLM-Edge Pro
- **Problema:** Permite que empresas em setores regulados implementem e gerenciem modelos de IA (como Llama 3) totalmente dentro de sua própria infraestrutura, garantindo privacidade e segurança de dados.
- **Público-alvo:** Empresas em setores regulados (saúde, jurídico, finanças, defesa, agronegócio) que precisam de IA, mas não podem usar soluções em nuvem devido a dados sensíveis.
- **Features Core:** Implementação de modelos de IA (Llama 3) on-premise, Gerenciamento de modelos de IA em infraestrutura local, Garantia de privacidade e conformidade regulatória (GDPR, LGPD, HIPAA).
- **Stack:** Next.js 14+, React 19, Tailwind CSS v4, tRPC, Drizzle ORM, Supabase (Auth, DB), Vercel (Hosting), Cloudflare Workers (Edge API).
- **Design:** Minimalista dark mode first, tipografia expressiva, espaço negativo estratégico.
- **Complexidade:** MVP (Minimum Viable Product).

**Tarefa Principal:**
Gere um conjunto de arquivos e descrições técnicas que representem o MVP do LLM-Edge Pro, cobrindo arquitetura, backend, frontend, SEO, performance e deploy.

**Formato de Saída:**
Organize a saída em seções claras, cada uma contendo código (em blocos markdown com a linguagem correta) ou descrições técnicas detalhadas.

**Seções Requeridas:**

1.  **Arquitetura Geral (Markdown):**
    *   Descrição da arquitetura (como no artigo, mas mais concisa).
    *   Diagrama Mermaid da arquitetura.

2.  **Configuração Inicial do Projeto (Código):**
    *   `package.json` com dependências essenciais (Next.js, React, Tailwind, tRPC, Drizzle, Supabase, shadcn/ui, Zod, React Hook Form, Framer Motion).
    *   `tailwind.config.ts` com setup básico para dark mode e cores do shadcn/ui.
    *   `postcss.config.js`.

3.  **Backend & Database (Código):**
    *   `src/server/db/schema.ts` (Drizzle ORM) para `users`, `organizations`, `llm_models_config`, `audit_logs` (como no Prompt Mestre de Arquitetura 1).
    *   `src/server/api/trpc.ts` (contexto tRPC com Supabase e Drizzle).
    *   `src/server/api/routers/auth.ts` (procedimentos `login`, `register` via Supabase).
    *   `src/server/api/routers/llm.ts` (procedimentos `getModelsConfig`, `createModelConfig`, `updateModelConfig` para Drizzle).
    *   `src/server/api/root.ts` (combinando os routers).

4.  **Frontend (Código):**
    *   `src/app/layout.tsx` (layout base do dashboard, dark mode, com sidebar de navegação e área de conteúdo principal, usando shadcn/ui e Tailwind).
    *   `src/components/ui/sidebar.tsx` (componente da barra lateral com links dummy).
    *   `src/components/ModelCard.tsx` (componente para exibir um modelo, como no Prompt Mestre de Frontend 1, com `framer-motion`).
    *   `src/components/ModelConfigForm.tsx` (formulário de criação/edição de modelo, como no Prompt Mestre de Frontend 3, com React Hook Form, Zod, shadcn/ui).
    *   `src/app/dashboard/page.tsx` (página inicial do dashboard, listando `ModelCard`s).

5.  **SEO & Performance (Código/Descrição):**
    *   `src/lib/metadata.ts` (função `generateMetadata` como no Prompt Mestre de SEO 1).
    *   Exemplo de uso de `generateMetadata` em `src/app/page.tsx` (página de marketing).
    *   Bloco JSON-LD para `SoftwareApplication` (como no Prompt Mestre de SEO 2).
    *   Descrição da estratégia de otimização de imagens com `next/image` e lazy loading (como nos Prompts Mestre de Performance 1 e 3).

6.  **Deploy & DevOps (Código/Descrição):**
    *   `vercel.json` (configuração básica para Vercel, como no Prompt Mestre de Deploy 1).
    *   `src/workers/edge-api.ts` (Cloudflare Worker, proxy seguro, como no Prompt Mestre de Deploy 2).
    *   `wrangler.toml` (configuração para o Cloudflare Worker).
    *   Descrição do "On-Premise LLM Orchestrator" (como no Prompt Mestre de Arquitetura 3, mas mais concisa).

**Restrições Adicionais:**
- Todos os códigos devem ser funcionais e seguir as melhores práticas das respectivas tecnologias.
- Use `use client` onde apropriado para componentes interativos no Next.js App Router.
- Adicione comentários explicativos onde a lógica não for imediatamente óbvia.
- Mantenha a saída concisa, mas completa para um MVP.
- A comunicação entre o Cloudflare Worker e o Orchestrator on-premise deve ser apenas descrita, não implementada em detalhe (foco no MVP).
- Priorize a segurança e a privacidade dos dados em todas as decisões de design.
- O estilo de escrita deve ser o do Zé Mané: técnico, direto, com um toque de irreverência.

5. Stack Mínima Viável

Pra lançar o LLM-Edge Pro em 48h, a gente precisa ser cirúrgico. Esquece o "nice to have", foca no "must have".

  • Framework Frontend/Backend: Next.js 14+ (App Router, Server Components, API Routes)
  • UI Framework/Componentes: Tailwind CSS v4 + shadcn/ui (para componentes pré-construídos e acessíveis)
  • Tipagem/Validação: TypeScript + Zod
  • ORM: Drizzle ORM (para PostgreSQL)
  • Banco de Dados/Auth: Supabase (PostgreSQL para metadados, Auth para usuários)
  • API Layer: tRPC (para comunicação type-safe entre frontend e backend)
  • Hosting Frontend/API: Vercel (integração Git, serverless functions)
  • Edge API/Proxy: Cloudflare Workers + Wrangler CLI (para o gateway seguro on-premise)
  • Orquestração On-Premise: Docker (para containerizar o Llama 3 e o Orchestrator)
  • Conexão Segura On-Premise: Cloudflare Tunnel (para conectar a infraestrutura do cliente à Cloudflare de forma segura)

6. Checklist de Lançamento

Antes de apertar o botão de "Go Live", o Zé Mané tem 10 mandamentos pra você seguir. Não pula nenhum, ou o Alfredo vai virar um monstro!

  1. ✅ Autenticação e Autorização: Testar todos os fluxos de login, registro, recuperação de senha e garantir que usuários só acessem seus próprios dados de organização.
  2. ✅ Validação de Formulários: Confirmar que todos os formulários têm validação robusta (client-side e server-side) para prevenir dados inválidos ou maliciosos.
  3. ✅ Conexão Cloudflare Worker <-> Orchestrator On-Premise: Testar a comunicação segura e a resiliência da conexão (mTLS, retries, timeouts).
  4. ✅ Deploy de Modelo On-Premise: Validar que o Orchestrator consegue baixar, iniciar e parar o container do Llama 3 corretamente na infraestrutura do cliente.
  5. ✅ Logs de Auditoria: Verificar se todas as ações críticas (deploy, update, delete de modelo) estão sendo registradas no Supabase com detalhes suficientes para conformidade.
  6. ✅ Meta Tags e Schema.org: Usar o Google Search Console para testar a renderização e a detecção dos dados estruturados e meta tags.
  7. ✅ Core Web Vitals: Rodar o Lighthouse e PageSpeed Insights em todas as páginas críticas (marketing e dashboard) e garantir scores verdes (LCP < 2.5s, INP < 200ms, CLS < 0.1).
  8. ✅ Responsividade e Acessibilidade: Testar o site em diferentes dispositivos e tamanhos de tela. Usar ferramentas como Axe DevTools para verificar conformidade WCAG básica.
  9. ✅ Variáveis de Ambiente: Garantir que todas as variáveis de ambiente (chaves de API, URLs de banco de dados) estão configuradas corretamente na Vercel e no Cloudflare Workers, e que não há segredos expostos no código.
  10. ✅ Monitoramento e Alertas: Configurar alertas básicos para erros 5xx na Vercel e no Supabase, e para falhas de conexão do Cloudflare Worker com o Orchestrator.

É isso, rapaziada! Com esses prompts e esse checklist, o LLM-Edge Pro vai sair do forno quentinho e pronto pra dominar o mercado. Agora, bora codar! Zé Mané fora!

Compartilhar