Demo My Product

Servidor MCP remoto em https://demomyproduct.com/mcp que permite ao Claude, Cursor ou ChatGPT criar e publicar demonstrações interativas de produtos (tours de produto clicáveis com hotspots, dicas e etapas ramificadas).

Servidor MCP hospedado

npx add-mcp 'https://demomyproduct.com/mcp'

Instala no Claude Code, Codex, Cursor e outros

Documentação

Crie demonstrações com agentes de IA

O Demo My Product funciona com agentes de IA por meio do Model Context Protocol (MCP). Uma vez conectado, um agente pode fazer tudo o que você faz no editor: listar e criar demonstrações, adicionar capturas de tela, escrever títulos de etapas, posicionar pontos de acesso e dicas, desfocar áreas sensíveis, alterar as configurações da demonstração e publicá-la.

O endereço do servidor é:

https://demomyproduct.com/mcp

Na primeira vez que um agente se conecta, seu navegador abre o Demo My Product: faça login (ou crie uma conta), verifique o nome do agente e pressione Permitir.

Conecte um agente

Claude (claude.ai e Claude Desktop). Abra Configurações → Conectores, escolha Adicionar conector personalizado, nomeie-o como Demo My Product e cole o endereço do servidor.

Claude Code. Execute:

claude mcp add --transport http demomyproduct https://demomyproduct.com/mcp

Em seguida, execute /mcp no Claude Code, escolha demomyproduct e autentique-se.

Cursor. Abra Configurações → MCP, adicione um servidor com o URL acima.

ChatGPT. Em um espaço de trabalho com conectores habilitados, adicione um conector personalizado com o URL acima.

Qualquer outro cliente MCP que suporte servidores remotos com OAuth funciona da mesma forma.

Peça uma demonstração

Alguns prompts para começar:

  • Crie uma demonstração chamada "Tour de integração" a partir das quatro capturas de tela nesta pasta, com um ponto de acesso no botão principal de cada uma, e publique-a.
  • Capture https://example.com/pricing e https://example.com/signup como uma demonstração de duas etapas, aponte uma dica para o botão de inscrição e me dê o código de incorporação.
  • Abra minha demonstração "Tour de cobrança", desfoque os endereços de e-mail em todas as etapas e republique-a.

Capturas de tela: envie ou capture

Um agente pode adicionar capturas de tela de duas maneiras:

  • Envio. Para capturas de tela que ele já possui (ou tira ele mesmo). O agente solicita um link de envio único, envia a imagem para ele (PNG ou JPEG, até 10 MB) e a transforma em uma etapa. Funciona para qualquer página, inclusive aquelas protegidas por login.
  • Captura. Para páginas públicas, o agente fornece um URL e o Demo My Product o abre em um navegador, tira a captura de tela e lista os botões e links nela, para que os pontos de acesso fiquem no lugar certo. Páginas que exigem login não podem ser capturadas: use o envio. A captura faz parte do plano Pro; nos planos Free e Starter, os agentes enviam capturas de tela.

Planos e limites

Um agente age como você, com os limites do seu plano: ele pode publicar quantas demonstrações seu plano permitir, capturar páginas apenas no Pro, e a publicação exige um e-mail verificado. Os agentes podem fazer até 120 chamadas por minuto, 60 envios por hora e 30 capturas por hora.

Desconecte um agente

Vá para Configurações → Agentes conectados e pressione Desconectar ao lado do agente. Ele perde o acesso imediatamente; você pode reconectá-lo pelo agente a qualquer momento.