Modulos 3-7 · 16 horasProjeto Principal

AI Copilot de Atendimento

O projeto mais ambicioso do workshop: um chatbot inteligente com respostas em streaming, base de conhecimento integrada e protecao contra prompt injection. Exatamente o tipo de solucao que o mercado esta pedindo.

Claude APISSE StreamingSupabaseMCPTypeScript

Visao Geral

O que voce vai construir — e por que isso importa

O que e

Um copilot de atendimento ao cliente alimentado por Claude. Ele responde perguntas em tempo real com streaming, consulta uma base de conhecimento via MCP e mantem historico de conversas no Supabase.

Por que importa

Chatbots inteligentes estao no topo da lista de prioridades de toda empresa. Saber construir um do zero — com streaming, guardrails e persistencia — e uma habilidade de alto valor no mercado atual.

O diferencial

Nao e um chatbot basico. Tem streaming real via SSE, personalidade definida por system prompt, protecao contra prompt injection, rate limiting e base de conhecimento conectada via MCP.

Arquitetura

Uma arquitetura de producao, nao um brinquedo

O copilot segue a mesma arquitetura usada em aplicacoes reais: frontend desacoplado, API com streaming, persistencia em banco e integracao com LLM.

architecture.md

// Fluxo de dados do copilot

Frontend (Chat UI)

POST /api/chat

API Route (SSE Stream)

streampersist

Claude API (Sonnet 4.5)

Supabase (Sessions + Messages)

MCP

Knowledge Base (via MCP)

Funcionalidades

Tudo que um copilot de producao precisa

Streaming SSE

Respostas aparecem palavra por palavra em tempo real, exatamente como o ChatGPT. Implementado com Server-Sent Events e ReadableStream.

System Prompt

Personalidade, tom de voz e regras de comportamento definidos via system prompt. O copilot sabe o que pode e o que nao pode responder.

Gestao de Sessoes

Cada usuario recebe uma sessao unica via cookies. As sessoes e mensagens sao persistidas no Supabase para historico completo.

Rate Limiting

Protecao contra abuso com limitacao de requisicoes por sessao. Implementacao simples e eficaz com Map em memoria.

Historico de Mensagens

Toda conversa e salva no banco. O copilot lembra o contexto anterior e pode retomar conversas de onde parou.

Markdown nas Respostas

As respostas do copilot suportam formatacao rica: negrito, listas, codigo inline e blocos de codigo com syntax highlighting.

Protecao contra Injection

Testes de seguranca com tentativas de prompt injection. O copilot rejeita instrucoes maliciosas e mantem seus guardrails.

Base de Conhecimento via MCP

Conexao direta com Supabase via Model Context Protocol. O copilot consulta dados reais da empresa para responder com precisao.

Evolucao do Projeto

Como o copilot evolui ao longo dos modulos

Voce nao constroi tudo de uma vez. O projeto cresce modulo a modulo, cada etapa adicionando uma camada nova de complexidade e valor.

Banco de Dados + MCP

Conecte o copilot ao Supabase via MCP. Configure tabelas, schemas e permissoes. O copilot ganha acesso a dados reais da empresa.

Supabase MCPRLS PoliciesSchema Design

PRD & Desenvolvimento Spec-Driven

Escreva um PRD completo definindo comportamento, tom, guardrails e features do copilot. Depois implemente cada feature guiado pela spec.

PRD WritingSpec-Driven DevFeature Iteration

Construcao Paralela com Agent Teams

Divida o trabalho entre agentes autonomos: um constroi a API, outro o frontend, outro os testes. Todos trabalhando em paralelo via Tmux.

Agent TeamsTask OrchestrationTmux Workflow

Seguranca, Testes e Code Review

Adicione testes de prompt injection, code review automatizado e pipeline de CI/CD. O copilot fica pronto para producao.

Prompt Injection TestingAutomated Code ReviewCI/CD Pipeline

Polish e Deploy Final

Polimento final: UX, performance, edge cases. Deploy em producao e apresentacao do projeto para a turma.

Production DeployPerformance TuningProject Presentation

Codigo Real

Nao e pseudocodigo. E codigo que roda.

Estes sao trechos reais do copilot que voce vai construir. TypeScript limpo, bem tipado e pronto para producao.

src/api/chat/route.ts

Streaming API

// Stream Claude responses via SSE to the client

const stream = anthropic.messages.stream({

model: 'claude-sonnet-4-5',

system: systemPrompt,

messages,

max_tokens: 1024,

});

// Forward each text chunk as a server-sent event

stream.on('text', (text) => {

const event = `data: ${JSON.stringify({ text })} `;

controller.enqueue(encoder.encode(event));

});

src/lib/prompts.ts

System Prompt

const SYSTEM_PROMPT = `

Voce e o assistente da empresa.

Regras:

- Responda na mesma lingua do usuario

- Seja conciso e profissional

- Para precos, direcione ao WhatsApp

- Nao invente informacoes`;

src/lib/rateLimit.ts

Rate Limiting

// Simple in-memory rate limiter per session

function isRateLimited(sessionId: string): boolean {

const entry = rateLimitMap.get(sessionId);

if (!entry || Date.now() > entry.resetAt) {

rateLimitMap.set(sessionId, {

count: 1,

resetAt: Date.now() + 60_000

});

return false;

}

entry.count++;

return entry.count > MAX_REQUESTS;

}

Este site usa um copilot construido com as mesmas tecnicas

Pronto para construir o seu?

O chatbot no canto inferior direito desta pagina foi construido com a mesma arquitetura que voce vai aprender no workshop. Streaming, guardrails, base de conhecimento — tudo real.

Falar no WhatsApp Entrar na waitlist