feat(website): add the launch film and a production use cases section to the MCP page (#15305)

## Summary

Adds the two videos asked for in the launch thread, on top of #15240:
the Comfy MCP launch film under the capabilities heading, and a new
"Production use cases." section below it.

## Changes

- **What**: `FeatureRows01` gains an optional `media` slot;
`ToolsSection` fills it with the 16x9 launch film (autoplay, muted,
loop, corner play/mute toggles). New `UseCasesSection` renders a
heading, one-line subtitle, and the narrated walkthrough as
click-to-play behind its own title-card poster — no autoplay, since it
has a voiceover. Both sections hydrate with `client:visible` so the
controls work. The setup subtitle now breaks before "Add the server
yourself".
- **Assets**: launch film from the Air board (`COMFY_MCP_16x9`, 33.9s,
re-encoded to 4.9 MB); walkthrough from the launch blog (`short with
voice over`, 96.3s, 14 MB); poster is frame 1 of the walkthrough.

Copy added in en and zh-CN.

## Review Focus

- **The media is not on the CDN yet.** `launch-film.mp4`,
`production-use-cases.mp4` and `production-use-cases-poster.webp` still
need uploading to `gs://comfy-org-videos/website/mcp/`. Until then both
players 404 on any deploy built from this branch, including this PR's
Vercel preview.
- Copy on the new section — "Production use cases." and its subtitle are
a first pass.
- `client:visible` on `ToolsSection` is new; it was static before
because every video there had `hideControls`.

## Screenshots

Standalone preview with the media served from the deployment itself, as
a stand-in for the pending CDN upload:
https://website-frontend-16jmxfsd8-comfyui.vercel.app/mcp

Author: bertfy

apps/website/e2e/mcp.spec.ts

@@ -185,6 +185,20 @@ test.describe('MCP page @smoke', () => {
     }
   })
 
