docs: add MCP Apps tutorial and documentation updates

documentation/docs/getting-started/using-extensions.md

@@ -668,4 +668,8 @@ goose session --with-streamable-http-extension "https://example.com/streamable"
 
 goose extensions are implemented with MCP, a standard protocol that allows AI models and agents to securely connect with local or remote resources. Learn how to build your own [extension as an MCP server](https://modelcontextprotocol.io/quickstart/server).
 
+**Tutorials:**
+- [Building Custom Extensions](/docs/tutorials/custom-extensions) - Create a Python-based MCP extension
+- [Building MCP Apps](/docs/tutorials/building-mcp-apps) - Create interactive UI apps
+
 [extensions-directory]: /extensions

documentation/docs/guides/interactive-chat/_category_.json

@@ -1,5 +1,5 @@
 {
-  "label": "Rich Interactive Chat",
+  "label": "MCP Apps and MCP-UI",
   "position": 55,
   "link": {
     "type": "doc",

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

@@ -1,14 +1,14 @@
 ---
-title: Rich Interactive Chat
+title: Rich Interactive Chat with MCP Apps and MCP-UI
 hide_title: true
-description: Transform text-based responses into graphical components and interactive elements
+description: Build interactive UI applications that render inside goose Desktop using MCP Apps and MCP-UI
 ---
 
 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}>Rich Interactive Chat with MCP-UI</h1>
+<h1 className={styles.pageTitle}>Rich Interactive Chat with MCP Apps and MCP-UI</h1>
 <p className={styles.pageDescription}>
   goose Desktop supports extensions that transform text-only responses into graphical, interactive experiences. Instead of reading through lists and descriptions, you can click, explore, and interact with UI components directly in your conversations.
 </p>
@@ -27,6 +27,11 @@ import VideoCarousel from '@site/src/components/VideoCarousel';
 <div className={styles.categorySection}>
   <h2 className={styles.categoryTitle}>📚 Documentation & Guides</h2>
   <div className={styles.cardGrid}>
+    <Card 
+      title="Building MCP Apps"
+      description="Step-by-step tutorial to create interactive UI applications that render inside goose Desktop."
+      link="/docs/tutorials/building-mcp-apps"
+    />
     <Card 
       title="MCP-UI Extensions"
       description="goose transforms text-based responses into engaging graphical and interactive user experiences."
@@ -43,6 +48,11 @@ import VideoCarousel from '@site/src/components/VideoCarousel';
 <div className={styles.categorySection}>
   <h2 className={styles.categoryTitle}>📝 Featured Blog Posts</h2>
   <div className={styles.cardGrid}>
+    <Card      
+      title="goose Lands MCP Apps"
+      description="goose ships early support for the draft MCP Apps specification, aligning with the emerging standard for interactive UIs."
+      link="/blog/2026/01/06/mcp-apps"
+    />
     <Card      
       title="MCP UI: Bringing the Browser into the Agent"
       description="MCP-UI servers return content that goose Desktop renders as rich, embeddable UI."
@@ -93,4 +103,4 @@ import VideoCarousel from '@site/src/components/VideoCarousel';
     }
   ]}
 />
-</div>
+</div>

documentation/docs/guides/interactive-chat/mcp-ui.md

@@ -1,8 +1,8 @@
 ---
 sidebar_position: 1
-title: MCP-UI Extensions
-sidebar_label: MCP-UI Extensions
-description: Learn how goose can render graphical and interactive UI components from MCP-UI-enabled extensions
+title: Using MCP Apps and MCP-UI
+sidebar_label: Using MCP Apps and MCP-UI
+description: Learn how goose renders interactive UI components from MCP Apps and MCP-UI extensions
 ---
 
 import Tabs from '@theme/Tabs';
@@ -11,7 +11,13 @@ import GooseDesktopInstaller from '@site/src/components/GooseDesktopInstaller';
 import CLIExtensionInstructions from '@site/src/components/CLIExtensionInstructions';
 import { PanelLeft } from 'lucide-react';
 
-Extensions built on MCP-UI allow goose Desktop to provide interactive and engaging user experiences. Imagine using a graphical, clickable UI instead of reading text responses and typing all your prompts:
+# Using MCP Apps and MCP-UI
+
+Extensions built with MCP Apps or MCP-UI allow goose Desktop to provide interactive and engaging user experiences. Imagine using a graphical, clickable UI instead of reading text responses and typing all your prompts. These extensions return content that goose can render as embedded UI elements for rich, dynamic, and streamlined interactions.
+
+:::info MCP Apps is the official specification
+[MCP Apps](/docs/tutorials/building-mcp-apps) is now the official MCP specification for interactive UIs. MCP-UI extensions still work in goose, but MCP Apps is the recommended path for new extensions.
+:::
 
 <div style={{ width: '100%', maxWidth: '800px', margin: '0 auto' }}>
   <video 
@@ -28,40 +34,31 @@ Extensions built on MCP-UI allow goose Desktop to provide interactive and engagi
   </video>
 </div>
 
-<br/>
-MCP-UI-enabled extensions return content that goose can render as embedded UI elements for rich, dynamic, and streamlined interactions.
-
 ## Try It Out
 
-See how interactive responses work in goose. 
-
-### Add Enabled Extension
-
-For this exercise, we'll add an MCP-UI-enabled extension that connects to [MCP-UI Demos](https://mcp-aharvard.netlify.app/) provided by Andrew Harvard.
+See how interactive responses work in goose. For this exercise, we'll add an extension that connects to [MCP-UI Demos](https://mcp-aharvard.netlify.app/) provided by Andrew Harvard.
 
   <Tabs groupId="interface">
     <TabItem value="ui" label="goose Desktop" default>
       <GooseDesktopInstaller
         extensionId="richdemo"
         extensionName="Rich Demo"
-        description="Demo MCP-UI-enabled extension"
+        description="Demo interactive extension"
         type="http"
         url="https://mcp-aharvard.netlify.app/mcp"
       />
     </TabItem>
     <TabItem value="cli" label="goose CLI">
         <CLIExtensionInstructions
           name="rich_demo"
-          description="Demo MCP-UI-enabled extension"
+          description="Demo interactive extension"
           type="http"
           url="https://mcp-aharvard.netlify.app/mcp"
           timeout={300}
         />
     </TabItem>
   </Tabs>
 
-### Interact in Chat
-
 In goose Desktop, ask:
 
 - `Help me select seats for my flight`
@@ -71,15 +68,14 @@ Instead of just text, you'll see an interactive response with:
 - Real-time, clickable selection capabilities
 - A booking confirmation with flight details
 
-Ask questions to try out other demos:
+Try out other demos:
 
 - `Plan my next trip based on my mood`
 - `What's the weather in Philadelphia?`
 
-Stay tuned as more extensions build with MCP-UI!
-
 ## For Extension Developers
 
-Want to add interactivity to your own extensions? MCP-UI extends the Model Context Protocol to allow MCP servers to return content that agents can render as UI components instead of text-only responses. Learn more:
-- [MCP-UI: Bringing the Browser into the Agent](/blog/2025/08/11/mcp-ui-post-browser-world)
-- [MCP-UI Documentation](https://mcpui.dev/guide/introduction)
+Add interactivity to your own extensions:
+
+- [Building MCP Apps](/docs/tutorials/building-mcp-apps) - Step-by-step tutorial (recommended)
+- [MCP-UI Documentation](https://mcpui.dev/guide/introduction) - MCP-UI specification