mirror of
https://github.com/block/goose.git
synced 2026-04-28 03:29:36 +00:00
docs: autovisualiser extension (#4380)
This commit is contained in:
Angie Jones
GitHub
parent
cc97554695
commit
980f994455
15 changed files with 241 additions and 5 deletions
|
|
@ -750,8 +750,8 @@ pub fn configure_extensions_dialog() -> Result<(), Box<dyn Error>> {
|
|||
let extension = cliclack::select("Which built-in extension would you like to enable?")
|
||||
.item(
|
||||
"autovisualiser",
|
||||
"Auto Visualizer",
|
||||
"Data visualization and UI generation tools",
|
||||
"Auto Visualiser",
|
||||
"Data visualisation and UI generation tools",
|
||||
)
|
||||
.item(
|
||||
"computercontroller",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
|
|
@ -0,0 +1,66 @@
|
|||
---
|
||||
title: "Auto Visualiser with MCP-UI"
|
||||
description: "Automatically show renders visual representations of data as you interact with it, powered by MCP-UI"
|
||||
authors:
|
||||
- mic
|
||||
---
|
||||
|
||||
|
||||
|
||||
Data visualization just got a major upgrade in Goose. With the new MCP-UI auto visualiser feature, you no longer need to manually request charts, graphs, or visual representations of your data. Goose now automatically detects when data would benefit from visualization and renders interactive visual components directly in your conversation.
|
||||
|
||||
|
||||
<!-- truncate -->
|
||||
|
||||
## What is Auto Visualiser?
|
||||
|
||||
[Auto Visualiser](/docs/mcp/autovisualiser-mcp) is a built-in extension that integrates with [Goose's MCP-UI system](/docs/guides/interactive-chat/) to automatically generate visual representations of data as you work.
|
||||
|
||||
|
||||
|
||||
Once turned on, a smorgasboard of visualisation tools are made available as tools which will be automatically invoked if and when it makes sense to, for example, show things as a radar diagram, or a "sankey" diagram:
|
||||
|
||||
|
||||
|
||||
You can also explicitly ask for a visualisation, even specifying what style you want, and Goose will try to shape your data and then render it inline. This is powered by the [MCP-UI](https://mcpui.dev/) emerging standard, which lets the MCP server formulate a visualisation (in this case using libraries like d3.js) and render it inline.
|
||||
|
||||
The autovisualiser analyzes data patterns and automatically suggests the most appropriate visualization type. My favourite is the treemap which is a great way to see relative sizes of things in a way that pie charts can mislead. It is also interactive in that you can drill down.
|
||||
|
||||
|
||||
|
||||
|
||||
Of course, if you want you can resort to the "last refuge of the unimaginative" and graph the weather:
|
||||
|
||||
|
||||
|
||||
Note this is an early feature, and functionality may change and vary a lot (as with MCP-UI). This is an early example of what is emerging as generative UI, although in this case the templates are pre-generated and the data is dynamically matched to the session and then displayed (from local resources).
|
||||
|
||||
|
||||
## Types of Visualizations
|
||||
|
||||
There are currently several families of things it can show:
|
||||
|
||||
* sankey diagrams
|
||||
* radar charts
|
||||
* chord diagrams
|
||||
* donut/pie charts
|
||||
* bar graphs and general charts
|
||||
* treemap visualisations (tiles)
|
||||
* maps (place things on geographic maps)
|
||||
|
||||
---
|
||||
|
||||
*Ready to see your data? [Enable the Auto Visualiser extension](/docs/mcp/autovisualiser-mcp#configuration) in Goose.*
|
||||
|
||||
<head>
|
||||
<meta property="og:title" content="Auto Visualiser with MCP-UI" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://block.github.io/goose/blog/2025/08/27/autovisualiser-with-mcp-ui" />
|
||||
<meta property="og:description" content="How Goose now automatically renders visual representations of data as you interact with it, powered by the new MCP-UI feature" />
|
||||
<meta property="og:image" content="https://block.github.io/goose/assets/images/autovis-banner-c6e34e561b2fad329ea00024c301e910.png" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:domain" content="block.github.io/goose" />
|
||||
<meta name="twitter:title" content="Auto Visualiser with MCP-UI" />
|
||||
<meta name="twitter:description" content="How Goose now automatically renders visual representations of data as you interact with it, powered by the new MCP-UI feature" />
|
||||
<meta name="twitter:image" content="https://block.github.io/goose/assets/images/autovis-banner-c6e34e561b2fad329ea00024c301e910.png" />
|
||||
</head>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: Alby Bitcoin Payments MCP
|
||||
title: Alby Bitcoin Payments Extension
|
||||
|
||||
description: Connect Goose to your Bitcoin Lightning Wallet
|
||||
---
|
||||
|
|
|
|||
159
documentation/docs/mcp/autovisualiser-mcp.md
Normal file
159
documentation/docs/mcp/autovisualiser-mcp.md
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
---
|
||||
title: Auto Visualiser Extension
|
||||
description: Add automatic data visualization to Goose
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import GooseBuiltinInstaller from '@site/src/components/GooseBuiltinInstaller';
|
||||
import ImageCarousel from '@site/src/components/ImageCarousel';
|
||||
|
||||
The Auto Visualiser extension enables Goose to automatically generate interactive data visualizations directly in your conversation. This built-in extension leverages MCP-UI to create charts, graphs, maps, and other visual representations of your data without requiring manual requests.
|
||||
|
||||
This guide will cover enabling and using the Auto Visualiser MCP Server.
|
||||
|
||||
## Configuration
|
||||
|
||||
|
||||
<Tabs groupId="interface">
|
||||
<TabItem value="ui" label="Goose Desktop" default>
|
||||
<GooseBuiltinInstaller
|
||||
extensionName="Auto Visualiser"
|
||||
description="Automatically generate interactive data visualizations"
|
||||
/>
|
||||
</TabItem>
|
||||
<TabItem value="cli" label="Goose CLI">
|
||||
|
||||
1. Run the `configure` command:
|
||||
```sh
|
||||
goose configure
|
||||
```
|
||||
|
||||
2. Choose to `Toggle Extensions`
|
||||
```sh
|
||||
┌ goose-configure
|
||||
│
|
||||
◇ What would you like you configure?
|
||||
│ Toggle Extensions
|
||||
│
|
||||
◆ Enable extensions: (use "space" to toggle and "enter" to submit)
|
||||
// highlight-start
|
||||
│ ● autovisualiser
|
||||
// highlight-end
|
||||
└ Extension settings updated successfully
|
||||
```
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
|
||||
## Visualization Types
|
||||
|
||||
The Auto Visualiser is a powerful extension that integrates with Goose's MCP-UI system to automatically detect when data would benefit from visualization and render interactive visual components. It analyzes data patterns in your conversations and suggests the most appropriate visualization type.
|
||||
|
||||
| Chart Type | Description | Detected When Prompt Implies |
|
||||
|------------|-------------|------------------------------|
|
||||
| **Sankey Diagrams** | Flow data visualization showing relationships and quantities | Flow or process data <br/>(workflows, funnels, process datasets) |
|
||||
| **Radar Charts** | Multi-dimensional data comparison (spider charts) | Multi-dimensional comparisons <br/>(performance metrics, feature comparisons) |
|
||||
| **Donut/Pie Charts** | Categorical data visualization with support for multiple charts | Categorical proportions <br/>(percentage breakdowns, category distributions) |
|
||||
| **Treemap Visualizations** | Hierarchical data with proportional area representation | Hierarchical data <br/>(nested categories, organizational structures) |
|
||||
| **Chord Diagrams** | Relationship and flow visualization between entities | Relationship matrices <br/>(network connections, cross-references) |
|
||||
| **Interactive Maps** | Geographic data visualization with location markers using Leaflet | Geographic information <br/>(location data, coordinates, addresses) |
|
||||
| **Line/Bar/Scatter Charts** | Traditional chart types for data analysis | Time series data <br/>(historical data, trends over time) |
|
||||
|
||||
### Example Visualizations
|
||||
|
||||
<ImageCarousel id="flappy" width="40%" images={[
|
||||
|
||||
require('/blog/2025-08-27-autovisualiser-with-mcp-ui/sankey.png').default,
|
||||
require('/blog/2025-08-27-autovisualiser-with-mcp-ui/treemap.png').default,
|
||||
]}
|
||||
names={[
|
||||
"Sankey",
|
||||
"Treemap"
|
||||
]} />
|
||||
|
||||
### Features
|
||||
|
||||
- **Automatic Detection**: Goose intelligently chooses the best visualization type for your data
|
||||
- **Interactive Components**: All visualizations are interactive with hover effects, zooming, and drilling capabilities
|
||||
- **MCP-UI Integration**: Leverages the emerging MCP-UI standard for seamless rendering
|
||||
- **Multiple Chart Support**: Can render multiple visualizations in a single response
|
||||
- **Customizable Styling**: Supports custom colors, labels, and formatting options
|
||||
- **Export Capability**: Visualizations can be saved as HTML files for sharing
|
||||
|
||||
|
||||
## Example Usage
|
||||
|
||||
In this example, I'll have Goose analyze some sales data and automatically visualize it using the Auto Visualiser extension.
|
||||
|
||||
|
||||
### Goose Prompt
|
||||
```
|
||||
I have quarterly sales data for different product categories. Can you help me understand:
|
||||
1. The hierarchical breakdown of revenue across our nested product categories
|
||||
2. How our performance metrics compare across all four quarters
|
||||
3. The customer flow through our sales funnel process
|
||||
|
||||
Here's the data:
|
||||
- Electronics: Q1: $150k, Q2: $180k, Q3: $220k, Q4: $195k
|
||||
- Clothing: Q1: $120k, Q2: $140k, Q3: $160k, Q4: $175k
|
||||
- Home & Garden: Q1: $80k, Q2: $95k, Q3: $110k, Q4: $125k
|
||||
```
|
||||
|
||||
### Goose Output
|
||||
|
||||
:::note Desktop
|
||||
|
||||
I'll help you analyze your quarterly sales data with three different visualizations to address each of your questions. Let me create these visualizations for you.
|
||||
|
||||
First, let's visualize the hierarchical breakdown of your revenue across product categories:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
I've created three comprehensive visualizations to help you understand your quarterly sales data from different perspectives:
|
||||
|
||||
#### 1. Hierarchical Revenue Breakdown (Treemap)
|
||||
The **treemap visualization** shows your revenue hierarchy with proportional areas representing the relative size of each category and quarter. Key insights:
|
||||
- **Electronics** is your largest revenue generator ($745k total)
|
||||
- **Clothing** follows as second largest ($595k total)
|
||||
- **Home & Garden** is smallest but growing ($410k total)
|
||||
- You can see how each quarter contributes within each category
|
||||
|
||||
#### 2. Performance Metrics Comparison (Radar Chart)
|
||||
The **radar chart** displays how all three product categories performed across the four quarters, making it easy to compare:
|
||||
- **Electronics** shows strong Q3 performance ($220k) with slight Q4 decline
|
||||
- **Clothing** demonstrates consistent growth throughout the year
|
||||
- **Home & Garden** shows steady upward trajectory across all quarters
|
||||
- All categories show their strongest performance in Q3-Q4
|
||||
|
||||
#### 3. Sales Funnel Flow (Sankey Diagram)
|
||||
The **Sankey diagram** represents customer flow through your sales process, with flow thickness proportional to revenue:
|
||||
- Shows how market opportunities flow into prospects for each category
|
||||
- Demonstrates the conversion from prospects to actual sales
|
||||
- **Electronics** has the thickest flow (highest revenue conversion)
|
||||
- **Home & Garden** has the thinnest but represents growth opportunity
|
||||
|
||||
#### Key Business Insights:
|
||||
- **Total Revenue**: $1.75M across all categories
|
||||
- **Growth Pattern**: All categories show positive growth trends
|
||||
- **Category Performance**: Electronics (42.6%), Clothing (34%), Home & Garden (23.4%)
|
||||
- **Seasonal Trends**: Q3 appears to be your strongest quarter overall
|
||||
|
||||
Would you like me to create additional visualizations or dive deeper into any specific aspect of your sales data?
|
||||
:::
|
||||
|
||||
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
- **Visualization not appearing**: Ensure the Auto Visualiser extension is enabled and your data follows the expected format.
|
||||
|
||||
- **Data format errors**: Check that your data structure matches the required schema for the visualization type. The extension provides detailed error messages to guide you.
|
||||
|
||||
- **Performance with large datasets**: For very large datasets, consider aggregating or sampling your data before visualization.
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: Cloudflare MCP Server
|
||||
title: Cloudflare Extension
|
||||
description: Add Cloudflare MCP Servers as Goose Extensions
|
||||
unlisted: true
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: Container Use
|
||||
title: Container Use Extension
|
||||
description: Use Container-Use MCP as a Goose Extension
|
||||
---
|
||||
|
||||
|
|
|
|||
BIN
documentation/static/img/autovisualiser-radar.png
Normal file
BIN
documentation/static/img/autovisualiser-radar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
BIN
documentation/static/img/autovisualiser-sankey.png
Normal file
BIN
documentation/static/img/autovisualiser-sankey.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
BIN
documentation/static/img/autovisualiser-treemap.png
Normal file
BIN
documentation/static/img/autovisualiser-treemap.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
|
|
@ -50,6 +50,17 @@
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "autovisualiser",
|
||||
"name": "Auto Visualiser",
|
||||
"description": "Automatic data visualisation via MCP-UI",
|
||||
"command": "",
|
||||
"link": "https://github.com/block/goose/tree/main/crates/goose-mcp/src/autovisualiser",
|
||||
"installation_notes": "This is a built-in extension that comes with Goose and can be enabled on the Extensions page.",
|
||||
"is_builtin": true,
|
||||
"endorsed": true,
|
||||
"environmentVariables": []
|
||||
},
|
||||
{
|
||||
"id": "blender-mcp",
|
||||
"name": "Blender",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue