Watch

History

Repository files (latest commit first)
Filename	Latest commit message	Latest commit date
Olivier Chafik cce8d5c7a3 docs: add MCP client configuration to example READMEs Add stdio transport configuration snippets near the top of each example README to help users quickly set up the servers in their MCP clients. - Node.js examples use npx with the published npm packages - Python qr-server uses uv with local path - Removed Claude Desktop-specific references from qr-server		2026-01-16 14:00:57 +00:00
..
src	Improve consistency and organization of examples for AI learning	2026-01-13 20:48:02 -06:00
.gitignore	Improve consistency and organization of examples for AI learning	2026-01-13 20:48:02 -06:00
grid-cell.png	feat: add example gallery with auto-generated screenshots (#253 )	2026-01-13 15:12:18 +00:00
main.ts	feat: compile example servers to JavaScript for npm consumption (#259 )	2026-01-14 23:46:17 +00:00
mcp-app.html	feat(examples): Add video-resource-server example	2026-01-06 16:43:46 +00:00
package.json	chore: bump version to 0.4.1 (#282 )	2026-01-15 16:11:53 +00:00
README.md	docs: add MCP client configuration to example READMEs	2026-01-16 14:00:57 +00:00
screenshot.png	feat: add example gallery with auto-generated screenshots (#253 )	2026-01-13 15:12:18 +00:00
server.ts	fix(examples): resolve DIST_DIR path for npm package execution (#277 )	2026-01-15 12:23:13 +00:00
tsconfig.json	Support `safeAreaInsets` + type-checking in video-resource-server	2026-01-07 17:14:20 -06:00
tsconfig.server.json	feat: compile example servers to JavaScript for npm consumption (#259 )	2026-01-14 23:46:17 +00:00
vite.config.ts	feat(examples): Add video-resource-server example	2026-01-06 16:43:46 +00:00

README.md

Video Resource Server

Demonstrates serving binary content (video) via MCP resources using the base64 blob pattern.

MCP Client Configuration

Add to your MCP client configuration (stdio transport):

{
  "mcpServers": {
    "video-resource": {
      "command": "npx",
      "args": [
        "-y",
        "--silent",
        "--registry=https://registry.npmjs.org/",
        "@modelcontextprotocol/server-video-resource",
        "--stdio"
      ]
    }
  }
}

Quick Start

npm install
npm run dev

Tools

play_video - Plays a video loaded via MCP resource
- videoId: Choose from various sizes (bunny-1mb, bunny-5mb, bunny-10mb, etc.)

How It Works

The play_video tool returns a videoUri pointing to an MCP resource
The widget fetches the resource via resources/read
The server fetches the video from CDN and returns it as a base64 blob
The widget decodes the blob and plays it in a <video> element