Add two MCP focused Remotion videos: client setup and agent in task - #167
Conversation
One video walks a client from the config block in plugin/mcp.json through the browser authorization to the 13 registered tools. The other shows the connection at work: a search_skills call against the team library, the note a teammate saved, and the drafted answer. Every fact on screen is read out of this repository, so the videos cannot drift from the product without the source drifting first. The renders stay out of the commit: public/launch is gitignored and the two scripts regenerate them.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important
This repository does not receive automatic reviews because it has fewer than 10 stars. ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 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. Comment |
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8a7955aaab
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| ' "$schema": "https://agent-plugins.org/schemas/1.0.0/mcp.schema.json",', | ||
| ' "mcpServers": {', | ||
| ' "skills-board": {', | ||
| ' "type": "streamable-http",', |
There was a problem hiding this comment.
When a viewer follows the video's “Paste the config” instruction for the subsequently shown Claude Code flow—or for Cursor—they receive the portable agent-plugin descriptor rather than a valid client config. The repository's Claude manifest (plugin/.mcp.json) and the manual configuration generated in app/(app)/connect/page.tsx use "type": "http", while Claude Code's documented setup in components/mcp-setup-guide.tsx uses claude mcp add --transport http; the shown "streamable-http" value belongs to plugin/mcp.json's plugin schema. Use the client-facing config or show the plugin installation flow so the advertised setup can actually connect.
Useful? React with 👍 / 👎.
| <span style={{ marginLeft: 10, fontSize: 21, color: ink.mutedForeground }}> | ||
| Saved by{" "} | ||
| <span style={{ color: ink.foreground }}>{hit.savedBy}</span> in {hit.team} | ||
| </span> |
There was a problem hiding this comment.
In the depicted search_skills flow, this card presents “Saved by Marta R.” as part of the returned hit, but listUserSkills() in lib/db/queries.ts selects neither createdBy nor an added-by name, and the route serializes that result directly. Consequently the MCP response can provide the organization and note but cannot identify the teammate who saved the skill, so the video misrepresents the tool contract; either omit this attribution or expose it through the actual query and response.
Useful? React with 👍 / 👎.
|
b9196dc, on maintainer feedback: the caption under the tool grid (Nine read. Four write, once skills:write is granted.) was superfluous and is gone. The scene now ends on the grid itself. Video re-rendered and re-delivered to public/launch/ locally; OCR on the DONE frame confirms the 13 tool names remain and the caption is absent. tsc 0 errors. |
|
Second maintainer note addressed: the opening line (Your team's AI skills are not in your agent.) read as confusing, so the hook is now a direct imperative: Give your agent your team's AI skills. Accent moved to team's. Re-rendered, frame inspected visually, delivered to public/launch/ locally. tsc 0 errors. |
The dark palette is gone. The client window is the light card the setup video already uses for mcp.json: hairline border, three dots on the bar, paper background, dark mono, the green from the theme on the tool call and the confirmation. The two scenes are one. Ask and apply became a single session in a single window: the task, the call, the skill that comes back and stays on screen, the note it carries, the answer. Nothing cuts away, nothing clears. The column is measured, so the one scroll of the video parks the call at the top edge with the returned skill whole underneath it. The task and the call are typed a character at a time with a caret that blinks while the session waits, and the answer types back faster. The returned skill fades in rather than typing, because the library sent it.
|
Reworked the agent video ( 1. Too dark. The dark palette is gone. The whole video now runs on the light stage of the setup video: the cream page, and the client window built as the same card the 2. The two scenes read as two cases. 3. Typewriter. The prompt types a character at a time, with a caret that blinks while the session waits and holds solid while it types. The tool call types as well, and the answer types back faster (0.7 frames per character, against 1.8 on the prompt). The returned skill card fades and slides in instead, since the library sent it rather than someone typing it. Copy is unchanged from Beats, in order (30 fps, 1136 frames, 37.9s):
Render. Checks. The setup video, its scenes, and the product demo were not touched. |
|
e951f55 adds a third composition, skillsboard-mcp-agent-spot: an ad style cut of the agent story built with the maintainer over several review rounds. 33 seconds, ten beats, hard cuts, no camera movement. Typographic billboards alternate with enlarged console fragments; a library beat establishes the team library with five example skills before the release notes example runs; the central beat shows a whole client window styled after Claude Desktop with the MCP tool block; the skill file beat shows SKILL.md instructions; the thesis beat uses the canonical product definition. Render script not added yet on purpose: the spot is delivered locally while it is still being iterated. The typewriter agent video and the setup video are unchanged. |
|
Approved by the maintainer and committed: the card beat and the skill file beat are now one continuous CardOpensBeat. The skill name is the shared element and travels on a single interpolated trajectory from card title to the green SKILL.md heading while the card chrome dissolves; the green accent hands over from the saved-by marker to the file rule. The skill body grew from two to five instructions, the two key ones at full visual weight. The maintainer also set this spot language as the house style for all future videos; noted in the internal style rules. |
1 participant
What
Two new Remotion compositions, both 1920x1080 at 30fps and muted, plus the scripts that render them and a poster still for each.
skillsboard-mcp-setup(1022 frames, 34.07s) walks a client from the config block to the tool list: the hook, the block fromplugin/mcp.jsonwith the production endpoint highlighted, the Skills Board authorization screen withskills:readandskills:write, the 13 registered tools with the four write ones marked, and the end card.skillsboard-mcp-agent(1066 frames, 35.53s) shows the connection at work: a real task, asearch_skillscall against the team library, the skill a teammate saved with its GitHub source, the note that came with it, the drafted answer, and the same end card.The new files live in
remotion/mcp/. The existing compositions andremotion/product-demo/content.tsare untouched.remotion/root.tsxgains the two registrations andpackage.jsongains four scripts, on the same h264, crf 18, yuv420p, swangle and muted flags the launch renders already use.Why
The MCP path is the front door. On the signups Tommy read most recently, four in ten arrive MCP first. The launch videos cover saving and finding a skill in the web app, and neither of them shows a client connecting or an agent using what the team saved. These two fill that gap, cut for X and LinkedIn.
Every fact on screen is read out of this repository:
plugin/mcp.jsonline for line, including"type": "streamable-http"andhttps://www.skillsboard.sh/api/mcpapp/api/[transport]/route.tsregisters and/connectlists, and the four markedwriteare the four that checkskills:write/connectcopyOnly the example team, the teammate, and the example skill are invented, and none of them carries a product claim.
Checks
tsc --noEmiton typescript 7.0.2: 0 errorsnode --test tests/*.test.mjs: 551 passing, 0 failing, 0 skippedskills-board-mcp-setup.mp41022 frames, 34.067s, 1,661,169 bytes;skills-board-mcp-agent.mp41066 frames, 35.534s, 3,183,124 bytes; both 1920x1080 h264 at 30fps. Posters: 76,096 bytes and 62,605 bytes.skillsboard.sh/api/mcpreads on three of them,the agent-native skills registry for teamson both end cards, and the tool names read cleanly, all thirteen on one frame. No frame carries the endorsement verb the marketing context bans for a team's own skills, and no frame carries an em dash or an en dash.Renders
public/launch/is gitignored, so nothing rendered is part of this commit. The four files are already on Tommy's disk underpublic/launch/: the two mp4s and the two posters. Anyone else regenerates them withpnpm video:render:mcp-setup,pnpm video:render:mcp-agent,pnpm video:still:mcp-setup-posterandpnpm video:still:mcp-agent-poster.