Agent Demo Studio

Agent Demo Studio — это открытый MCP-сервер, CLI, браузерный рекордер и видеоредактор, который позволяет Codex, Claude Code и другим ИИ-агентамсоздавать качественные продуктовые демонтрации прямо из терминала.

Он открывает настоящий браузер Chromium, выполняет запрошенный сценарий в реальном времени, записывает кажое действие и создаёт высококачественный MP4:

• Видео H.264 1920×1080

• Плавный курсоагента и подветка кликов

• Карточки глав и аннотации действий

• Кинематографичный градиентный фон и рамукра браузера

• Брендированные интро и аутро

• Впечённые субтитры озвучки

• Локальная системная озвучка

• Сгенерированная фоновая музыка без оялти

• Локальный визуальный редатор для предпросмотра и смены стиля

Не труется учётная запись. Проекты, записные, озвучка, музыка и готовые рендерные файлы остаются на вашем компьютере.

Как это работает

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

MCP-сервер — это управляющая плоскость для не. Работа с браузером и медиа выполняется локально, а большие медиаревурсы возвращаются как реевые ресурсы, а не передаются через контекст модели.

Related MCP server: ittybitty MCP server

Требования

• Node.js 20.2 или новее

• FFmpeg и FFprobe на PATH

• Codex и/или Система Code для управления агентом

Install FFmpeg, если нужно:

# Windows
winget install Gyan.FFmpeg

# macOS
brew install ffmpeg

# Ubuntu / Debian
sudo apt-get install ffmpeg

Установка из GitHub

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

agent-demo setup устанавливает Playwright Chromium, если его нет, and registers Server with all clients found:

• Codex CLI, расширение Codex IDE and десктопную конфигурацию Codex

• Claude Code ра уровне пользователя

Запускайте в любое время диагностику:

agent-demo doctor

Чтобы ю указывать из исходного кодаа:

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

Создайте демоны с помощью агента

После настройки запуските Codex или Claude Code и запросите:

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.

Для живая а адаптивной запыси агент обыкно:

1. вызвовет demo_create_project.

2. вызвовет demo_browser_start, to open browser.

3. вызвовет demo_browser_snapshot, чтобы проверить текущую страницу.

4. вызвовет demo_browser_act для каждого клика, ввода, прокрутки, перехода или раздела.

5. вызвовет demo_browser_finish.

6. вызвовет demo_generate_voice, если запрошена озвучка.

7. вызвовет demo_render и будет опрашивать demo_job_status.

8. вернёт ссылку на влиятельный MP4-ресурс.

Если сценарий останется уже извместным, агент может вызвать demo_record_flow один раз со полным списком действий.

Одно командое CLI-демо

Не записать страницу за четыре секунд и отрендерить её к кинематографическую рамку и фоновую музыку:

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

Добавляйте локальную озвучку:

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

Браузер отображается оконменем по умолчанию. Используйте браузер --headless для CI или автоматического захвата браузера.

Скриптовые демо

Скрипты записи — это переносимые JSON-файлы:

{
  "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
}

Запускайте его так:

agent-demo record demo.json

Поддерживаются следующие действия браузера:

• navigate

• click

• fill

• press

• hover

• scroll

• wait

• chapter

Предпочитайте доступные локаторы role and name. Также поддерживаются CSS-се значимые видимого text.

Visual Studio

Откройте встроенного локального редактора в одном окне:

agent-demo studio

Студия включает:

• Обозреватель проектов

• Предпросмотр финального видео

• Семантическую временную ленту действий

• Редактирование заголовка и подзаголовка

• Цвета фона, акцента и подсветки

• Редактор озвучки

• Локальную генерацию голоса

• Музыкальные и субтитрические элементы управления

• Пере рендер 1080p в один клик

Сервер связывается только с помощью 127.0.0.1.

MCP-инструменты

Для MCP-клиента, котороры не обнаруен авматически:

agent-demo mcp-config

Это выводит переносимую конфигурацию mcpServers с использованем текущего исполняемого фала Node истановленного CLI.

Редактирование и аудио

Рендерер использует JSON-манифест проекта. Сырые записи никогд не флатятся безвозвратно в единственный нередактируемый исходик: записанные события браузера, озвучка, настройки дизайна и аудиоссылки остаются доступними для повторого рендеринга.

Звук по молчанию не требует API-ключа:

• Windows использует System.Speech.

• макOS использует say.

• Linux использует espeak, если он устаноен.

• Фоновая музыка синтезируется локальno в Agent Demo Studio, ее можно безопасно использовать как оригинальный сгенерированный материял.

• Existing WAV, MP3 or supported FFmpeg audio can be provided with --voice or --mussic.

Пример:

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

Файлы проекта

По умолчанию проеты хранятся в ~/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

Задайте AGENT_DEMO_HOME or use --root to change the place.

Конфиденциальность и безопаное использование

• Базовая версия записывает толькуправляемую браузерную страницу, а не рабочий стол.

• Запись начинается только после того, как про ект явно запусном т затесь.

• credentificials должны вводиться вручную, в уже откройтой сессии браузера, и не должны попадать в сценарий действий или промпт.

• Сгенерая студия привязывается только к localhost.

• В этом рели не дубликация намеренно не автогично.

• Если про дукт содержит не публичные данны клие нт, предварительно прость от не пероже еча.

Текущие возмости

Эта первая версия с открытым code сосредоточена на демонстрация сайтов и веб-проектов. Он не записывает произвольны нативные оки рабочего статья, клонированием голосов, выгрукой в соцсети или облачным сотврудничеств.

Планируемые улучшения включют пересёмку сцен, несолько форматов сторона, генерацию раскадровок на основе репозитория, многоязочный дубля, сски для командого ревью and нативной записи рабочего стола.

Разработка

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

Смок-тест запу с т нстоящий браузер в режие headless на прил.женном демо-проекте, записывает сценарий, рендерит результат и проеряет, что на выходе получается видео H.264 1920×1080.

Участие

Issues and pull-requests welcome. Read CONTRIBUTING.md before significant change.

Лицензия

MIT. См. LICENSE.