chore: Remove legacy MCP-UI proxy support (#10086)
This commit is contained in:
Lifei Zhou
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"label": "MCP Apps and MCP-UI",
|
||||
"label": "MCP Apps",
|
||||
"position": 55,
|
||||
"link": {
|
||||
"type": "doc",
|
||||
|
||||
@@ -1,43 +1,35 @@
|
||||
---
|
||||
title: Rich Interactive Chat with MCP Apps and MCP-UI
|
||||
title: Rich Interactive Chat with MCP Apps
|
||||
hide_title: true
|
||||
description: Build interactive UI applications that render inside goose Desktop using MCP Apps and MCP-UI
|
||||
description: Build interactive UI applications that render inside goose Desktop using MCP Apps
|
||||
---
|
||||
|
||||
import Card from '@site/src/components/Card';
|
||||
import styles from '@site/src/components/Card/styles.module.css';
|
||||
import VideoCarousel from '@site/src/components/VideoCarousel';
|
||||
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 Apps and MCP-UI</h1>
|
||||
<h1 className={styles.pageTitle}>Rich Interactive Chat with MCP Apps</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.
|
||||
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>
|
||||
|
||||
<div className="video-container margin-bottom--lg">
|
||||
<iframe
|
||||
class="aspect-ratio"
|
||||
src="https://www.youtube.com/embed/QJHGvsVXhjw"
|
||||
title="Turn Any AI Chat Into an Interactive Experience | MCP-UI"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<div className={styles.categorySection}>
|
||||
<h2 className={styles.categoryTitle}>📚 Documentation & Guides</h2>
|
||||
<div className={styles.cardGrid}>
|
||||
<Card
|
||||
<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="Using MCP Apps and MCP-UI"
|
||||
description="goose transforms text-based responses into engaging graphical and interactive user experiences."
|
||||
<Card
|
||||
title="Using MCP Apps"
|
||||
description="Launch standalone apps and render interactive UI directly in goose Desktop conversations."
|
||||
link="/docs/guides/interactive-chat/mcp-ui"
|
||||
/>
|
||||
<Card
|
||||
<Card
|
||||
title="Auto Visualiser Extension"
|
||||
description="Generate interactive data visualizations automatically in goose."
|
||||
link="/docs/mcp/autovisualiser-mcp"
|
||||
@@ -45,74 +37,36 @@ import VideoCarousel from '@site/src/components/VideoCarousel';
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.categorySection}>
|
||||
<h2 className={styles.categoryTitle}>🎥 Videos</h2>
|
||||
|
||||
<VideoCarousel
|
||||
id="mcp-apps-videos"
|
||||
videos={[
|
||||
{
|
||||
type: "iframe",
|
||||
src: "https://youtube.com/embed/QcojQ3Fwqsw",
|
||||
title: "What are MCP Apps?",
|
||||
description:
|
||||
"What MCP Apps are and how they render interactive UIs in goose",
|
||||
duration: "1:53",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.categorySection}>
|
||||
<h2 className={styles.categoryTitle}>📝 Featured Blog Posts</h2>
|
||||
<div className={styles.cardGrid}>
|
||||
<Card
|
||||
<Card
|
||||
title="From MCP-UI to MCP Apps: Evolving Interactive Agent UIs"
|
||||
description="A practical migration guide to MCP Apps: the 4 key changes, what broke, and why this shift matters."
|
||||
link="/blog/2026/01/22/mcp-ui-to-mcp-apps"
|
||||
/>
|
||||
<Card
|
||||
<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."
|
||||
link="/blog/2025/08/11/mcp-ui-post-browser-world"
|
||||
/>
|
||||
<Card
|
||||
title="MCP-UI: The Future of Agentic Interfaces"
|
||||
description="AI agents need to move beyond walls of text to rich and interactive UX."
|
||||
link="/blog/2025/08/25/mcp-ui-future-agentic-interfaces"
|
||||
/>
|
||||
<Card
|
||||
title="Auto Visualiser with MCP-UI"
|
||||
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"
|
||||
/>
|
||||
<Card
|
||||
title="Designing AI for Users, Not Just LLMs"
|
||||
description="Building intent-based AI experiences with MCP-UI."
|
||||
link="/blog/2025/10/14/designing-ai-for-humans"
|
||||
/>
|
||||
</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/QcojQ3Fwqsw',
|
||||
title: 'What are MCP Apps?',
|
||||
description: 'Why MCP Apps are different from MCP-UI and what makes them portable, secure, and standardized',
|
||||
duration: '1:53'
|
||||
},
|
||||
{
|
||||
type: 'iframe',
|
||||
src: 'https://youtube.com/embed/Kxj-vFBO_9U',
|
||||
title: 'Building A MCP-UI Server',
|
||||
description: 'Learn how to build your own MCP-UI server from scratch',
|
||||
duration: '40:07'
|
||||
},
|
||||
{
|
||||
type: 'iframe',
|
||||
src: 'https://youtube.com/embed/GS-kmreZDgU',
|
||||
title: 'Livestream - MCP-UI: The Future of Agentic Interfaces',
|
||||
description: 'The goose team talks with MCP-UI creators about the future of visual interfaces',
|
||||
duration: '55:32'
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,30 +1,24 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
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
|
||||
title: Using MCP Apps
|
||||
sidebar_label: Using MCP Apps
|
||||
description: Learn how goose renders interactive UI components from MCP Apps 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';
|
||||
|
||||
# Using MCP Apps and MCP-UI
|
||||
# Using MCP Apps
|
||||
|
||||
Extensions built with MCP Apps or MCP-UI allow goose Desktop to provide interactive and engaging user experiences. Instead of reading text responses and typing prompts, you can interact with a graphical and clickable UI.
|
||||
Extensions built with MCP Apps allow goose Desktop to provide interactive and engaging user experiences. Instead of reading text responses and typing prompts, you can interact with a graphical and clickable UI.
|
||||
|
||||
:::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.
|
||||
[MCP Apps](/docs/tutorials/building-mcp-apps) is the official MCP specification for interactive UIs. Use MCP Apps for new interactive extensions.
|
||||
:::
|
||||
|
||||
:::warning Experimental Features
|
||||
The features described in this topic are experimental and in active development. Behavior and support may change in future releases.
|
||||
:::
|
||||
|
||||
## MCP Apps
|
||||
|
||||
MCP Apps bring interactive interfaces to goose through the official [MCP Apps specification](https://github.com/modelcontextprotocol/ext-apps). Depending on the extension, apps can be launched in standalone, sandboxed windows or embedded in your chat window.
|
||||
|
||||
### Launching Apps in Standalone Windows
|
||||
@@ -71,49 +65,6 @@ If needed, you can just ask goose whether the UI can be loaded in the chat windo
|
||||
</video>
|
||||
</div>
|
||||
|
||||
## MCP-UI
|
||||
|
||||
MCP-UI is an earlier specification for interactive UIs that renders content embedded in your chat. While MCP Apps is now the recommended approach, MCP-UI extensions continue to work in goose.
|
||||
|
||||
### Try It Out
|
||||
|
||||
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 interactive extension"
|
||||
type="http"
|
||||
url="https://mcp-aharvard.netlify.app/mcp"
|
||||
/>
|
||||
</TabItem>
|
||||
<TabItem value="cli" label="goose CLI">
|
||||
<CLIExtensionInstructions
|
||||
name="rich_demo"
|
||||
description="Demo interactive extension"
|
||||
type="http"
|
||||
url="https://mcp-aharvard.netlify.app/mcp"
|
||||
timeout={300}
|
||||
/>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
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
|
||||
|
||||
Try out other demos:
|
||||
|
||||
- `Plan my next trip based on my mood`
|
||||
- `What's the weather in Philadelphia?`
|
||||
|
||||
## For Extension Developers
|
||||
|
||||
Add interactivity to your own extensions:
|
||||
|
||||
@@ -9,7 +9,6 @@ import TabItem from '@theme/TabItem';
|
||||
|
||||
# Building Custom Extensions with goose
|
||||
|
||||
|
||||
goose allows you to extend its functionality by creating your own custom extensions, which are built as MCP servers. These extensions are compatible with goose because it adheres to the [Model Context Protocol (MCP)][mcp-docs]. MCP is an open protocol that standardizes how applications provide context to LLMs. It enables a consistent way to connect LLMs to various data sources and tools, making it ideal for extending functionality in a structured and interoperable way.
|
||||
|
||||
In this guide, we build an MCP server using the [Python SDK for MCP][mcp-python]. We’ll demonstrate how to create an MCP server that reads Wikipedia articles and converts them to Markdown, integrate it as an extension in goose. You can follow a similar process to develop your own custom extensions for goose.
|
||||
@@ -105,7 +104,7 @@ def read_wikipedia_article(url: str) -> str:
|
||||
# SSRF protection: only allow Wikipedia domains
|
||||
parsed = urlparse(url)
|
||||
hostname = parsed.netloc.lower()
|
||||
|
||||
|
||||
# Allow wikipedia.org or *.wikipedia.org subdomains only
|
||||
if hostname != 'wikipedia.org' and not hostname.endswith('.wikipedia.org'):
|
||||
raise ValueError(f"Only Wikipedia URLs are allowed. Got: {parsed.netloc}")
|
||||
@@ -223,18 +222,18 @@ MCP Inspector requires Node.js and npm installed on your computer.
|
||||
source .venv/bin/activate
|
||||
```
|
||||
|
||||
3. Run your server in development mode:
|
||||
3. Run your server in development mode:
|
||||
|
||||
```bash
|
||||
mcp dev src/mcp_wiki/server.py
|
||||
```
|
||||
|
||||
|
||||
MCP Inspector should open automatically in your browser. On first run, you'll be prompted to install `@modelcontextprotocol/inspector`.
|
||||
|
||||
4. Test the tool:
|
||||
1. Click `Connect` to initialize your MCP server
|
||||
2. On the `Tools` tab, click `List Tools` and click the `read_wikipedia_article` tool
|
||||
3. Enter `https://en.wikipedia.org/wiki/Bangladesh` for the URL and click `Run Tool`
|
||||
3. Enter `https://en.wikipedia.org/wiki/Bangladesh` for the URL and click `Run Tool`
|
||||
|
||||
[](../assets/guides/custom-extension-mcp-inspector.png)
|
||||
|
||||
@@ -242,16 +241,16 @@ MCP Inspector requires Node.js and npm installed on your computer.
|
||||
<TabItem value="cli" label="In the CLI">
|
||||
1. Set up the project environment:
|
||||
|
||||
```bash
|
||||
uv sync
|
||||
```
|
||||
```bash
|
||||
uv sync
|
||||
```
|
||||
|
||||
2. Activate your virtual environment:
|
||||
|
||||
```bash
|
||||
source .venv/bin/activate
|
||||
```
|
||||
|
||||
|
||||
3. Install your project locally:
|
||||
|
||||
```bash
|
||||
@@ -275,6 +274,7 @@ MCP Inspector requires Node.js and npm installed on your computer.
|
||||
options:
|
||||
-h, --help show this help message and exit
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
@@ -295,11 +295,13 @@ To add your MCP server as an extension in goose:
|
||||
4. Set the `Type` to `STDIO`
|
||||
5. Provide a name and description for your extension
|
||||
6. In the `Command` field, provide the absolute path to your executable:
|
||||
|
||||
```plaintext
|
||||
uv run /full/path/to/mcp-wiki/.venv/bin/mcp-wiki
|
||||
```
|
||||
|
||||
For example:
|
||||
|
||||
```plaintext
|
||||
uv run /Users/smohammed/Development/mcp/mcp-wiki/.venv/bin/mcp-wiki
|
||||
```
|
||||
@@ -341,12 +343,14 @@ goose supports advanced MCP features that can enhance your extensions.
|
||||
**[MCP Sampling](/docs/guides/mcp-sampling)** allows your MCP servers to request AI completions from goose's LLM, transforming simple tools into intelligent agents.
|
||||
|
||||
**Key Benefits:**
|
||||
|
||||
- Your MCP server doesn't need its own OpenAI/Anthropic API key
|
||||
- Tools can analyze data, provide explanations, and make intelligent decisions
|
||||
- Enhanced user experience with smarter, more contextual responses
|
||||
- Secure by design: requests are isolated and attributed automatically
|
||||
|
||||
**Getting Started:**
|
||||
|
||||
- Use the `sampling/createMessage` method in your MCP server to request AI assistance
|
||||
- [goose's implementation](https://github.com/aaif-goose/goose/blob/main/crates/goose/src/agents/mcp_client.rs) currently supports text and image content types
|
||||
- goose automatically advertises sampling capability to all MCP servers
|
||||
@@ -360,6 +364,7 @@ goose supports advanced MCP features that can enhance your extensions.
|
||||
**[MCP Apps](/docs/tutorials/building-mcp-apps)** enable rich, interactive user interfaces instead of text-only responses.
|
||||
|
||||
**Key Benefits:**
|
||||
|
||||
- Return interactive UI components from your MCP server tools
|
||||
- Components render securely in isolated sandboxes within goose Desktop
|
||||
- Real-time user interactions trigger callbacks to your server
|
||||
@@ -368,10 +373,6 @@ goose supports advanced MCP features that can enhance your extensions.
|
||||
|
||||
**Learn More:** [Building MCP Apps Tutorial](/docs/tutorials/building-mcp-apps)
|
||||
|
||||
:::note
|
||||
goose also supports [MCP-UI](/docs/guides/interactive-chat/mcp-ui), but MCP Apps is the recommended path for new extensions.
|
||||
:::
|
||||
|
||||
[mcp-docs]: https://modelcontextprotocol.io/
|
||||
[mcp-python]: https://github.com/modelcontextprotocol/python-sdk
|
||||
[mcp-typescript]: https://github.com/modelcontextprotocol/typescript-sdk
|
||||
|
||||
Reference in New Issue
Block a user