docs: add MCP Apps tutorial and documentation updates (#6384)
This commit is contained in:
Rizel Scarlett
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"label": "Rich Interactive Chat",
|
||||
"label": "MCP Apps and MCP-UI",
|
||||
"position": 55,
|
||||
"link": {
|
||||
"type": "doc",
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,23 +34,16 @@ 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"
|
||||
/>
|
||||
@@ -52,7 +51,7 @@ For this exercise, we'll add an MCP-UI-enabled extension that connects to [MCP-U
|
||||
<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}
|
||||
@@ -60,8 +59,6 @@ For this exercise, we'll add an MCP-UI-enabled extension that connects to [MCP-U
|
||||
</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
|
||||
|
||||
Reference in New Issue
Block a user