@tabstack/video-generator

MCP + Skill for Claude Code: Turn any landing page into a premium product launch video with AI-generated animations, beat-synced music, and accurate branding.

URL in, HD video out. Claude Code designs unique animations, generates React code, and renders professional videos — in minutes. No external AI API keys needed!

✨ What Makes This Special

🎨 Claude Code Generates React Code: No external AI APIs needed (no Gemini, no Claude API)
🎯 Accurate Branding: Extracts exact colors and fonts using Playwright browser automation
🎵 Beat-Synchronized: Animations hit perfectly on music beats using automatic beat detection
💎 Modern UI: Glassmorphism, animated gradients, glow effects
🚀 MCP + Skill Architecture: Claude Code orchestrates tools and writes creative code

🎬 How It Works

You say: "Generate a video for https://stripe.com"

Claude Code:

Calls extract_page_data → TabStack + Playwright get content, colors, fonts
Calls generate_audio → WaveSpeed creates music + beat times
Generates React/Remotion code itself with beat-synced animations
Calls render_video → Remotion renders to HD MP4

Result: 12-15 second video with accurate branding and professional animations!

🚀 Quick Start (5 Minutes)

Step 1: Install Prerequisites

Node.js v18+:

node --version   # Should show v18 or higher

Don't have it? Download from nodejs.org

FFmpeg (required for video rendering):

ffmpeg -version   # Check if installed

Install FFmpeg:

OS	Command
macOS	`brew install ffmpeg`
Ubuntu/Debian	`sudo apt install ffmpeg`
Windows	`winget install ffmpeg`

Step 2: Get API Keys (Free Tiers)

Required:

TabStack API Key - Extract page content and branding
- Go to tabstack.ai
- Sign up → Get API key
- Free tier available

Optional (Recommended):

WaveSpeed API Key - Generate AI music with beat sync
- Go to wavespeed.ai
- Sign up → Get API key
- Free tier available
- Without this, videos render silently or with placeholder audio

✨ No Gemini or Claude API keys needed! Claude Code generates video code directly using its built-in AI.

Step 3: Install MCP Server

Add the MCP server to Claude Code:

claude mcp add tabstack-video \
  -e TABSTACK_API_KEY=your_tabstack_key_here \
  -e WAVESPEED_API_KEY=your_wavespeed_key_here \
  -- npx @tabstack/video-generator

Replace your_tabstack_key_here with your actual TabStack API key. (WaveSpeed key is optional but recommended for AI music)

Step 4: Restart Claude Code

Important: MCP servers only load on startup.

Close all Claude Code windows completely
Quit the Claude Code application
Open Claude Code again
Verify MCP server is loaded (check status bar or settings)

Step 5: Generate Your First Video!

In Claude Code, just say:

Generate a video for https://stripe.com

Or with AI music:

Generate a video for https://vercel.com with AI music

That's it! Claude Code will:

Extract page data and branding
Generate AI music with beat detection
Write React/Remotion code with beat-synced animations
Render the video to out/stripe-video.mp4

🎯 Example Prompts

"Generate a video for https://linear.app"

"Create a product launch video for https://notion.so with AI music"

"Make a video for https://supabase.com with dramatic animations"

"Generate a video for https://resend.com and sync it to the beat"

Claude Code understands natural language and will orchestrate the entire workflow!

🛠️ Verify Setup

Run the setup wizard to check your installation:

npx @tabstack/video-generator --setup

This checks for:

✅ Node.js v18+
✅ FFmpeg installation
✅ TABSTACK_API_KEY
⚠️ WAVESPEED_API_KEY (optional)

🏗️ Architecture

MCP Tools (Server Provides)

extract_page_data
- TabStack API: Extracts title, features, pricing from URL
- Playwright: Launches headless Chrome to get computed CSS colors and fonts
- Returns: Complete page data + accurate branding
generate_audio (optional)
- WaveSpeed: Generates AI music from prompt
- Beat detection: Uses music-tempo library to analyze beats
- Returns: MP3 file + BPM + beat times in milliseconds + beat frames @ 30fps
render_video
- Takes: React/Remotion code generated by Claude Code
- Remotion: Renders frames + encodes to MP4 with FFmpeg
- Returns: HD video (1920x1080, 30fps)

Skill (Teaches Claude Code)

The .skills/generate-video.md file teaches Claude Code:

✅ Workflow: extract → generate audio → write React code → render
✅ Design best practices: glassmorphism, gradients, glow effects
✅ Beat synchronization: pulse on beats, smooth waves, scene timing
✅ Modern UI patterns: proper typography, spacing, animations
✅ Quality checklist: colors, fonts, animations, readability

📊 What Gets Generated

Video Specs

Resolution: 1920x1080 (Full HD)
Frame Rate: 30fps
Duration: 12-15 seconds
Format: H.264 MP4
Audio: AI-generated music (if WaveSpeed key provided)

Design Quality

