Agent Demo Studio

Agent Demo Studio es un servidor MCP de código abierto, CLI, grabador de navegador y editor de vídeo que permite a Codex, Claude Code y otros agentes de IA producir demostraciones de producto pulidas desde la terminal.

Abre un navegador Chromium real, realiza el flujo de trabajo solicitado en vivo, graba cada acción y produce un MP4 de alta calidad con:

• Vídeo H.264 de 1920×1080

• Cursor de agente suave y resaltados de clic

• Tarjetas de capítulo y anotaciones de acción

• Fondo degradado cinematográfico y marco de navegador

• Intro y outro con marca

• Subtítulos de narración incrustados

• Voz en off local del sistema

• Música ambiental generada libre de derechos

• Un editor visual local para previsualizar y reestilizar

No se requiere cuenta alojada. Los proyectos, grabaciones, voz en off, música y archivos renderizados permanecen en tu máquina.

Cómo funciona

Codex / Claude Code / any MCP client
                 │
            MCP tools
                 │
       Agent Demo Studio engine
       ├── Playwright live recorder
       ├── Semantic action timeline
       ├── Local TTS + generated music
       ├── Sharp design compositor
       └── FFmpeg 1080p renderer
                 │
        Local Studio + MP4 export

El servidor MCP es el plano de control del agente. El trabajo de navegador y medios se ejecuta localmente, y los archivos multimedia grandes se devuelven como recursos de archivo en lugar de enviarse a través del contexto del modelo.

Related MCP server: ittybitty MCP server

Requisitos

• Node.js 20.12 o más reciente

• FFmpeg y FFprobe en PATH

• Codex y/o Claude Code para el control del agente

Instala FFmpeg si es necesario:

# Windows
winget install Gyan.FFmpeg

# macOS
brew install ffmpeg

# Ubuntu / Debian
sudo apt-get install ffmpeg

Instalación desde GitHub

npm install --global github:khajaaijaz26/agent-demo-studio
agent-demo setup

agent-demo setup instala Playwright Chromium si falta y registra el servidor MCP con cada cliente detectado:

• Codex CLI, extensión de Codex IDE y configuración de escritorio de Codex

• Claude Code en el ámbito de usuario

Ejecuta una comprobación de salud en cualquier momento:

agent-demo doctor

Para desarrollar desde el código fuente en su lugar:

git clone https://github.com/khajaaijaz26/agent-demo-studio.git
cd agent-demo-studio
npm install
npm run build
npm link
agent-demo setup

Pide a un agente que cree una demo

Después de la configuración, inicia Codex o Claude Code y pregunta:

Create a 45-second product demo of https://my-product.example.
Show the sign-up and dashboard workflow in a visible browser.
Use a purple cinematic background, add this narration, generate music,
render a 1080p MP4, and give me the final file.

Para una grabación adaptativa en vivo, el agente normalmente:

1. Llamar a demo_create_project.

2. Llamar a demo_browser_start para abrir el navegador visible.

3. Llamar a demo_browser_snapshot para inspeccionar la página actual.

4. Llamar a demo_browser_act para cada clic, relleno, desplazamiento, navegación o capítulo.

5. Llamar a demo_browser_finish.

6. Llamar a demo_generate_voice cuando se solicite narración.

7. Llamar a demo_render y consultar demo_job_status.

8. Devolver el enlace del recurso MP4 final.

Si el flujo de trabajo ya se conoce, el agente puede llamar a demo_record_flow una vez con la lista completa de acciones.

Demo CLI de un comando

Graba una página durante cuatro segundos y renderízala con un marco cinematográfico y música ambiental:

agent-demo quick https://example.com --title "Example product tour"

Añade voz en off local:

agent-demo quick https://example.com \
  --title "Example product tour" \
  --narration "Meet the fastest way to launch your next project."

El navegador es visible por defecto. Usa --headless para CI o captura de navegador sin supervisión.

Demos con guion

Los guiones de grabación son archivos JSON portátiles:

