Your Product Lives in a Chat Now. Here's How to Demo It.

If you've built an MCP server, a ChatGPT app, a Claude connector or an agent skill, you've probably hit this problem: your product doesn't have a homepage moment anymore. It shows up halfway through someone else's conversation, inside someone else's UI, as a tool call and a reply.

That's a great place for a product to live. It's a hard place to show off.

A screenshot of a chat shows one frozen moment and loses the part that matters: someone asks for something, the assistant calls your tool and a useful answer appears. A screen recording of a live session captures all of that, plus a 30-second spinner, a retried tool call, a typo in the prompt and a sidebar full of your private project names.

So we built a skill for it. chat-replay turns a real assistant session into a short, clean demo video of your tool in a Claude-style or Codex-style chat. Here's the 24-second sample it renders from the bundled example:

The user types a request. The assistant thinks for "9s", calls two tools, streams a short answer and shows a results table. The video then zooms in on the table so the viewer knows where to look. Captions walk through each step. The whole thing runs in under half a minute.

Why not just record your screen?

Agent sessions are slow and unpredictable, and both of those are bad on video.

• Waiting kills a demo. Real tool calls take seconds, sometimes minutes. Viewers scroll away long before your result appears.
• Live runs don't repeat. Re-record to fix a typo and you get a different answer, a different order or a timeout.
• Recordings leak. Account names, file paths, other threads in the sidebar and customer data all end up in the frame.
• Edits are expensive. Changing one word in a recording means recording it again.

chat-replay rebuilds the session instead. You give it the transcript; it cleans it to the essentials and renders it with HyperFrames on a fixed timeline: typing, thinking, tool cards with spinners, streamed replies, scrolling, captions and zooms. Waits are short, the output is identical every time, and an edit means changing a JSON file and rebuilding.

Honesty is built in, not bolted on

A replay looks like real use, so it has to be an honest edit of a real session. If your demo oversells what your MCP server does, the first person who installs it will notice. The skill enforces this:

• Every beat cites the transcript. Each user message, tool call, reply and widget in the video points to the transcript turns it came from. The generator refuses to build a beat that doesn't.
• Allowed edits are the boring ones. Fixing typos, shortening prompts to their intent, dropping failed calls and dead ends, merging a retry into the call that succeeded, tightening wordy replies and compressing wait time.
• Not allowed: changing what a tool returned, reordering cause and effect, adding steps that didn't happen or showing a feature that doesn't exist today.
• Real time stays visible. If the assistant really thought for nine seconds, the video still reads "Thought for 9s", even though it spends about a second on it.
• The disclosure stays on. The top bar says "Recreated from a real session" by default. If you turn it off, the skill asks you to say so in your post copy instead.
• No vendor logos. The skins are recognizable chat layouts, not copies of anyone's brand assets.

Before anything renders, the agent shows you a SCRIPT.md with each beat, the turns it came from and a Changes list explaining what was cut, merged or shortened and why. You approve the script; then it builds.

How it works

You run it from your existing agent (Claude Code, Codex or another host that supports Agent Skills):

1. Brief. Pick a skin (claude or codex), the destination and whether you want captions. The agent asks only what's missing and suggests a default for each.
2. Source. Save the conversation as a numbered transcript. Use a demo account with fictional or public data, and strip anything private first.
3. Clean up. The agent writes replay.json and SCRIPT.md, then waits for your approval.
4. Widgets. If your tool returns UI (an MCP App or Apps SDK view, a table, a chart), a screenshot of it can appear in the chat as a card.
5. Build, check and preview. The generator builds a HyperFrames project; the agent runs checks, looks at snapshot frames for anything private or misplaced, and gives you a preview URL.
6. Render. After you approve, it renders an MP4 and gives you a contact sheet of frames taken from the final file.

Nothing gets published, scheduled or deployed. The MP4 is a draft until you decide to use it. The project lives in its own folder outside your product repo, and the skill adds no dependencies to your codebase.

Where founders can use the video

If you're promoting a product that agents use, this is the kind of clip that goes in:

• Marketplace and directory listings. ChatGPT apps, Claude connectors, MCP registries and skill directories are crowded. A 20-second video of the real workflow beats a paragraph of capabilities.
• Your README. Developers deciding whether to install your MCP server want to see the first useful call, not a feature list.
• Landing pages and docs. Show the "ask in plain English, get a real answer" moment right next to the install instructions.
• Launch posts on X, LinkedIn or Product Hunt. Short, captioned and silent-friendly, so it works in a feed with the sound off.

We went through this ourselves when we launched TVFoodMaps in ChatGPT: the product's best moment happens inside the chat, and that's what people need to see.

chat-replay pairs well with two other skills in the same collection. mcp-ify helps you design and build customer MCP tools for an existing SaaS. agent-ready audits what agents can already do with your product and plans how to get it into the Claude and ChatGPT marketplaces. Build the tools, get listed, then show the demo.

Try it

With Node.js installed, run this from any project:

npx skills add apsquared/promotion-agent --skill chat-replay

Add --agent codex to target Codex, or --global to make it available everywhere. Then paste or attach a conversation and ask:

Use $chat-replay to turn this conversation into a demo video of my MCP server in Claude.

Want to see the output before using your own transcript? The skill ships with the fictional "Example Desk" session behind the video above, so you can render it first and compare.

What you'll need: Node.js, an internet connection (HyperFrames runs through npx and rendering fetches fonts) and FFmpeg for the final render. The agent asks before installing FFmpeg. No HeyGen account, API key or paid credits are required.

Current limits: two light skins (claude and codex), 16:9 only, widgets are images rather than live HTML, and no narration or music. You can add audio to the HyperFrames project afterward. Assistant replies should stay short, well under 140 words per beat, or they take too long to stream on screen.

chat-replay is free, MIT licensed and part of promotion-agent, our open source marketing workflow for founders who build with AI agents. You don't need promotion-agent to use the skill, though.

If you make a demo with it, we'd love to see it. Share a link, or tell us what got in the way, through GitHub issues or on X at @apsquareddev.