Anatomia de um AI SaaS Moderno: Do Prompt ao Produto Escalável — aula do módulo Scaffolding Fullstack AI & App Router, na trilha Stack Moderna & Arquitetura…
Leitura de aproximadamente 4 minutos.
Módulo: Scaffolding Fullstack AI & App Router · Curso: Stack Moderna & Arquitetura de um AI SaaS · Formação: Formação em AI Micro-SaaS: Da Ideia ao MRR com IA
A maioria dos desenvolvedores de software foi treinada no paradigma determinístico: uma requisição HTTP chega ao backend, realiza uma consulta em um banco relacional indexado (5 a 20ms) e retorna um JSON estruturado.
Em um AI SaaS, a dinâmica muda radicalmente: 1. Latência de Segundos (não milissegundos): A geração de um texto longo por um modelo de fronteira pode levar de 3 a 25 segundos. 2. Custo Variável por Token: Cada caractere enviado e recebido possui custo financeiro direto no balanço da empresa. 3. Não-determinismo: A mesma entrada pode gerar saídas diferentes, exigindo validações estruturais de runtime (JSON Schemas, Zod). 4. Streaming Obrigatório: A experiência do usuário exige entrega contínua de tokens (Server-Sent Events) para manter a percepção de resposta instantânea (Time to First Token - TTFT).
+-----------------------------------------------------------------------------------+
| FLUXO COMPARATIVO: CRUD vs AI SAAS |
+-----------------------------------------------------------------------------------+
| SaaS Tradicional: |
| [Browser] ──(HTTP GET/POST)──> [API Server] ──(SQL)──> [Postgres] ──> [JSON 15ms] |
| |
| AI Micro-SaaS: |
| [Browser] ──(POST /api/chat)─> [Edge Handler] ──(Prompt + RAG)─> [OpenAI/Anthropic|
| ▲ │ |
| └──────────── SSE Stream de Tokens (chunk 1, chunk 2, chunk N) ────────┘ |
+-----------------------------------------------------------------------------------+
Para construir um AI SaaS resiliente e rentável, adotamos uma arquitetura modular em cinco camadas bem definidas:
+-----------------------------------------------------------------------------------+
| ARQUITETURA DE REFERÊNCIA AI SAAS |
+-----------------------------------------------------------------------------------+
| 1. APRESENTAÇÃO (UI/UX) │ Next.js 15 App Router, React Server Components, |
| │ Tailwind CSS, Vercel AI SDK Hooks (useChat, useObject)|
+---------------------------+-------------------------------------------------------+
| 2. EDGE / API GATEWAY │ Server Actions, Route Handlers (Edge Runtime), |
| │ Rate Limiting (Upstash Redis), Auth Middleware |
+---------------------------+-------------------------------------------------------+
| 3. ORQUESTRAÇÃO DE IA │ Vercel AI SDK Core (`streamText`, `generateObject`), |
| │ Prompt Templates, Function / Tool Calling |
+---------------------------+-------------------------------------------------------+
| 4. DADOS & MULTITENANCY │ Supabase (PostgreSQL), Row Level Security (RLS), |
| │ pgvector (Embeddings), Stripe Billing Engine |
+---------------------------+-------------------------------------------------------+
| 5. INFERÊNCIA & PROVIDERS │ OpenAI (GPT-6 Sol), Anthropic (Claude Sonnet 5), |
| │ Google (Gemini 3.8 Flash), Groq, LiteLLM Gateway |
+-----------------------------------------------------------------------------------+
Vamos dissecar o passo a passo exato do que ocorre nos bastidores quando o usuário clica em "Enviar Prompt":
1. Captura no Cliente: O hook useChat empacota a nova mensagem e o identificador da conversa (chatId). 2. Autenticação e Rate Limit no Edge: O Route Handler valida o JWT do usuário no Supabase Auth e consulta no Redis se o usuário ainda possui cota de mensagens para aquele minuto/mês. 3. Construção do Contexto: O servidor busca o histórico recente no banco de dados e injeta regras de negócio no system prompt. 4. Disparo da Inferência: O backend abre uma conexão HTTP POST com o provedor de IA com stream: true. 5. Streaming Reverso (Pipes): O stream bruto é convertido em um DataStreamResponse e enviado de volta ao navegador sem bloquear o thread do Node.js. 6. Contabilização Assíncrona: No fechamento do stream (onFinish), os tokens utilizados são debitados do saldo de créditos do usuário no banco de dados.
// Exemplo de Fluxo Conceitual do Route Handler
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';
export async function POST(req: Request) {
// 1. Extração do corpo
const { messages, userId } = await req.json();
// 2. Chamada com streaming nativo
const result = streamText({
model: openai('gpt-6-luna'),
system: 'Você é um assistente sênior de negócios em micro-SaaS.',
messages,
onFinish: async ({ usage }) => {
// 3. Persistência e débito de créditos assíncrono
await registrarConsumoTokens(userId, usage.totalTokens);
},
});
// 4. Retorno do stream HTTP Server-Sent Events
return result.toDataStreamResponse();
}
Ao projetar seu produto, acompanhe continuamente três métricas-chave:
(Mensalidade Cobrada - Custo de Tokens de API) / Mensalidade. Em AI SaaS sustentáveis, a margem bruta deve se manter acima de 75-80%.1. Desenhe no papel ou em um editor ASCII o fluxo de dados da sua ideia de produto de IA (Front -> Edge -> DB -> LLM). 2. Calcule qual seria o custo mensal de LLM se 100 usuários ativos fizessem 30 requisições diárias de 1.000 tokens cada usando gpt-6-luna e o preço de input e output vigente na página de preços da OpenAI.
Na próxima aula, configuraremos o ambiente base do projeto com Next.js 15 App Router, TypeScript e Server Actions.