{
  "title": "Analytics in action",
  "subtitle": "From data to insight in seconds",
  "url": "http://localhost:3000",
  "narration": "Create a report and share clear insights in seconds.",
  "actions": [
    {
      "type": "chapter",
      "label": "Create a report",
      "description": "A complete workflow",
      "milliseconds": 1200
    },
    {
      "type": "click",
      "role": "button",
      "name": "Create report",
      "label": "Open the report builder"
    },
    {
      "type": "fill",
      "selector": "#report-name",
      "value": "Q3 Growth Brief",
      "label": "Name the report"
    },
    {
      "type": "click",
      "role": "button",
      "name": "Generate report"
    }
  ],
  "headless": false,
  "generateVoice": true,
  "autoRender": true
}

Ejecútalo con:

agent-demo record demo.json

Las acciones de navegador admitidas son:

• navigate

• click

• fill

• press

• hover

• scroll

• wait

• chapter

Prefiere localizadores accesibles de role y name. También se admiten selectores CSS y texto visible.

Estudio visual

Abre el editor local todo en uno:

agent-demo studio

El Estudio proporciona:

• Explorador de proyectos

• Vista previa del vídeo final

• Línea de tiempo de acciones semánticas

• Edición de título y subtítulo

• Colores de fondo, acento y resaltado

• Editor de narración

• Generación de voz local

• Controles de música y subtítulos

• Re-renderizado 1080p con un clic

El servidor se vincula solo a 127.0.0.1.

Herramientas MCP

Para un cliente MCP que no se detecta automáticamente:

agent-demo mcp-config

Esto imprime una configuración portátil de mcpServers usando el ejecutable de Node actual y la ruta del CLI instalado.

Edición y audio

El renderizador utiliza un manifiesto de proyecto JSON portátil. Las grabaciones en bruto nunca se aplanan permanentemente en una única fuente no editable: los eventos de navegador grabados, la narración, la configuración de diseño y las referencias de audio permanecen disponibles para re-renderizar.

El audio predeterminado no requiere clave API:

• Windows usa System.Speech.

• macOS usa say.

• Linux usa espeak cuando está instalado.

• La música ambiental es sintetizada localmente por Agent Demo Studio y es segura de usar como un activo generado original.

• Se puede suministrar audio WAV, MP3 o compatible con FFmpeg existente con --voice o --music.

Ejemplo:

agent-demo voice my-project --text "Welcome to the product."
agent-demo render my-project --music ./assets/launch-track.mp3

Archivos de proyecto

Por defecto, los proyectos se almacenan en ~/AgentDemoStudio/projects:

projects/my-demo/
├── project.json
├── raw/browser.webm
├── screenshots/latest.png
├── audio/
│   ├── voiceover.wav
│   └── ambient.wav
├── design/
├── captions/
└── exports/
    ├── my-demo.mp4
    └── my-demo-thumbnail.jpg

Establece AGENT_DEMO_HOME o usa --root para cambiar la ubicación.

Privacidad y uso seguro

• La versión básica graba la página del navegador controlada, no el escritorio completo.

• La grabación comienza solo después de que un proyecto inicie explícitamente una sesión de grabación.

• Las credenciales deben introducirse manualmente en una sesión de navegador ya abierta y nunca colocarse en un guion de acciones o en un prompt.

• El Estudio generado se vincula solo a localhost.

• La publicación no es automática intencionalmente en esta versión.

• Revisa una demo antes de compartirla si el producto contiene información privada o de clientes.

Alcance actual

Esta primera versión de código abierto se centra en demostraciones de sitios web y productos web. Aún no captura ventanas nativas arbitrarias de escritorio, clona voces, sube a plataformas sociales ni proporciona colaboración en la nube.

Las mejoras planificadas incluyen retomas de escenas, múltiples relaciones de aspecto, generación de guiones gráficos impulsada por repositorio, doblaje multilingüe, enlaces de revisión de equipo y captura nativa de escritorio.

Desarrollo

npm install
npm run typecheck
npm test
npm run build
npm run test:smoke

La prueba de humo lanza un navegador headless real contra el producto de muestra incluido, graba el flujo de trabajo, renderiza el resultado y verifica que la salida sea un vídeo H.264 de 1920×1080.

Contribuciones

Los issues y las pull requests son bienvenidos. Lee CONTRIBUTING.md antes de hacer un cambio sustancial.

Licencia

MIT. Ver LICENSE.