docs(mcp): show progressive app demo

[hyochan]

Summary

• Replace the MCP + Example App recording with a progressive demo where the app starts empty, loads Premium, then 10 Bulbs and 30 Bulbs, and ends on the Apple sandbox purchase sheet.
• Add a reproducible docs script for regenerating the committed WebM asset.
• Bump the docs video cache key so the updated recording is loaded.

Verification

• bun run --filter @hyodotdev/openiap-docs render:mcp-video
• bun run --filter @hyodotdev/openiap-docs typecheck
• bun audit:docs
• bun run --filter @hyodotdev/openiap-docs build
• bun run --filter @hyodotdev/openiap-docs lint
• Extracted frames at 1s, 9s, 13s, 16s, 19s, and 22s to verify the progressive app state and purchase sheet.

Notes

• The committed WebM is 1600x900, 24 seconds, VP9, and about 504 KB.
• This PR intentionally stays open for review; do not merge yet.

Summary by CodeRabbit

• New Features

  • Added a new documentation script to render a timed animated demo video (WebM) from generated frames.

• Documentation

  • Updated the MCP server guide page to use the latest demo video version.

[coderabbitai]

📝 Walkthrough

Walkthrough

A new Node.js script render-mcp-demo-video.mjs is added that programmatically composes animated SVG frames for an MCP demo, converts them to PNGs via sips, and encodes a VP9 WebM using ffmpeg. A corresponding render:mcp-video npm script is wired in package.json, and the MCP server guide page video source is updated to v=progressive-v1.

Changes

MCP Demo Video Render Script

Layer / File(s)	Summary
Script constants, guards, and SVG/math utilities packages/docs/scripts/render-mcp-demo-video.mjs	Adds macOS platform guard, render constants (1600×900, 15 FPS, 360 frames, 24s), output path resolution, base64 embedding of purchase PNG, command-presence validation, easing/fading math helpers, SVG text escaping, and SVG primitives for text, rounded rectangles, and pill badges.
Animated SVG scene components packages/docs/scripts/render-mcp-demo-video.mjs	Implements composable SVG renderers for the prompt overlay with step timeline, animated step rows with opacity/offset/styling, product card with color and pressed state, phone scene with time-gated store/subscription/products visibility, purchase sheet fade overlay clipped to phone region, and top-level per-frame document assembly with background gradients and header elements.
Frame rendering loop and ffmpeg encoding packages/docs/scripts/render-mcp-demo-video.mjs	Validates sips and ffmpeg binaries, creates output and temp directories, writes and converts each of 360 SVG frames to PNG via sips with stderr capture and per-frame error context, removes any existing output WebM, encodes the PNG sequence into VP9 WebM via ffmpeg, and removes the temp directory in a finally block.
npm script wiring and docs video URL update packages/docs/package.json, packages/docs/src/pages/docs/guides/mcp-server.tsx	Adds the render:mcp-video npm script entry and updates the embedded video src from v=real-device-v9 to v=progressive-v1.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 Frame by frame, the magic grows,
SVG scenes in neat SVG rows,
sips converts each pixel bright,
ffmpeg encodes through the night!
Progressive WebM, pristine and new—
A demo made just for you! 🎬

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'docs(mcp): show progressive app demo' directly and clearly describes the main change: updating the MCP documentation to show a progressive app demonstration, which aligns with the PR's primary objective of replacing the video with a progressive workflow demo.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/fix-mcp-progressive-video

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Code Review

This pull request adds a script to render an SVG-based demo video for the MCP server guide, registers it in package.json, and updates the video source in the documentation. The review feedback suggests improving the script's cross-platform compatibility by adding a macOS platform check (since it relies on the macOS-only sips utility), using fileURLToPath for safe path resolution, and using execSync instead of execFileSync with a shell option for safer command verification.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

Code Review

This pull request introduces a script to render an MCP demo video from SVG frames using sips and ffmpeg, registers it in package.json, and updates the video source in the documentation. The reviewer feedback highlights two key improvements for the rendering script: resolving a one-frame gap in the step animation logic that causes a brief visual flicker, and capturing stderr from the sips command to prevent swallowing error messages and facilitate debugging.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/docs/scripts/render-mcp-demo-video.mjs (1)

523-525: ⚠️ Potential issue | 🟡 Minor

Bind encoded FPS to the configured fps constant.

Line 524 hardcodes fps=30 while line 24 defines fps = 15. The video filter will resample output to 30 fps, decoupling it from the script's frame rate configuration and causing frame rate mismatches.

Suggested patch

-      '-vf',
-      'fps=30,format=yuv420p',
+      '-vf',
+      `fps=${fps},format=yuv420p`,

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/docs/scripts/render-mcp-demo-video.mjs` around lines 523 - 525, The
hardcoded fps=30 in the video filter string does not use the fps constant
defined at line 24 (which is set to 15), causing a frame rate mismatch. Replace
the hardcoded fps=30 value in the video filter command with a reference to the
fps constant variable to ensure the output frame rate matches the script's
configured frame rate setting.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@packages/docs/scripts/render-mcp-demo-video.mjs`:
- Around line 523-525: The hardcoded fps=30 in the video filter string does not
use the fps constant defined at line 24 (which is set to 15), causing a frame
rate mismatch. Replace the hardcoded fps=30 value in the video filter command
with a reference to the fps constant variable to ensure the output frame rate
matches the script's configured frame rate setting.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: cfd18331-36e4-4e73-ad7f-c6dc008c9cfb

📥 Commits

Reviewing files that changed from the base of the PR and between ac4ad20 and 5af956c.

⛔ Files ignored due to path filters (2)

• packages/docs/public/docs/images/openiap-mcp-iphone-purchase.png is excluded by !**/*.png
• packages/docs/public/docs/videos/openiap-mcp-expo-test.webm is excluded by !**/*.webm

📒 Files selected for processing (2)

• packages/docs/scripts/render-mcp-demo-video.mjs
• packages/docs/src/pages/docs/guides/mcp-server.tsx

✅ Files skipped from review due to trivial changes (1)

• packages/docs/src/pages/docs/guides/mcp-server.tsx