diff --git a/documentation/docs/guides/interactive-chat/_category_.json b/documentation/docs/guides/interactive-chat/_category_.json new file mode 100644 index 0000000000..e5106893a2 --- /dev/null +++ b/documentation/docs/guides/interactive-chat/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Rich Interactive Chat", + "position": 6, + "link": { + "type": "doc", + "id": "guides/interactive-chat/index" + } +} diff --git a/documentation/docs/guides/interactive-chat/index.md b/documentation/docs/guides/interactive-chat/index.md new file mode 100644 index 0000000000..fa7bb55174 --- /dev/null +++ b/documentation/docs/guides/interactive-chat/index.md @@ -0,0 +1,46 @@ +--- +title: Rich Interactive Chat +hide_title: true +description: Transform text-based responses into graphical components and interactive elements +--- + +import Card from '@site/src/components/Card'; +import styles from '@site/src/components/Card/styles.module.css'; + +

Rich Interactive Chat

+

+ 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. +

+ +
+ +
+ +
+

📚 Documentation & Guides

+
+ +
+
+ +
+

📝 Featured Blog Posts

+
+ +
+
\ No newline at end of file diff --git a/documentation/docs/guides/interactive-chat/mcp-ui.md b/documentation/docs/guides/interactive-chat/mcp-ui.md new file mode 100644 index 0000000000..463fb4238f --- /dev/null +++ b/documentation/docs/guides/interactive-chat/mcp-ui.md @@ -0,0 +1,86 @@ +--- +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 +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +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: + +
+ +
+ +
+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. + + + + 1. Click the button in the top-left to open the sidebar + 2. Click `Extensions` + 3. Click `Add custom extension` + 4. On the `Add custom extension` modal, enter the following: + - **Extension Name**: Rich Demo + - **Type**: Streamable HTTP + - **Endpoint**: `https://mcp-aharvard.netlify.app/mcp` + 5. Click `Add Extension` to save the extension + 6. Navigate to the chat + + + + + + +### Interact in Chat + +In Goose Desktop, ask: + +- `Help me select seats for my flight` + +Instead of just text, you'll see an interactive response with: +- A visual seat map with available and occupied seats +- Real-time, clickable selection capabilities +- A booking confirmation with flight details + +Ask questions to 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) diff --git a/documentation/docs/mcp/brave-mcp.md b/documentation/docs/mcp/brave-mcp.md index d502b96003..846e58e156 100644 --- a/documentation/docs/mcp/brave-mcp.md +++ b/documentation/docs/mcp/brave-mcp.md @@ -46,7 +46,7 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to args={["-y", "@modelcontextprotocol/server-brave-search"]} envVars={[{ name: "BRAVE_API_KEY", label: "Your Brave Search API Key" }]} apiKeyLink="https://api-dashboard.search.brave.com/app/keys" - apiKeyLinkText="Get your Brave Search API Key" + apiKeyLinkText="Brave Search API Key" /> diff --git a/documentation/docs/mcp/container-use-mcp.md b/documentation/docs/mcp/container-use-mcp.md index 157de4a961..f096a584c3 100644 --- a/documentation/docs/mcp/container-use-mcp.md +++ b/documentation/docs/mcp/container-use-mcp.md @@ -41,7 +41,7 @@ You'll need [Docker](https://www.docker.com/) installed on your system. If you w { let urlParts = []; - // Add SSE extension URL or command-line extension command+args first + // Only add type parameter for http extensions (mapped to streamable_http) + // to avoid regressions with existing sse/stdio extensions + if (extensionType === 'http') { + urlParts.push(`type=streamable_http`); + } + + // Add SSE/HTTP extension URL or command-line extension command+args if (url) { urlParts.push(`url=${encodeURIComponent(url)}`); } else if (command && args) { @@ -57,9 +68,11 @@ export default function GooseDesktopInstaller({ `description=${encodeURIComponent(description)}` ); - // Add environment variables (matching TLDR sections encoding) + // Add environment variables/headers + const isHttp = extensionType === 'http'; + const paramName = isHttp ? 'header' : 'env'; urlParts.push(...envVars.map(envVar => - `env=${encodeURIComponent(`${envVar.name}=${envVar.label}`)}` + `${paramName}=${encodeURIComponent(`${envVar.name}=${envVar.label}`)}` )); return `goose://extension?${urlParts.join('&')}`; @@ -81,7 +94,11 @@ export default function GooseDesktopInstaller({ if (envVars.length > 0) { const envVarNames = envVars.map(env => env.name).join(', '); - return `Obtain your ${envVarNames} and paste it in`; + const isHttp = extensionType === 'http'; + const variableType = isHttp ? 'header' : 'environment variable'; + const variableTypes = isHttp ? 'headers' : 'environment variables'; + + return `Obtain your ${envVarNames} and paste ${envVars.length > 1 ? `them as ${variableTypes}` : `it as a ${variableType}`}`; } return null; // No configuration needed diff --git a/documentation/static/videos/plan-trip-demo.mp4 b/documentation/static/videos/plan-trip-demo.mp4 new file mode 100644 index 0000000000..7f416100a6 Binary files /dev/null and b/documentation/static/videos/plan-trip-demo.mp4 differ