{"slug": "bitflix-mcp-apps-example-application-for-video", "title": "Bitflix – MCP Apps Example Application for Video", "summary": "Bitmovin released Bitflix, a fictional streaming network reference implementation built as an MCP App on the Skybridge React framework, letting users browse, get recommendations and watch video by talking to ChatGPT or Claude. The app exposes five tools — browse_catalog, get_recommendations, whats_live, play_title and run_diagnostics — each bound to a view via registerTool({ view: { component } }), with playback handled by the Bitmovin Player and a Diagnostics view probing host sandbox support for MSE, EME/DRM key systems (Widevine, PlayReady, FairPlay, ClearKey), Web Workers, WebAssembly, fullscreen, Picture-in-Picture, casting and autoplay. All streams are public test assets: VoD plays HLS and DASH 'Art of Motion' content on cdn.bitmovin.com, and live plays the DASH-IF livesim2 stream, with the widget sandboxed by a VIEW_CSP allow-list in src/server.ts.", "body_md": "Bitflix is a fictional streaming network (sports · news · films · originals) shipped as an\n[MCP App](https://modelcontextprotocol.io).\n\nYou open it, browse it, get recommendations, and watch, all by talking to ChatGPT or Claude. It's a reference implementation, and a working answer to:\n\n*What does an online video platform need to be when the \"app\" is a conversation and the UI is generated on the fly?*\n\nBitflix is built on the [Skybridge](https://github.com/alpic-ai/skybridge) React framework for MCP Apps,\nso you can run it in the local playground, expose it through a dev tunnel, or deploy it to a permanent URL.\nThe [Bitmovin Player](https://bitmovin.com/video-player/) handles video playback directly in the chat widget.\n\n```\nsrc/\n├── catalog.ts          # content: titles, public test streams, sections, search/recommend\n├── index.ts            # entry point: runs the app\n├── server.ts           # Skybridge app + 5 tools, CSP\n├── env.ts              # typed env (BITMOVIN_PLAYER_KEY)\n├── helpers.ts          # generateHelpers<AppType>() → typed useToolInfo / useCallTool\n└── views/\n    ├── browse.tsx · recommend.tsx · live.tsx · player.tsx · diagnostics.tsx  # one entry per tool\n    ├── css/index.css       # stylesheet (theme, rails, tiles, chips, player stage)\n    ├── hooks.ts            # view hooks\n    └── components/\n        ├── BitflixApp.tsx          # shared widget: browse + player + cast + chips\n        ├── BitmovinPlayer.tsx      # Bitmovin Player in a React component\n        ├── BitmovinPlayerLazy.tsx  # code-split wrapper around the player\n        ├── Diagnostics.tsx         # video-capability probe for the host sandbox (DRM, fullscreen, cast…)\n        ├── Icon.tsx                # inline SVG icon component\n        └── cover.ts                # inline SVG cover art, one of nine hand-drawn scenes\n```\n\nEach tool the server offers binds to a view via `registerTool({ view: { component } })`.\n\n| Tool | View | Example utterance | \n|---|---|---|\n| `browse_catalog` | `browse` | \"open Bitflix\", \"show me sports\" | \n| `get_recommendations` | `recommend` | \"what should I watch tonight?\" | \n| `whats_live` | `live` | \"any games on?\", \"what's live?\" | \n| `play_title` | `player` | \"play the finals\", \"resume Aurora\" | \n| `run_diagnostics` | `diagnostics` | \"test what video features work here\" | \n\nThe first four tools render the shared `BitflixApp`, which switches between the browse face and the player\nface via `payload.view`. Clicking a tile starts playback, the category chips call back to the server with\n`useCallTool`, and `data-llm` keeps the model in sync with what's on screen.\n\nThe `run_diagnostics` tool renders the `Diagnostics` view, a live probe of what the current MCP host's widget\nsandbox supports for video. It covers MSE, EME/DRM key systems (Widevine, PlayReady, FairPlay, ClearKey), Web\nWorkers, WebAssembly, fullscreen (host display-mode request and native Fullscreen API), Picture-in-Picture,\ncasting/Presentation, and autoplay.\n\nAll streams are **public test assets**, so the demo works out of the box:\n\n- **VoD** plays HLS and DASH \"Art of Motion\" test content hosted on`cdn.bitmovin.com`\n- **Live** plays[DASH-IF livesim2](https://livesim2.dashif.org) , a real live DASH stream that is fully public\n(CORS`*` , self-hosted segments)\n- Cover art is inline SVG, composed from one of nine hand-drawn scenes (court, pitch, globe, film, summit, orbit…)\n\n**Content Security Policy:**\n\nThe app's widget runs in a sandboxed iframe and can only reach origins the server declares up front. So `VIEW_CSP`\nin `src/server.ts` allow-lists the origins hosting the content and any other network-loaded resources.\nSee [CSP & CORS](https://apps.extensions.modelcontextprotocol.io/api/documents/csp-and-cors.html) in the MCP Apps docs.\n\nThe `bitmovin-player` dependency is a proprietary, commercially-licensed SDK. See the [Licensing](#licensing) section.\nVisit the [Bitmovin dashboard](https://dashboard.bitmovin.com/player/licenses) to start a trial subscription or retrieve\na license key for your active subscription.\n\nRequires Node 22.12+ (24+ is recommended).\n\n```\nnpm ci\ncp .env.example .env        # create .env file and add your own BITMOVIN_PLAYER_KEY\nnpm run dev                 # then open the DevTools playground at http://localhost:3000\n```\n\n- `npm run dev` : local DevTools playground at port`3000` (run each tool, audit CSP, etc.)\n- `npm run dev:tunnel` : same, exposed over a stable tunnel you can add to Claude/ChatGPT\n- `npm run build` /`npm start` : production build / serve\n- `npm run deploy` : deploy to[Alpic](https://alpic.ai/) for a permanent HTTPS URL\n\n**Player domain allow-listing:**\n\nA Bitmovin Player license only works on the domains you register for it in the\n[Bitmovin dashboard](https://dashboard.bitmovin.com/player/licenses).\n\n- \nAllow-list the MCP host's sandbox domain, i.e. `*.claudemcpcontent.com` for Claude and`*.oaiusercontent.com` for ChatGPT.\n- \nWhen testing on the DevTools playground in a web browser on a non-localhost domain (tunnel or a deployed URL), also allow-list that domain.\n\n1. Run `npm run dev:tunnel` to get a public URL to your MCP server, e.g.`https://foo-bar-42.alpic.dev/mcp`\n2. Add this URL as a custom MCP/connector in your Claude/ChatGPT app\n3. Open a new chat and write *\"open Bitflix\"* ,*\"what's live?\"* ,*\"recommend something short\"*\n\nIf the MCP app does not render:\n\n- Use the Claude or ChatGPT app. Not every MCP host renders MCP Apps views; some may show only the tool call and its text result.\n- Update the Claude/ChatGPT app. MCP Apps support is new, and older versions may not render views.\n- Open the MCP URL (e.g. `https://foo-bar-42.alpic.dev/mcp` ) in a web browser. A running server answers with a\nsmall JSON error (`Method not allowed` ).\n- If run with `npm run dev` , open the MCP URL without the`/mcp` path to reach the DevTools playground and run the\ntool there. If the view renders, the server is fine and the problem is on the host app side.\n- Remove and re-add the MCP connector in your host app.\n\nThe MCP host (e.g. Claude, ChatGPT) controls the widget sandbox's capabilities. The\n[MCP Apps specification](https://apps.extensions.modelcontextprotocol.io) is still under active development, so those\ncapabilities currently vary between hosts and shift as the specification and the host implementations evolve.\nDepending on which host is used, the following features may behave differently or not work at all:\n\n- Fullscreen\n- Autoplay with sound\n- Playback of DRM-protected content\n- Remote Playback (Google Cast and Apple AirPlay)\n- Picture-in-Picture\n- Client-side advertising\n\nRun the `run_diagnostics` tool in your host to see what it permits.\n\nThe source code in this repository is released under the [MIT License](https://github.com/bitmovin/bitflix-mcp-apps-example/blob/main/LICENSE).\n\nThe Bitmovin Player SDK (`bitmovin-player` NPM dependency) is proprietary and commercially licensed by Bitmovin.\nTo run this app you must get your **own** Bitmovin Player license key from the\n[Bitmovin dashboard](https://dashboard.bitmovin.com/player/licenses) and comply with the\n[Bitmovin Player license terms](https://bitmovin.com/player-license/).\n\nThe streams in the catalog are third-party public test assets, used for demonstration only.\n\n*Bitflix, its teams, scores, and titles are fictional.*", "url": "https://wpnews.pro/news/bitflix-mcp-apps-example-application-for-video", "canonical_source": "https://github.com/bitmovin/bitflix-mcp-apps-example", "published_at": "2026-09-24 07:07:37+00:00", "updated_at": "2026-09-24 07:31:56.693317+00:00", "lang": "en", "topics": ["agent-protocols", "ai-products", "developer-tools", "generative-ai"], "entities": ["Bitmovin", "Bitflix", "Skybridge", "Model Context Protocol", "ChatGPT", "Claude", "Bitmovin Player", "DASH-IF livesim2"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/bitflix-mcp-apps-example-application-for-video", "markdown": "https://wpnews.pro/news/bitflix-mcp-apps-example-application-for-video.md", "text": "https://wpnews.pro/news/bitflix-mcp-apps-example-application-for-video.txt", "jsonld": "https://wpnews.pro/news/bitflix-mcp-apps-example-application-for-video.jsonld"}}