Aula 10 - MCP com Aplicações Web 🌐

Interfaces Modernas para Agentes de IA

Agenda de Hoje 📅

Fluxo: Usuário -> IA -> MCP -> Web
Web SDKs e Conectividade
UX Transparente (Feedbacks Visuais)
Segurança no Frontend
Dashboards de Agents

1. O MCP no Navegador 🌍

Aplicações web "AI-First".
Conversas que resultam em ações na tela.

2. A Camada de Transporte SSE

Server-Sent Events é nativo na web.
Streaming de respostas da IA.

3. UX: O Padrão "Thinking" 💭

Mostrar que a IA está trabalhando.
"IA consultando logs..."
Melhora a percepção de utilidade.

4. Segurança: Proxy e Backend 🛡️

graph LR
    A[Frontend] -- "WebSocket/SSE" --> B[Backend Node/Python]
    B -- "MCP Protocol" --> C[Servidores MCP]
    C -- "Ações" --> D[(Sistemas)]

5. Renderizando JSON de Ferramentas 🎨

Em vez de texto bruto: Tabelas, Gráficos, Carrosséis.
Cria interfaces muito mais ricas.

6. Confirmação do Usuário 👤

Botão de "Executar Agora".
Interceptação de ferramentas destrutivas.

7. Prática: Dashboard Simples 💻

Listando ferramentas ativas em uma página web.

8. Arquitetura Web Distribuída

graph TD
    User --> WebApp
    WebApp --> Gateway[API Gateway / MCP Client]
    Gateway --> S1[Stock MCP]
    Gateway --> S2[User MCP]
    Gateway --> S3[Billing MCP]

9. Desafios de Latência

Minimizar turnos de conversa.
Cache agressivo no lado do cliente.

10. Resumo ✅

SSE é o padrão para Web MCP.
Transparência na UX é vital.
Segurança exige backend intermediário.

11. Mini-Projeto: Esboço de UI

Desenhar uma interface de chat que usa ferramentas MCP.

12. Dúvidas? 🤔

"Interface é o que o usuário toca; Protocolo é o que faz funcionar."