How I built a demo generator with GitLab Duo Agent Platform
Click-through demos communicate product value more effectively than documentation, videos, or live environments, but traditionally required days of manual work. The author built a GitLab Duo Agent Platform workflow that turns screenshots and optional context into a narrated, branded HTML demo, opens a merge request, and publishes the result to GitLab Pages. The approach makes demos repeatable, reviewable, versioned, and easier to update when the product changes. ## Why Click-Through Demos Work - Users understand features faster by seeing them in action. - Click-through demos let viewers control the pace without requiring: - Access to a live product environment - Expertise navigating the product - External video-editing tools - Demos are reusable links that can be shared consistently through channels such as the GitLab Demo Hub. ## From Virtual Machines to Agents The author describes three stages in demo creation: - **Virtual machines:** Product and demo content were packaged into VMs, later hosted on centralized ESX servers. - **External SaaS tools:** Demo platforms added analytics and convenience but remained manual and dependent on vendor infrastructure. - **Agentic workflows:** Agents generate demos from prompts and deploy them within the same project, removing vendor dependency. Each stage improved accessibility, but agents make demos more sustainable by reducing repetitive work and simplifying updates. ## The Demo Creation Workflow A complete demo typically requires: - Learning the feature through documentation, issues, Slack, and discussions with product and engineering teams. - Developing a customer-focused story and scenario. - Creating a project and realistic demo data. - Capturing screenshots or video clips. - Writing step-by-step narration. - Assembling the demo in a clickable format. - Gathering stakeholder feedback and incorporating revisions. - Publishing to GitLab Docs, the Demo Hub, or other destinations. - Announcing the demo internally and externally. These activities can take days, and product changes may force the process to restart. The agent automates much of the predictable work while leaving feature selection, quality review, and final approval to humans. ## How the Click-Through Demo Generator Works - Screenshots are placed in a project folder. - An optional `context.md` file provides feature background. - An issue comment triggers the workflow. - The agent: - Renames and reorders screenshots - Writes the narration - Applies a branded HTML template - Creates a merge request - After review and merging, the demo is automatically published to GitLab Pages. - Follow-up changes can be requested from the agent. A Custom Flow invokes a custom tool that assembles the HTML, places narration panels over screenshots, and posts the merge request link back to the issue. ## Outcome-Focused Narration A project skill guides the agent’s writing so the demo explains customer value rather than merely walking through the interface. The required structure has three acts: - Open with the customer’s problem. - Show the product solving that problem step by step. - Close by explaining the value the customer gains. Localization can be added by creating a language-specific skill, allowing future demos to be translated automatically. ## Automated Publishing Publishing is also handled through an agent skill: - A demo is tagged as ready for production in the development gallery. - The agent enters the Demo Hub project. - It writes a short description, adds the current date, applies a “new” tag, and opens a merge request for the demo card. - A human still reviews and merges the request before the demo goes live. ## Demos as Code Because a click-through demo consists primarily of HTML, screenshots, and configuration, it can live in a GitLab repository rather than an isolated external tool. This enables teams to: - Review demos through merge requests. - Improve them collaboratively. - Track changes and versions over time. - Keep demos alongside the workflows that generate and publish them. The practical recommendation is to identify repetitive, well-defined work in your own organization and use GitLab Duo Agent Platform to automate its groundwork, while retaining human control over strategy, review, and release.
Read original(opens in new tab)