goose/documentation/docs/guides/interactive-chat/index.mdx
2025-10-06 16:49:08 -07:00

84 lines
No EOL
3.1 KiB
Text

---
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';
import VideoCarousel from '@site/src/components/VideoCarousel';
<h1 className={styles.pageTitle}>Rich Interactive Chat with 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>
<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
title="MCP-UI Extensions"
description="Goose transforms text-based responses into engaging graphical and interactive user experiences."
link="/docs/guides/interactive-chat/mcp-ui"
/>
<Card
title="Auto Visualiser Extension"
description="Generate interactive data visualizations automatically in Goose."
link="/docs/mcp/autovisualiser-mcp"
/>
</div>
</div>
<div className={styles.categorySection}>
<h2 className={styles.categoryTitle}>📝 Featured Blog Posts</h2>
<div className={styles.cardGrid}>
<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"
/>
</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/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>