- O ChatGPT Apps, anunciado pela OpenAI, permite que desenvolvedores incorporem seus apps diretamente dentro das conversas do ChatGPT, usando mais de 800 milhões de usuários ativos semanais como um novo canal de distribuição
- O ChatGPT vai além das respostas em texto e consegue renderizar componentes de UI diretamente, permitindo executar tarefas reais como reservas, compras e consulta de dados dentro do fluxo da conversa
- O núcleo dessa estrutura é o Model Context Protocol (MCP), que funciona permitindo que o LLM chame seletivamente ferramentas externas e recursos de UI
- Apps para ChatGPT têm uma arquitetura com separação clara entre backend (servidor MCP) e frontend (componentes de UI), executando miniapps baseados em React em um sandbox seguro
- O padrão de MCP e ChatGPT Apps deve se expandir no futuro para outros agentes, como o Claude, consolidando-se como uma nova camada de interface que conecta IA conversacional e SaaS tradicional
Visão geral do ChatGPT Apps
- ChatGPT Apps é um recurso que permite a desenvolvedores e equipes de produto inserir apps diretamente nas conversas do ChatGPT
- Durante a conversa, usuários podem realizar tarefas como reservar hotéis, buscar imóveis e fazer compras online sem sair do ChatGPT
- Como plataforma com mais de 800 milhões de usuários ativos semanais, tem potencial para se tornar um canal de distribuição de próxima geração
Como o ChatGPT Apps funciona
- Todos os LLMs (ChatGPT, Claude, Gemini) só conseguem usar um conjunto limitado de ferramentas, como busca na web, leitura de arquivos, execução de código e geração de artefatos
- O ChatGPT Apps permite que desenvolvedores exponham novas ferramentas ao LLM por meio de ferramentas MCP, facilitando a instalação e o uso pelos usuários
- Se você tentar reservar uma hospedagem de curta duração sem um app, receberá apenas fotos e informações sobre regras, sem conseguir concluir a reserva
- Quando o app está instalado, é possível obter uma lista de acomodações do Airbnb correspondente ao pedido e reservar imediatamente
Os três componentes do app
-
Servidor MCP (backend)
- É o servidor com o qual o ChatGPT se comunica, escrito em Python ou Node.js
- Funciona como uma API e define as "ferramentas" (funções) que o ChatGPT pode chamar
- Ex.:
search_restaurants, book_ticket
-
Componentes (frontend)
- A UI interativa que o usuário vê
- Em geral, é construída com React e executada em um sandbox seguro dentro do ChatGPT
- É o conceito de um miniapp web que vive dentro da conversa do ChatGPT
-
ChatGPT (host)
- O app é exibido em uma visualização incorporada dentro do ChatGPT
- O ChatGPT decide quando chamar o app com base no conteúdo da conversa do usuário e nos apps ativados
Fluxo de funcionamento
- Quando o usuário pede ajuda com uma hospedagem de curta duração, o ChatGPT executa automaticamente várias etapas:
1. Decide se o app será útil
2. Entra em contato com o app para verificar quais ferramentas estão disponíveis (ex.: Book Listing, Browse Listing)
3. Chama a ferramenta Browse Listing para retornar as 5 melhores acomodações
4. Responde ao usuário com as 5 melhores acomodações
- Esse fluxo de trabalho é a base do MCP (Model Context Protocol)
- O agente de IA (ChatGPT) recebe acesso a ferramentas que ajudam a atingir um objetivo e usa essas ferramentas seletivamente quando o usuário faz uma solicitação
- As ferramentas podem ser simples, como uma calculadora que soma dois números, ou processos complexos de backend, como geração de imagens
Modos de exibição
- O ChatGPT Apps oferece suporte a três modos de exibição de UI
-
Modo inline
- Mais indicado para: listas, cards e visualizações pequenas
- É o modo padrão de todos os apps e pode mudar para outro modo quando necessário
- Ex.: carrossel de produtos, lista de restaurantes
-
Modo de tela cheia
- Mais indicado para: mapas, formulários complexos e dashboards intensivos em dados
- O componente ocupa toda a janela do ChatGPT
- É usado quando é preciso mais espaço ou foco em tarefas complexas
- Ex.: mapa interativo de imóveis, editor de planilhas
-
Modo PiP (Picture-in-Picture)
- Mais indicado para: ferramentas persistentes, jogos e atualizações em tempo real
- O componente fica flutuando em uma pequena janela na parte superior da tela
- É ideal para itens que precisam continuar visíveis enquanto o usuário segue conversando
- Ex.: temporizador, player de música, jogo da velha
- Se você pretende alternar entre modos de exibição, é preciso considerar com mais cuidado os padrões de UX
Limitações
-
Um componente por turno
- Quando o ChatGPT chama uma ferramenta que retorna um componente, aquele turno termina
- Não é possível encadear automaticamente várias ferramentas que retornam UI
- Ex.: em um pedido como "reserve um restaurante e chame um Uber", primeiro é exibido o componente do restaurante e, após a reserva, o componente do Uber aparece por meio de um gatilho posterior
-
Escopo limitado do estado do componente
- Cada instância do componente mantém seu próprio estado, válido apenas dentro daquela mensagem específica
- Quando o ChatGPT gera uma nova mensagem com o componente, por padrão é criada uma nova instância com estado vazio
- É necessário gerenciar o estado no backend por meio de persistência e consulta
-
Sem acesso direto ao DOM
- Os componentes executam em um sandbox seguro (iframe), sem acesso à página principal do ChatGPT nem possibilidade de executar scripts arbitrários
- Toda a comunicação é feita pela API
window.openai
-
Desempenho é importante
- O estado do componente é enviado ao modelo de IA a cada requisição
- Payloads grandes deixam a resposta mais lenta, então envie apenas o necessário
Casos de uso reais
-
E-commerce & compras
- Criar catálogos de produtos interativos com filtragem de preço, adição ao carrinho e checkout (geralmente redirecionado para o app principal)
-
Ferramentas de negócios
- Criar um quadro Kanban em que o usuário pode arrastar tarefas entre colunas, definir prazos e atualizar status
- É especialmente poderoso para ferramentas internas, permitindo que o ChatGPT responda perguntas sobre o projeto enquanto o usuário também executa ações
-
Booking & reservas
- Criar um componente de reserva de restaurante que mostra disponibilidade, cardápio e avaliações
- O usuário pode pedir recomendações ao ChatGPT e reservar diretamente pela interface
-
Dashboards de dados
- Exibir análises de vendas com gráficos interativos
- Ao perguntar "Como foram as vendas no Q4?", o usuário recebe um dashboard em que pode fazer drill-down por região ou produto
-
Mapas & localização
- Exibir mapas interativos com marcadores para cafeterias, imóveis ou buscas baseadas em localização
- Especialmente eficaz no modo de tela cheia
Guia para criar o primeiro app (exemplo de app de busca de restaurantes)
-
Step 1: criar o componente (frontend)
- Criar um componente React que interaja com a API
window.openai.* para comunicação entre o componente em iframe e o ChatGPT
- A OpenAI fornece um global para ajudar na interação com a API
-
Step 2: definir as ferramentas (backend)
- O servidor MCP define o "contrato" com o ChatGPT
- Ele informa ao modelo o que pode ser feito e qual componente deve ser exibido quando a chamada da ferramenta terminar
-
Step 3: registrar recursos (backend)
- Empacotar o componente React em HTML e hospedá-lo como um recurso no servidor MCP
- O ChatGPT obtém o URI
outputTemplate da etapa anterior e solicita o código que será carregado no iframe
-
Step 4: testar o fluxo
- Depois de implantar o servidor:
- Abra o ChatGPT e ative o Developer Mode
- Vá para Settings → Connected Apps (ou "My Apps")
- Clique em "Connect new app"
- Digite a URL do servidor (ex.:
https://my-mcp-server.com)
- Conecte sem OAuth
- Quando o ChatGPT detectar a ferramenta
search_restaurants, teste digitando "Find me Italian food in Brooklyn"
- O ChatGPT chama a ferramenta, busca os dados e, em vez de texto, renderiza uma lista interativa em React
Perspectivas futuras
- O ChatGPT saiu na frente, mas em breve o padrão MCP também deverá oferecer suporte ao mesmo padrão por meio de MCP apps
- Claude e outros agentes também poderão injetar miniapps em experiências conversacionais
- Entender essa arquitetura de sistema e como construir experiências significativas para usuários abre caminho para uma nova forma de comunicação entre produtos de IA e aplicações SaaS em geral
Ainda não há comentários.