YouTube MCP Apps

What it does

YouTube MCP Apps is a reference implementation demonstrating how to build MCP Apps with custom UI components in VS Code Insiders. It ships an MCP server with three YouTube Data API tools and two interactive UI apps — video-render and channel-profile — bundled as single-file HTML apps via Vite. Ideal for developers learning how to create, serve, and consume MCP Apps.

Key features

• video-render app — renders a YouTube video card with title, description, thumbnail, and direct links
• channel-profile app — displays channel stats (subscribers, views, thumbnails) alongside the latest video
• Three YouTube tools — get-video (search by query), get-channel (channel info + stats), get-latest-video (latest upload from a channel)
• HTTP transport — server runs at http://localhost:3001/mcp, easily consumable by VS Code's MCP client
• Vite single-file bundling — each UI app compiles to a self-contained HTML file via vite-plugin-singlefile

Installation

VS Code Insiders: Add to your .vscode/mcp.json:

{
  "servers": {
    "youtube-mcp": {
      "url": "http://localhost:3001/mcp"
    }
  }
}

Then clone the repo, add your YOUTUBE_API_KEY to .env, run npm run build && npm run serve.

Claude Desktop (from source):

{
  "mcpServers": {
    "youtube-mcp": {
      "command": "npx",
      "args": ["tsx", "/path/to/mcp-apps/src/server.ts"]
    }
  }
}

Supported hosts

Primarily VS Code Insiders (MCP Apps UI rendering). Also works as a plain MCP server in Claude Desktop.