✅ Exact brand colors (from Playwright CSS extraction)
✅ Exact brand fonts (from computed styles)
✅ Modern UI (glassmorphism, gradients, glows, shadows)
✅ Beat-synced animations (pulse, transitions, entrances)
✅ Professional typography (readable sizes, proper hierarchy)
✅ Smooth animations (spring physics, interpolate)

🎵 Beat Synchronization

One of the standout features is automatic beat synchronization:

// Generated code includes beat detection
const beatFrames = [0, 14, 28, 42, 56, 70, ...]; // @ 30fps

// Animations hit on beats
const isBeat = beatFrames.some(b => Math.abs(frame - b) < 2);
transform: `scale(${isBeat ? 1.1 : 1})`  // Pulse on beat

Benefits:

Animations feel professional and intentional
Scene transitions align with music
Feature cards enter on beats
CTA buttons pulse with rhythm

🐛 Troubleshooting

`ffmpeg: command not found`

Fix: Install FFmpeg

# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt install ffmpeg

# Windows
winget install ffmpeg

MCP Server Not Working

Fix: Restart Claude Code completely

Close all windows
Quit application
Open Claude Code fresh
Try: "Generate a video for https://stripe.com"

Video Has No Music

Fix: Add WaveSpeed API key

claude mcp add tabstack-video \
  -e TABSTACK_API_KEY=your_key \
  -e WAVESPEED_API_KEY=your_wavespeed_key \
  -- npx @tabstack/video-generator

Then restart Claude Code.

`TABSTACK_API_KEY not set`

Fix: Get API key and add to MCP server

Get key at tabstack.ai
Add with claude mcp add command (see Step 3)
Restart Claude Code

Colors Look Wrong

The tool uses Playwright browser automation to extract exact CSS colors. If colors still look wrong:

Check the website has clear branding (CTA buttons, headings)
Try a different page with more obvious brand colors
Report issues at GitHub with the URL

📚 Learn More

HOW-IT-WORKS.md - Technical deep-dive with code examples
ARCHITECTURE.md - MCP + Skill architecture diagrams
.skills/generate-video.md - Complete Skill guide

🎯 Best Practices

For Best Results:

Use clean, professional landing pages
Sites with clear value propositions work best
Pages with CTA buttons help color extraction
Well-designed sites produce better videos

Works Great With:

SaaS product landing pages (Stripe, Vercel, Linear)
Marketing websites (clear messaging)
Product launch pages

May Struggle With:

E-commerce sites with many products
Complex multi-page sites
Sites with poor structure or minimal content

💎 What Makes This Different

Traditional Approach:

User → External AI API (Gemini/Claude) → Truncated code → Poor quality

MCP + Skill Approach:

User → Claude Code → MCP tools + Self-generated code → Premium video

Benefits:

✅ Claude Code sees full context (no token limits)
✅ No code truncation (can generate 500+ lines)
✅ Follows Skill best practices consistently
✅ Beat synchronization works perfectly
✅ No external AI API keys needed (only data extraction)
✅ Can iterate and refine based on results

📖 Example Workflow

User: "Generate a video for https://stripe.com with AI music"

Claude Code:
  [1] Calling extract_page_data...
      → TabStack: {title: "Stripe", features: [...]}
      → Playwright: {colors: "#635BFF", fonts: "Söhne"}

  [2] Calling generate_audio...
      → WaveSpeed: Generated music
      → Beat detection: 128 BPM, beats at [0, 468, 937, ...]

  [3] Generating React/Remotion code...
      → Writing premium UI with glassmorphism
      → Syncing animations to beat frames [0, 14, 28, ...]
      → Using exact brand colors and fonts

  [4] Calling render_video...
      → Remotion: Rendering 360 frames @ 30fps
      → FFmpeg: Encoding to H.264 MP4

✅ Done! Video saved to: out/stripe-video.mp4

🤝 Contributing

Found a bug? Have a feature request?

Issues: GitHub Issues
PRs: Always welcome!

📄 License

MIT - Use freely for personal and commercial projects!

🎉 Credits

Built with:

TabStack - Page data extraction API
Playwright - Browser automation for color/font extraction
WaveSpeed - AI music generation (Minimax Music 2.5)
music-tempo - Beat detection library
Remotion - React-based video rendering
Claude Code - AI-powered code generation

Ready to create amazing videos? Follow the Quick Start above! 🚀

Name		Name	Last commit message	Last commit date
Latest commit History 26 Commits
.agents/skills/remotion-best-practices		.agents/skills/remotion-best-practices
.archive		.archive
.claude/skills		.claude/skills
.cursor/skills		.cursor/skills
.skills		.skills
public		public
skill		skill
src		src
.gitignore		.gitignore
.mcp.json		.mcp.json
.npmignore		.npmignore
ARCHITECTURE.md		ARCHITECTURE.md
HOW-IT-WORKS.md		HOW-IT-WORKS.md
PULL_REQUESTS.md		PULL_REQUESTS.md
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
test-workflow.js		test-workflow.js
tsconfig.json		tsconfig.json

Bhonar/tabstack-video-generator

Folders and files

Latest commit

History

Repository files navigation