docs: recipe video carousel (#4660)

documentation/docs/guides/interactive-chat/index.md

@@ -57,5 +57,10 @@ import styles from '@site/src/components/Card/styles.module.css';
       description="Automatically render visual representations of data as you interact with it, powered by MCP-UI"
       link="/blog/2025/08/27/autovisualiser-with-mcp-ui"
     />
+    <Card      
+      title="How to Make An MCP Server MCP-UI Compatible"
+      description="Making an MCP server MCP-UI compatible requires just a few lines of code"
+      link="/blog/2025/09/08/turn-any-mcp-server-mcp-ui-compatible"
+    />
   </div>
 </div>

documentation/docs/guides/recipes/index.mdx

@@ -6,6 +6,7 @@ description: Reusable and shareable AI workflows
 
 import Card from '@site/src/components/Card';
 import styles from '@site/src/components/Card/styles.module.css';
+import VideoCarousel from '@site/src/components/VideoCarousel';
 
 <h1 className={styles.pageTitle}>Recipes</h1>
 <p className={styles.pageDescription}>
@@ -22,7 +23,7 @@ import styles from '@site/src/components/Card/styles.module.css';
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
     allowFullScreen
   ></iframe>
-</div> 
+</div>
 
 <div className={styles.categorySection}>
   <h2 className={styles.categoryTitle}>📚 Documentation & Guides</h2>
@@ -91,3 +92,27 @@ import styles from '@site/src/components/Card/styles.module.css';
     />
   </div>
 </div>
+
+<div className={styles.categorySection}>
+  <h2 className={styles.categoryTitle}>🎥 More Videos</h2>
+
+<VideoCarousel
+  id="more-videos"
+  videos={[
+    { 
+      type: 'iframe', 
+      src: 'https://youtube.com/embed/1szmJSKInnU',
+      title: 'Advanced Tips for Recipes/Sub-Recipes in Goose',
+      description: 'Advanced tips for using recipes and sub-recipes in goose',
+      duration: '10:07'
+    },
+    { 
+      type: 'iframe', 
+      src: 'https://youtube.com/embed/gvg7DomaJuA',
+      title: 'Headless Goose, Scheduling a Parallel-Subagent Recipe',
+      description: 'Schedule a recipe to run two subagents in parallel',
+      duration: '5:50'
+    }
+  ]}
+/>
+</div>