+  test('production use cases section offers a click-to-play walkthrough', async ({
+    page
+  }) => {
+    const heading = page.getByRole('heading', {
+      name: 'Production use cases.'
+    })
+    await heading.scrollIntoViewIfNeeded()
+    await expect(heading).toBeVisible()
+
+    const video = page.getByLabel(/running production jobs/)
+    await expect(video).toHaveAttribute('poster', /production-use-cases/)
+    await expect(video).not.toHaveAttribute('autoplay', /.*/)
+  })
+
   test('FAQ lists nine questions and autolinks the server URL', async ({
     page
   }) => {

apps/website/src/components/blocks/FeatureRows01.vue

@@ -49,6 +49,10 @@ const {
       {{ heading }}
     </SectionHeader>
 
+    <div v-if="$slots.media" class="mt-12 lg:mt-16">
+      <slot name="media" />
+    </div>
+
     <div class="mt-16 flex flex-col gap-4 lg:gap-6">
       <GlassCard
         v-for="(row, i) in rows"

apps/website/src/i18n/translations.ts

@@ -2152,9 +2152,9 @@ const translations = {
     'zh-CN': '配置 Comfy MCP'
   },
   'mcp.setup.subtitle': {
-    en: 'Pick where it runs: Comfy Cloud GPUs, or your own machine. Add the server yourself or ask your agent to install it, and the full ComfyUI toolset lands in your chat.',
+    en: 'Pick where it runs: Comfy Cloud GPUs, or your own machine.\nAdd the server yourself or ask your agent to install it, and the full ComfyUI toolset lands in your chat.',
     'zh-CN':
-      '选择运行位置：Comfy Cloud 的 GPU，或你自己的机器。自行添加服务器，或让智能体代劳，ComfyUI 全套工具即可进入你的对话。'
+      '选择运行位置：Comfy Cloud 的 GPU，或你自己的机器。\n自行添加服务器，或让智能体代劳，ComfyUI 全套工具即可进入你的对话。'
   },
   'mcp.setup.connections.tabsLabel': {
     en: 'Pick your connection',
@@ -2378,6 +2378,10 @@ const translations = {
     en: 'Everything ComfyUI can do,\nnow available as tools.',
     'zh-CN': 'ComfyUI 能做的一切，\n现在都可作为工具调用。'
   },
+  'mcp.tools.film.alt': {
+    en: 'Comfy MCP launch film: an agent driving ComfyUI workflows end to end',
+    'zh-CN': 'Comfy MCP 发布影片：智能体端到端驱动 ComfyUI 工作流'
+  },
   'mcp.tools.1.title': {
     en: 'Generate anything',
     'zh-CN': '生成任意内容'
@@ -2456,6 +2460,22 @@ const translations = {
     'zh-CN': 'Comfy MCP 将工作流变成可在浏览器中分享的应用'
   },
 
+  // MCP – UseCasesSection
+  'mcp.useCases.heading': {
+    en: 'Production use cases.',
+    'zh-CN': '生产级用例。'
+  },
+  'mcp.useCases.subtitle': {
+    en: 'One prompt, a real campaign: batch pack shots for every SKU, character sheets from a saved workflow, outputs filed straight back into your project folders.',
+    'zh-CN':
+      '一条提示，一整个真实项目：为每个 SKU 批量生成产品图，用已保存的工作流生成角色设定表，输出直接归档到你的项目文件夹。'
+  },
+  'mcp.useCases.alt': {
+    en: 'Comfy MCP running production jobs: batch pack-shot variations per SKU and a character sheet from a saved workflow',
+    'zh-CN':
+      'Comfy MCP 运行生产任务：为每个 SKU 批量生成产品图变体，并用已保存的工作流生成角色设定表'
+  },
+
   // MCP – HowItWorksSection
   'mcp.howItWorks.heading': {
     en: 'How it works',

apps/website/src/pages/mcp.astro

@@ -5,6 +5,7 @@ import HeroSection from '../templates/mcp/HeroSection.vue'
 import SetupSection from '../templates/mcp/SetupSection.vue'
 import WhySection from '../templates/mcp/WhySection.vue'
 import ToolsSection from '../templates/mcp/ToolsSection.vue'
+import UseCasesSection from '../templates/mcp/UseCasesSection.vue'
 import HowItWorksSection from '../templates/mcp/HowItWorksSection.vue'
 import FAQSection from '../templates/mcp/FAQSection.vue'
 import { t } from '../i18n/translations'
@@ -16,7 +17,8 @@ import { t } from '../i18n/translations'
 >
   <HeroSection locale="en" client:load />
   <SetupSection locale="en" client:visible />
-  <ToolsSection locale="en" />
+  <ToolsSection locale="en" client:visible />
+  <UseCasesSection locale="en" client:visible />
   <WhySection locale="en" />
   <HowItWorksSection locale="en" />
   <ProductCardsSection locale="en" label-key="products.labelProducts" />

apps/website/src/pages/zh-CN/mcp.astro

@@ -5,6 +5,7 @@ import HeroSection from '../../templates/mcp/HeroSection.vue'
 import SetupSection from '../../templates/mcp/SetupSection.vue'
 import WhySection from '../../templates/mcp/WhySection.vue'
 import ToolsSection from '../../templates/mcp/ToolsSection.vue'
+import UseCasesSection from '../../templates/mcp/UseCasesSection.vue'
 import HowItWorksSection from '../../templates/mcp/HowItWorksSection.vue'
 import FAQSection from '../../templates/mcp/FAQSection.vue'
 import { t } from '../../i18n/translations'
@@ -16,7 +17,8 @@ import { t } from '../../i18n/translations'
 >
   <HeroSection locale="zh-CN" client:load />
   <SetupSection locale="zh-CN" client:visible />
-  <ToolsSection locale="zh-CN" />
+  <ToolsSection locale="zh-CN" client:visible />
+  <UseCasesSection locale="zh-CN" client:visible />
   <WhySection locale="zh-CN" />
   <HowItWorksSection locale="zh-CN" />
   <ProductCardsSection locale="zh-CN" label-key="products.labelProducts" />

apps/website/src/templates/mcp/SetupSection.vue

@@ -223,7 +223,9 @@ const copiedLabel = t('ui.copied', locale)
     >
       {{ t('mcp.setup.heading', locale) }}
       <template #subtitle>
-        <p class="mt-4 max-w-xl text-sm text-smoke-700 lg:text-base">
+        <p
+          class="mt-4 max-w-xl text-sm whitespace-pre-line text-smoke-700 lg:text-base"
+        >
           {{ t('mcp.setup.subtitle', locale) }}
         </p>
         <p

apps/website/src/templates/mcp/ToolsSection.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import FeatureRows01 from '../../components/blocks/FeatureRows01.vue'
 import type { FeatureRow } from '../../components/blocks/FeatureRows01.vue'
+import VideoPlayer from '../../components/common/VideoPlayer.vue'
 import type { Locale, TranslationKey } from '../../i18n/translations'
 import { t } from '../../i18n/translations'
 
@@ -96,5 +97,17 @@ const rows: FeatureRow[] = tools.map(({ n, media, altKey }) => {
     :locale="locale"
     :heading="t('mcp.tools.heading', locale)"
     :rows="rows"
-  />
+  >
+    <template #media>
+      <VideoPlayer
+        :locale="locale"
+        :aria-label="t('mcp.tools.film.alt', locale)"
+        src="https://media.comfy.org/website/mcp/launch-film.mp4"
+        autoplay
+        lazy-autoplay
+        loop
+        mute-only
+      />
+    </template>
+  </FeatureRows01>
 </template>

apps/website/src/templates/mcp/UseCasesSection.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import SectionHeader from '../../components/common/SectionHeader.vue'
+import VideoPlayer from '../../components/common/VideoPlayer.vue'
+import type { Locale } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
+    <SectionHeader max-width="xl">
+      {{ t('mcp.useCases.heading', locale) }}
+      <template #subtitle>
+        <p class="mt-4 text-sm text-smoke-700 lg:text-base">
+          {{ t('mcp.useCases.subtitle', locale) }}
+        </p>
+      </template>
+    </SectionHeader>
+
+    <VideoPlayer
+      :locale="locale"
+      :aria-label="t('mcp.useCases.alt', locale)"
+      src="https://media.comfy.org/website/mcp/production-use-cases.mp4"
+      poster="https://media.comfy.org/website/mcp/production-use-cases-poster.webp"
+      minimal
+      class="mt-12 lg:mt-16"
+    />
+  </section>
+</template>