Demo My Product

Servidor MCP remoto en https://demomyproduct.com/mcp que permite a Claude, Cursor o ChatGPT crear y publicar demostraciones interactivas de productos (recorridos de producto clicables con puntos de acceso, información emergente y pasos ramificados).

Servidor MCP alojado

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

Se instala en Claude Code, Codex, Cursor y más

Documentación

Crea demos con agentes de IA

Demo My Product funciona con agentes de IA a través del Protocolo de Contexto de Modelo (MCP). Una vez conectado, un agente puede hacer cualquier cosa que puedas hacer en el editor: listar y crear demos, añadir capturas de pantalla, escribir títulos de pasos, colocar puntos de acceso y sugerencias, difuminar áreas sensibles, cambiar la configuración de la demo y publicarla.

La dirección del servidor es:

https://demomyproduct.com/mcp

La primera vez que un agente se conecta, tu navegador abre Demo My Product: inicia sesión (o crea una cuenta), verifica el nombre del agente y pulsa Permitir.

Conecta un agente

Claude (claude.ai y Claude Desktop). Abre Configuración → Conectores, elige Añadir conector personalizado, nómbralo Demo My Product y pega la dirección del servidor.

Claude Code. Ejecuta:

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

Luego ejecuta /mcp en Claude Code, selecciona demomyproduct y autentícate.

Cursor. Abre Configuración → MCP, añade un servidor con la URL anterior.

ChatGPT. En un espacio de trabajo con conectores habilitados, añade un conector personalizado con la URL anterior.

Cualquier otro cliente MCP que admita servidores remotos con OAuth funciona de la misma manera.

Pide una demo

Algunas sugerencias para empezar:

  • Crea una demo llamada "Tour de incorporación" a partir de las cuatro capturas de pantalla de esta carpeta, con un punto de acceso en el botón principal de cada una, y publícala.
  • Captura https://example.com/pricing y https://example.com/signup como una demo de dos pasos, apunta una sugerencia al botón de registro y dame el código de inserción.
  • Abre mi demo "Tour de facturación", difumina las direcciones de correo electrónico en cada paso y vuelve a publicarla.

Capturas de pantalla: subir o capturar

Un agente puede añadir capturas de pantalla de dos maneras:

  • Subir. Para capturas que tiene (o toma) él mismo. El agente solicita un enlace de subida de un solo uso, envía la imagen a ese enlace (PNG o JPEG, hasta 10 MB) y la convierte en un paso. Funciona para cualquier página, incluidas las que requieren inicio de sesión.
  • Capturar. Para páginas públicas, el agente proporciona una URL y Demo My Product la abre en un navegador, toma la captura de pantalla y lista los botones y enlaces de la página, para que los puntos de acceso se coloquen en el lugar correcto. Las páginas que requieren iniciar sesión no se pueden capturar: usa una subida en su lugar. La captura es parte del plan Pro; en Free y Starter, los agentes suben capturas de pantalla.

Planes y límites

Un agente actúa como tú, con los límites de tu plan: puede publicar tantas demos como tu plan permita, capturar páginas solo en Pro, y publicar requiere un correo electrónico verificado. Los agentes pueden hacer hasta 120 llamadas por minuto, 60 subidas por hora y 30 capturas por hora.

Desconecta un agente

Ve a Configuración → Agentes conectados y pulsa Desconectar junto al agente. Pierde el acceso de inmediato; puedes volver a conectarlo desde el agente en cualquier momento.