{"id":51307656,"url":"https://github.com/block/plug-and-play-template","last_synced_at":"2026-07-01T01:03:01.730Z","repository":{"id":337498863,"uuid":"1150890871","full_name":"block/plug-and-play-template","owner":"block","description":"Video template for devrel team plug and plays","archived":false,"fork":false,"pushed_at":"2026-06-06T17:53:13.000Z","size":59413,"stargazers_count":1,"open_issues_count":4,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-06T19:20:25.314Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/block.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":"GOVERNANCE.md","roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-05T20:12:05.000Z","updated_at":"2026-03-04T03:32:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"5188f037-3ba9-4ca3-90d0-212091584cc6","html_url":"https://github.com/block/plug-and-play-template","commit_stats":null,"previous_names":["block/plug-and-play-template"],"tags_count":0,"template":false,"template_full_name":"block/oss-project-template","purl":"pkg:github/block/plug-and-play-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/block%2Fplug-and-play-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/block%2Fplug-and-play-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/block%2Fplug-and-play-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/block%2Fplug-and-play-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/block","download_url":"https://codeload.github.com/block/plug-and-play-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/block%2Fplug-and-play-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34060037,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-08T02:00:07.615Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-07-01T01:03:00.847Z","updated_at":"2026-07-01T01:03:01.715Z","avatar_url":"https://github.com/block.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Plug \u0026 Play Video Template\n\nCreate consistent, branded Plug \u0026 Play videos for MCP extension demos using Remotion + Goose.\n\n---\n\n## 🎬 What This Is\n\nThis repo is the official Plug \u0026 Play video template.\n\nIt gives you:\n\n- 🔒 Locked branding (colors, fonts, layout, animation)\n- 🧱 Reusable scene structure\n- 🧠 Goose-powered video generation with audio syncing\n- 🎙 Automatic captions via Whisper\n- 🔁 Template vs Current preview toggle\n\nYou never edit the template.  \nYou only create configs.\n\n---\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n1. **Goose** with Skills and Developer extensions enabled\n2. **ffmpeg** (for audio processing):\n   ```bash\n   # macOS\n   brew install ffmpeg\n   \n   # Linux\n   sudo apt-get install ffmpeg\n   ```\n3. **Whisper** (for captions):\n   ```bash\n   pip3 install openai-whisper\n   ```\n4. Install Remotion skill in Goose:\n   ```bash\n   npx skills add remotion-dev/skills\n   ```\n5. Clone this repo:\n   ```bash\n   git clone https://github.com/block/plug-and-play-template\n   cd plug-and-play-template\n   npm install\n   ```\n\n---\n\n## ▶ Run the Video Studio\n\n```bash\nnpm start\n```\n\nThis launches the Remotion desktop preview.\n\nYou will see two videos:\n\n- **PlugAndPlay-Template** → example reference\n- **PlugAndPlay-Current** → your active video\n\nGoose automatically updates the Current video.\n\n---\n\n## 🤖 Create a Video with Goose\n\nOpen Goose and use the Plug \u0026 Play recipe.\n\nSay something like:\n\n\u003e Create a Plug \u0026 Play video\n\nGoose will collect:\n\n- Extension slug (e.g., `councilOfMine`)\n- MCP server name (e.g., `Council of Mine`)\n- Badge line (e.g., `multi-perspective reasoning`)\n- Hook text (2 lines)\n- Setup type (built-in, STDIO, STDIO + env vars, HTTP, HTTP + headers)\n- Explainer lines (optional)\n- Prompt text\n- Results type (bullets, screen recording, or custom visuals)\n- Summary type (none, bullets, or custom visuals)\n- Voiceover audio file (optional, can add later)\n\nThen Goose generates your config, creates any custom visuals, and activates it as Current.\n\nNo manual editing required.\n\n---\n\n## 📁 Project Structure\n\n```\nplug-and-play-template/\n├── src/\n│   ├── template/           🔒 LOCKED — never edit\n│   │   ├── components/     # Shared UI (MovingDots, GradientBorder, PlugAndPlayBar, Captions)\n│   │   ├── sequences/      # Scene components + routers\n│   │   ├── styles.ts       # Colors, dimensions, timing\n│   │   └── config.ts       # TypeScript types + example config\n│   │\n│   ├── videos/             📝 Your generated videos\n│   │   ├── current.ts      ← Active pointer\n│   │   └── \u003cyour-video\u003e/\n│   │       ├── config.ts       # Video configuration\n│   │       ├── captions.ts     # Auto-generated captions\n│   │       └── sequences/      # Custom visual components\n│   │\n│   └── Root.tsx\n│\n├── public/\n│   ├── template/           # Template assets\n│   └── \u003cyour-video\u003e/       # Your video assets (audio, recordings)\n│\n└── package.json\n```\n\n---\n\n## 🎥 Video Scene Structure\n\nEach Plug \u0026 Play video follows this sequence:\n\n| Scene | Purpose |\n|-------|---------|\n| Hook | Attention-grabbing opener (2 lines) |\n| Plug \u0026 Play | Brand transition with badge line |\n| Setup | Extension installation (5 types supported) |\n| Explainer | Optional teaching points (1-4 lines) |\n| Let's Play | Transition to demo |\n| Prompt | Typewriter effect showing the prompt |\n| Results | Bullets, screen recording, or custom visuals |\n| Summary | Optional wrap-up (bullets or custom visuals) |\n| End | Call to action with docs URL |\n\n---\n\n## 🎙 Voiceover \u0026 Captions Workflow\n\n### Adding Audio\n\n1. Record your voiceover\n2. Enhance it at [Adobe Podcast](https://podcast.adobe.com/enhance)\n3. Provide the audio file to Goose\n\n### What Goose Does Automatically\n\n1. Runs Whisper to generate word-level timestamps\n2. Trims trailing silence from audio\n3. Auto-generates karaoke-style captions\n4. Syncs video scenes to audio cues\n\n### Audio Sync Cues\n\nGoose looks for these phrases to align scenes:\n\n- \"Let's play\" / \"Now let's play\" → LetsPlayScene\n- Your prompt text → PromptScene\n- \"To get started\" / \"visit block.github.io/goose\" → EndScene\n\n### Collaborative Syncing\n\nIf auto-sync can't find all cues, Goose will:\n\n1. Show you a timestamped transcript\n2. Ask you to identify scene boundaries\n3. Let you correct any misheard words\n4. Iterate until timing is perfect\n\n---\n\n## 🛠 Commands\n\n```bash\nnpm start              # Launch Remotion studio\nnpm install            # Install dependencies\nnpx remotion render    # Render video (or let Goose handle it)\n```\n\n---\n\n## 🧠 Config Format\n\n```ts\ninterface VideoConfig {\n  hookText: string;\n  mcpServerName: string;\n  badgeLine: string;\n\n  setup: SetupConfig;  // Union type: builtin | stdio | stdio_with_env | http | http_with_headers\n\n  explainerLines?: string[];\n\n  promptText: string;\n\n  results: ResultConfig;  // Union type: bullets | recording | visuals\n\n  summary?: SummaryConfig;  // Union type: none | bullets | visuals\n\n  captionsData?: Caption[];\n  audioSrc?: string;\n\n  docsUrl: string;\n  tutorialTitle: string;\n}\n```\n\n### Setup Types\n\n```ts\ntype SetupConfig =\n  | { type: \"builtin\"; extensionName: string; extensionDescription: string }\n  | { type: \"stdio\"; extensionName: string; extensionCommand: string }\n  | { type: \"stdio_with_env\"; extensionName: string; extensionCommand: string; envVars: NameValuePair[] }\n  | { type: \"http\"; extensionName: string; endpoint: string }\n  | { type: \"http_with_headers\"; extensionName: string; endpoint: string; requestHeaders: NameValuePair[] };\n```\n\n### Results Types\n\n```ts\ntype ResultConfig =\n  | { type: \"bullets\"; bullets: string[] }\n  | { type: \"recording\"; recordingPath: string; durationInSeconds?: number }\n  | { type: \"visuals\"; description?: string; componentName?: string };\n```\n\n### Summary Types\n\n```ts\ntype SummaryConfig =\n  | { type: \"none\" }\n  | { type: \"bullets\"; lines: string[]; title?: string }\n  | { type: \"visuals\"; description?: string; componentName?: string };\n```\n\nYou don't edit this manually — Goose writes it.\n\n---\n\n## 🎨 Custom Visuals\n\nWhen Goose creates custom visuals for Results or Summary, they follow this structure:\n\n- Wrapped in `\u003cGradientBorder\u003e` (animated teal/orange border)\n- Include `\u003cVisibleMovingDots /\u003e` background\n- Include `\u003cPlugAndPlayBar /\u003e` at bottom\n- Use colors from `template/styles.ts`\n\nCustom visuals are placed in:\n```\nsrc/videos/\u003cyour-video\u003e/sequences/\u003cComponentName\u003e.tsx\n```\n\nAnd registered in the appropriate router (`ResultsRouter.tsx` or `SummaryRouter.tsx`).\n\n---\n\n## 🔒 Template Rules\n\n**Never modify:**\n```\nsrc/template/\n```\n\n**Only create/edit:**\n```\nsrc/videos/\u003cyour-video\u003e/\npublic/\u003cyour-video\u003e/\n```\n\nTemplate styling is locked to preserve brand consistency.\n\n---\n---\n\n## 🤝 Contributing Reusable Sequences\n\nCreated a custom visual that could benefit the whole team?\n\n1. Open a PR moving your sequence from `src/videos/\u003cyour-video\u003e/sequences/` to `src/template/sequences/`\n2. Update the relevant router (`ResultsRouter.tsx` or `SummaryRouter.tsx`) to include it as a template option\n\nTemplate sequences should be generic and reusable across multiple videos.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblock%2Fplug-and-play-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblock%2Fplug-and-play-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblock%2Fplug-and-play-template/lists"}