Construindo Aplicativos MCP com Angular
Se você tem construído servidores MCP, você sabe como funciona: sua ferramenta retorna JSON, o host renderiza como texto, e o usuário aperta os olhos para uma string de timestamp. Aplicativos MCP mudam isso — eles permitem que seu servidor envie uma interface interativa que o host renderiza em um iframe, bem dentro da conversa.
Os Aplicativos MCP são construídos sobre o Modelo de Contexto de Protocolo — um padrão aberto. Eles não estão ligados ao Claude ou a qualquer provedor de IA específico. Qualquer host que implemente a especificação dos Aplicativos MCP (Claude Desktop, clientes de chat personalizados ou outros assistentes de IA que adotem o MCP) pode renderizar sua interface. Você a constrói uma vez, e ela funciona em todos os lugares onde o MCP é suportado.
Este post aborda a construção de Aplicativos MCP com Angular. Começaremos com uma única ferramenta, adicionaremos uma segunda ferramenta com sua própria interface, e então mostraremos como compartilhar código entre elas sem aumentar o tamanho de nenhum dos pacotes.
Como os Aplicativos MCP Funcionam (Recapitulando Rápido)
View (Aplicativo Angular) <--PostMessageTransport--> Host (AppBridge) <--Cliente MCP--> Servidor MCP
- Servidor registra ferramentas e recursos. Cada ferramenta pode apontar para um URI de recurso contendo a interface.
- Host (o cliente de chat) busca esse recurso e o renderiza em um iframe isolado.
-
View é seu aplicativo Angular rodando dentro desse iframe. Ele usa a classe
Appde@modelcontextprotocol/ext-appspara se comunicar com o host.
A chave para entender: sua interface é empacotada em um único arquivo HTML autossuficiente usando Vite e vite-plugin-singlefile. O host não precisa saber que é Angular — ele apenas carrega HTML.
Estrutura do Projeto
basic-server-angular/
├── mcp-app.html # Ponto de entrada HTML para a interface #1
├── greeting-app.html # Ponto de entrada HTML para a interface #2
├── src/
│ ├── main.ts # Inicialização do Angular para a interface #1
│ ├── app.component.ts # Componente Get Time
│ ├── greeting-main.ts # Inicialização do Angular para a interface #2
│ ├── greeting.component.ts # Componente de Saudação
│ ├── shared/
│ │ └── mcp-app-setup.ts # Configuração compartilhada de App + temas
│ └── global.css # Variáveis CSS cientes do host
├── server.ts # Servidor MCP (registra ferramentas + recursos)
├── main.ts # Ponto de entrada do servidor (HTTP + stdio)
└── vite.config.ts # Constrói cada HTML em um único arquivo
Passo 1: O Servidor
Todo Aplicativo MCP começa no lado do servidor. Você registra uma ferramenta (o que o LLM chama) e um recurso (o HTML que é renderizado). Eles estão ligados por um URI de recurso.
// server.ts
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import type { CallToolResult, ReadResourceResult } from "@modelcontextprotocol/sdk/types.js";
import fs from "node:fs/promises";
import path from "node:path";
import {
registerAppTool,
registerAppResource,
RESOURCE_MIME_TYPE,
} from "@modelcontextprotocol/ext-apps/server";
const DIST_DIR = import.meta.filename.endsWith(".ts")
? path.join(import.meta.dirname, "dist")
: import.meta.dirname;
export function createServer(): McpServer {
const server = new McpServer({
name: "Servidor Básico de Aplicativos MCP (Angular)",
version: "1.0.0",
});
const resourceUri = "ui://get-time/mcp-app.html";
// Registra a ferramenta — isso é o que o LLM chama
registerAppTool(server, "get-time", {
title: "Obter Hora",
description: "Retorna a hora atual do servidor como uma string ISO 8601.",
inputSchema: {},
_meta: { ui: { resourceUri } }, // Liga esta ferramenta à sua interface
}, async (): Promise<CallToolResult> => {
const time = {As empresas brasileiras podem se beneficiar da criação de aplicativos interativos que se integram facilmente a diferentes plataformas de IA. Isso melhora a experiência do usuário e amplia as possibilidades de interação em serviços digitais. A adoção do MCP pode posicionar as empresas à frente na era da IA.
Noticias relacionadas
Agentes de IA, Servidores MCP e Aplicativos Desconhecidos: A Necessidade de Sandboxes Locais
O artigo discute a importância de sandboxes locais para executar agentes de IA e servidores MCP, evitando riscos de código não confiável. Apresenta o nilbox como uma solução inovadora para desenvolvedores.
Como Conectar Seu Agente de IA ao SwarmHaul e Ganhar SOL em 5 Minutos
Aprenda a conectar seu agente de IA ao protocolo SwarmHaul em poucos passos. O artigo detalha como os agentes podem realizar tarefas digitais e serem recompensados em SOL na blockchain Solana.
Não Construa Seu Servidor MCP como um Wrapper de API
O artigo discute a importância de projetar servidores MCP com foco na intenção, em vez de apenas como wrappers de API, destacando a complexidade envolvida em operações de produção.
Gostou do conteudo?
Receba toda semana as principais novidades sobre WebMCP.