Os MCP Apps permitem que uma ferramenta devolva uma interface funcional em vez de texto simples. Este artigo percorre os aplicativos de exemplo oficiais, de mapas 3D a controles deslizantes de orçamento, mostra o código de servidor e de visualização por trás deles e explica como criar os seus dentro do Claude e do ChatGPT.
Antigamente, quando você pedia um mapa a um assistente de IA, recebia um parágrafo descrevendo um. Com um MCP App por trás da ferramenta, a mesma pergunta devolve um mapa de verdade no chat: com pinos marcados, com zoom e pronto para a sua próxima pergunta. Essa passagem de descrever para mostrar é o ponto central dos MCP Apps, e a forma mais rápida de entender por que isso importa é olhar exemplos que funcionam, em vez de ler só a especificação. Este artigo percorre as demos oficiais, os produtos que já vêm com a extensão, o padrão de código por trás de cada uma delas e o que é preciso para criar sua própria interface interativa dentro do Claude e do ChatGPT.
MCP Apps é a primeira extensão oficial do Model Context Protocol. Foi anunciada em 26 de janeiro de 2026 e permite que uma ferramenta devolva uma interface interativa que é renderizada diretamente na janela do chat, e não apenas texto ou JSON. Gráficos, formulários, painéis e cenas 3D ficam todos dentro da conversa, ao lado da resposta do modelo.
Uma ferramenta MCP comum é uma função. O modelo a chama, recebe os dados de volta e descreve o resultado em prosa. Isso funciona até que os dados sejam uma tabela de 40 linhas ou uma rota por uma cidade, e aí a prosa vira uma péssima interface.
Com os MCP Apps, uma ferramenta pode apontar para um recurso de interface. O host (o aplicativo de chat) busca esse recurso e o exibe em um iframe em sandbox. O host passa os dados da ferramenta para a interface, e a interface pode chamar outras ferramentas de volta por meio do host. A conversa e a interface ficam sincronizadas, então um clique em um gráfico pode virar a próxima pergunta para o modelo.
A ideia não surgiu do nada. Ela se apoia em dois esforços da comunidade: o projeto MCP-UI, liderado por Ido Salomon e Liad Yosef, e o Apps SDK da OpenAI. Anthropic e OpenAI trabalharam em uma única especificação compartilhada em vez de lançar duas concorrentes, e é por isso que um mesmo app pode funcionar nos dois assistentes.
Claude e ChatGPT são os dois grandes hosts, mas não estão sozinhos. O repositório ext-apps também lista VS Code, Goose, Postman, MCPJam, o inspetor do mcp-use e o Alpic Playground como clientes que renderizam esses apps.
💡 O suporte varia entre hosts. MCP Apps é uma especificação, e cada cliente decide quanto dela implementar. Teste seu app em cada host que lhe interessa antes de prometer qualquer coisa aos usuários.
O repositório modelcontextprotocol/ext-apps traz cerca de 18 aplicativos de exemplo, e os servidores de exemplo são publicados como pacotes @modelcontextprotocol/server-<name>, então você pode testar um deles sem escrever uma linha de código. Veja a lista geral.
| Exemplo | O que mostra | Vale copiar para |
|---|---|---|
| Map | Globo 3D construído com CesiumJS | Visões espaciais que o usuário pode arrastar e inclinar |
| Three.js | Cenas 3D interativas | Renderização pesada dentro de um sandbox |
| ShaderToy | Shaders GLSL rodando ao vivo | Gráficos de GPU em um iframe |
| Sheet Music | Notação ABC renderizada como partitura | Renderizadores de domínio específico |
| Wiki link graph | Grafo de links de páginas da wiki | Navegação nó a nó |
| Cohort Heatmap | Retenção entre grupos de usuários | Análises densas de relance |
| Customer Segmentation | Gráficos de dispersão e de bolhas | Agrupamentos que o usuário pode inspecionar |
| Scenario Modeler | Projeções de SaaS | Entradas que redesenham as saídas |
| Budget Allocator | Controles deslizantes e gráficos | Controles ligados a totais ao vivo |
| System Monitor | Métricas do sistema operacional | Dados que não param de mudar |
| PDF Server | Visualizador de documentos em partes | Arquivos grandes em pedaços |
| Video Resource | Vídeo binário via MCP | Cargas que não são texto |
| Transcript | Fala para texto | Entrada de áudio |
| Say Demo | Texto para fala | Saída de áudio |
| QR Code | Gerador de código | O app útil mais simples |
O exemplo Map renderiza um globo 3D com CesiumJS. Peça ao assistente para mostrar uma cidade e o globo voa até lá. Você pode arrastar, dar zoom e inclinar como em qualquer aplicativo de mapas, porque é uma interface ao vivo e não uma captura de tela. A visualização se comunica com o host pelo mesmo canal que todo o resto, então o que o usuário faz no mapa pode influenciar o que o modelo diz em seguida.
Three.js e ShaderToy levam a mesma ideia para os gráficos. Um renderiza cenas 3D interativas, o outro executa shaders GLSL ao vivo. Nenhum dos dois precisa de uma ida e volta ao servidor a cada quadro, o que mostra que a renderização intensiva em GPU funciona bem dentro do sandbox. Se sua ferramenta devolve geometria, terreno ou qualquer coisa espacial, estes são os dois que vale a pena copiar.
Análises são onde a interface interativa traz retorno mais rápido. Cohort Heatmap mostra a retenção entre grupos de usuários. Customer Segmentation desenha gráficos de dispersão e de bolhas com agrupamentos que você pode inspecionar. System Monitor transmite métricas do sistema operacional conforme elas mudam, e a demo de grafo de links da wiki desenha um grafo que você pode seguir nó a nó.
Cada um deles substitui uma resposta longa e difícil de ler por algo que você pode escanear em dois segundos. O system monitor é o exemplo a estudar se seus dados mudam enquanto o usuário está olhando, porque mostra como uma visualização pode continuar se atualizando depois que o primeiro resultado chega.
Budget Allocator combina controles deslizantes com gráficos para que você possa mover dinheiro entre categorias e ver os totais reagirem. Scenario Modeler faz o mesmo com projeções de SaaS: altere suas premissas de crescimento e de custo, e a curva de receita é redesenhada. Esses dois são os melhores exemplos didáticos do repositório, porque o padrão é simples. O usuário move um controle, o app recalcula e o gráfico é atualizado.
💡 Dica: se um cálculo é barato, execute-o dentro da visualização. Reserve as chamadas de ferramenta para dados que ficam no seu servidor.
PDF Server entrega um documento em partes, então um arquivo grande não precisa chegar de uma só vez. Sheet Music transforma notação ABC em uma partitura legível. Video Resource transmite vídeo binário pelo MCP, Transcript faz fala para texto, Say Demo lê um texto em voz alta, e o app QR Code gera um código escaneável em uma única chamada. Cada um é pequeno, e cada um mostra um tipo diferente de carga que um app pode tratar.
O anúncio citou dez parceiros de lançamento: Amplitude, Asana, Box, Canva, Clay, Figma, Hex, monday.com, Slack e Salesforce. Os casos de uso descritos em torno do lançamento foram design colaborativo, painéis de exploração de dados, coordenação de projetos e resposta a incidentes. Em outras palavras, os mesmos padrões que você acabou de ver nas demos, aplicados a ferramentas que as pessoas já pagam para usar.
Isso importa para quem constrói sobre o padrão. Uma especificação com dez nomes reconhecíveis no primeiro dia é uma especificação que os clientes vão continuar implementando, e significa que a interface que você cria hoje não é uma aposta em um único fornecedor.
No chat, um MCP App aparece como um painel dentro da conversa. O usuário pode interagir com ele diretamente, e o modelo continua fazendo parte da troca. Nos bastidores, o host pede o consentimento do usuário antes de executar as ferramentas, e cada mensagem entre a visualização e o host é uma mensagem JSON-RPC que pode ser registrada e auditada.
As equipes tendem a adotar isso mais rápido em trabalhos de revisão. Uma pessoa faz uma pergunta no chat, o painel aparece, e todos na mesa podem apontar para o mesmo gráfico em vez de ler o mesmo parágrafo.
Todo MCP App é construído a partir de três peças: uma ferramenta, um recurso e uma visualização.
A ferramenta declara qual interface usa por meio de _meta.ui.resourceUri, um endereço ui://. O recurso devolve o pacote HTML desse endereço. A visualização é o código que roda dentro do iframe. O servidor de início rápido oficial fica assim:
import {
registerAppResource,
registerAppTool,
RESOURCE_MIME_TYPE,
} from "@modelcontextprotocol/ext-apps/server";
registerAppTool(
server,
"get-time",
{
title: "Get Time",
description: "Returns the current server time.",
inputSchema: {},
_meta: { ui: { resourceUri } },
},
async () => {
const time = new Date().toISOString();
return { content: [{ type: "text", text: time }] };
},
);
registerAppResource(
server,
resourceUri,
resourceUri,
{ mimeType: RESOURCE_MIME_TYPE },
async () => {
const html = await fs.readFile(path.join(DIST_DIR, "mcp-app.html"), "utf-8");
return { contents: [{ uri: resourceUri, mimeType: RESOURCE_MIME_TYPE, text: html }] };
},
);
Repare que a ferramenta ainda devolve conteúdo de texto simples. Um host sem suporte a MCP Apps recebe uma resposta utilizável, e um host com suporte recebe a interface por cima dela.
Dentro do iframe, a classe App de @modelcontextprotocol/ext-apps cuida da comunicação com o host. Ela recebe o resultado da ferramenta e pode chamar as próprias ferramentas do servidor:
import { App } from "@modelcontextprotocol/ext-apps";
const app = new App({ name: "Get Time App", version: "1.0.0" });
app.ontoolresult = (result) => {
const time = result.content?.find((c) => c.type === "text")?.text;
serverTimeEl.textContent = time ?? "[ERROR]";
};
getTimeBtn.addEventListener("click", async () => {
const result = await app.callServerTool({ name: "get-time", arguments: {} });
});
app.connect();
Se você usa React, o pacote traz hooks em @modelcontextprotocol/ext-apps/react, incluindo useApp e useHostStyles. Por baixo dos panos, os dois lados se comunicam por um PostMessageTransport, que é o canal de mensagens do iframe adaptado para o MCP.
Um app de chat que renderiza código de interface vindo de um servidor de terceiros está executando código de outra pessoa ao lado da sua conversa. Todo o desenho pressupõe que esse código não é confiável, e isso é uma coisa boa.
💡 Construindo para uma empresa? Peça à sua equipe de segurança que leia esses quatro pontos. Eles vão reconhecer o modelo: é o mesmo usado para widgets de terceiros embutidos, só que mais rígido para um chat de IA.
O repositório inclui apps iniciais básicos em React, Vue, Svelte, Preact, Solid e JavaScript puro. Escolha o que corresponde à stack de front-end que sua equipe já usa, copie-o e troque a ferramenta de exemplo pela sua. A parte do servidor continua a mesma, qualquer que seja o template escolhido.
O repositório também traz quatro skills de agente que automatizam as partes repetitivas:
useHostStyles ou o equivalente para que seu painel acompanhe o modo claro e escuro do host.
Escrever o servidor, o pacote HTML e o código de ligação é, em grande parte, digitação, e o Claude Sonnet 5 no PicassoIA foi feito exatamente para isso. Ele lida com tarefas de programação em várias etapas e uso de ferramentas, e lê imagens, então um esboço de wireframe pode ir direto para a solicitação.
effort vai de baixo a máximo. Baixo é o padrão, desliga o pensamento e responde mais rápido. Mude para alto ou máximo quando o app envolver vários arquivos.image para um esboço do painel. A configuração max_image_resolution reduz a imagem antes do envio, o que economiza tempo e custo.Se você quiser uma segunda opinião sobre o mesmo prompt, o GPT 5.6 Sol também está na plataforma e foi feito para tarefas complexas de programação.
💡 Confira a saída com o quickstart. Os modelos às vezes chutam nomes de API antigos. Compare as importações e a chamada
registerAppToolcom os trechos acima antes de executar qualquer coisa.
Toda boa interface começa como uma imagem na sua cabeça. Antes de escrever uma única linha de código, gere no PicassoIA os mockups, as imagens principais e as cenas de demonstração do seu app. O Seedream 4.5 cria imagens nítidas em 4K a partir de uma descrição curta, o Flux 2 Pro é uma ótima escolha para cenas com cara de foto, o GPT Image 2 segue prompts longos com precisão, e o P Image devolve imagens em cerca de um segundo quando você quer iterar rápido.
Comece com um prompt simples: um notebook sobre uma mesa de madeira mostrando um painel limpo com um mapa e dois controles deslizantes, luz suave da manhã, profundidade de campo rasa. Rode, ajuste um detalhe e rode de novo. Quando uma imagem fixa não for suficiente, os modelos de texto para vídeo da plataforma podem transformar a mesma ideia em um clipe curto.
Escolha um modelo, digite seu primeiro prompt e veja o que você consegue criar. O catálogo completo está em picassoia.com/en/all-models.
Escolha seu idioma
