MCP Apps: Adicionando UI Interativa a Conversas com IA

As ferramentas MCP sempre foram boas em buscar dados e executar ações. O que elas não conseguiam fazer era mostrar algo útil. Você pedia a um assistente de IA para buscar seus números de vendas e recebia de volta uma parede de texto. Quer filtrar por região? Outro prompt. Ordenar por receita? Outro prompt. Funciona, mas é lento e frustrante.

MCP Apps resolvem isso. Eles permitem que servidores MCP retornem componentes de UI interativos — dashboards, formulários, visualizações, painéis de configuração — que renderizam diretamente dentro da conversa. Sem aplicativo separado, sem troca de contexto.

O Que São MCP Apps?

MCP Apps são a primeira extensão oficial do Model Context Protocol. Eles se tornaram oficiais no início de 2026, padronizando padrões que já estavam sendo explorados pelo MCP-UI e pelo OpenAI Apps SDK.

Antes dos MCP Apps, cada cliente tinha que resolver o problema de UI de forma independente. Essa fragmentação significava que um servidor construído para o Claude não funcionaria da mesma forma no VS Code ou ChatGPT. MCP Apps estabelecem um padrão compartilhado para que uma única implementação funcione em todos os clientes que oferecem suporte.

Vale notar que os MCP Apps ainda são novos e estão evoluindo. Mas já são suportados em vários clientes MCP, incluindo Claude e ferramentas de desenvolvimento — uma linha de partida significativa.

Como Funcionam os MCP Interactive Apps

A arquitetura é direta. Uma ferramenta referencia um recurso de UI que aponta para uma interface interativa:

{
  "name": "visualize_sales",
  "description": "Returns an interactive sales dashboard",
  "_meta": {
    "ui": {
      "resourceUri": "ui://dashboards/sales"
    }
  }
}

O host busca esse recurso — um pacote HTML servido sob o esquema ui:// — e o renderiza em um iframe isolado. A UI se comunica de volta com o host usando JSON-RPC sobre postMessage. Isso significa que todas as mensagens são estruturadas, auditáveis e consistentes com o funcionamento do resto do MCP.

O ext-apps SDK gerencia essa camada de comunicação:

import { App } from "@modelcontextprotocol/ext-apps"

const app = new App()
await app.connect()

app.ontoolresult = (result) => renderDashboard(result.data)

await app.updateModelContext({
  content: [{ type: "text", text: "User filtered by Q3" }],
})

O modelo permanece no loop. Quando um usuário interage com a UI — clicando em um filtro, selecionando uma opção de configuração, aprovando uma seção de documento — o modelo vê isso e pode responder.

Componentes de UI MCP São Apenas Aplicações Web

Esta é a parte que os desenvolvedores frontend vão apreciar mais. Seu pacote de UI é uma aplicação web padrão. Você pode construí-la com React, Vue, Svelte ou JavaScript puro. Não há nenhum mecanismo de renderização proprietário para aprender.

O recurso ui:// é um arquivo HTML autocontido com assets empacotados. O host o carrega em um iframe isolado, então ele é executado em um ambiente de navegador familiar. Você escreve componentes da mesma forma que sempre fez — a única novidade é usar o App SDK para se comunicar com o host.

O suporte a UI também é um aprimoramento progressivo. Se um cliente não suporta MCP Apps, a ferramenta ainda funciona — apenas retorna uma resposta em texto. Os servidores devem sempre fornecer um fallback de texto, o que significa que você não fica bloqueado de clientes sem UI.

Onde os MCP Interactive Apps Fazem Mais Diferença

Alguns fluxos de trabalho realmente precisam de uma UI. Respostas em texto não podem substituir:

• Dashboards de dados onde os usuários precisam filtrar, ordenar e explorar detalhes
• Assistentes de configuração com campos dependentes que mudam com base nas seleções
• Painéis de revisão de documentos onde os usuários aprovam ou sinalizam conteúdo inline
• Monitores em tempo real que atualizam sem exigir uma nova chamada de ferramenta

A Shopify demonstrou isso claramente com seu caso de uso de comércio — variantes de produtos, construtores de pacotes e restrições de inventário são complexos demais para gerenciar através de prompts de ida e volta. Uma UI resolve isso de forma limpa.

Começando

O repositório ext-apps inclui servidores de exemplo funcionais: threejs-server, map-server, pdf-server e system-monitor-server. Escolha o mais próximo do que você está construindo e comece a partir daí.

Conclusão

MCP Apps estão em estágio inicial, mas já são utilizáveis. Eles trazem uma forma padronizada de incorporar UI interativa diretamente em conversas com IA, fechando a lacuna entre o que as ferramentas MCP podem buscar e o que os usuários podem realmente fazer com esses dados. Se você já está construindo servidores MCP, adicionar uma camada de UI é um próximo passo natural — e as ferramentas estão prontas para isso.

Perguntas Frequentes

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.