|
| 1 | +--- |
| 2 | +title: Auto Visualiser Extension |
| 3 | +description: Add automatic data visualization to Goose |
| 4 | +--- |
| 5 | + |
| 6 | +import Tabs from '@theme/Tabs'; |
| 7 | +import TabItem from '@theme/TabItem'; |
| 8 | +import GooseBuiltinInstaller from '@site/src/components/GooseBuiltinInstaller'; |
| 9 | +import ImageCarousel from '@site/src/components/ImageCarousel'; |
| 10 | + |
| 11 | +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. |
| 12 | + |
| 13 | +This guide will cover enabling and using the Auto Visualiser MCP Server. |
| 14 | + |
| 15 | +## Configuration |
| 16 | + |
| 17 | + |
| 18 | +<Tabs groupId="interface"> |
| 19 | + <TabItem value="ui" label="Goose Desktop" default> |
| 20 | + <GooseBuiltinInstaller |
| 21 | + extensionName="Auto Visualiser" |
| 22 | + description="Automatically generate interactive data visualizations" |
| 23 | + /> |
| 24 | + </TabItem> |
| 25 | + <TabItem value="cli" label="Goose CLI"> |
| 26 | + |
| 27 | + 1. Run the `configure` command: |
| 28 | + ```sh |
| 29 | + goose configure |
| 30 | + ``` |
| 31 | + |
| 32 | + 2. Choose to `Toggle Extensions` |
| 33 | + ```sh |
| 34 | + ┌ goose-configure |
| 35 | + │ |
| 36 | + ◇ What would you like you configure? |
| 37 | + │ Toggle Extensions |
| 38 | + │ |
| 39 | + ◆ Enable extensions: (use "space" to toggle and "enter" to submit) |
| 40 | + // highlight-start |
| 41 | + │ ● autovisualiser |
| 42 | + // highlight-end |
| 43 | + └ Extension settings updated successfully |
| 44 | + ``` |
| 45 | + </TabItem> |
| 46 | +</Tabs> |
| 47 | + |
| 48 | + |
| 49 | +## Visualization Types |
| 50 | + |
| 51 | +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. |
| 52 | + |
| 53 | +| Chart Type | Description | Detected When Prompt Implies | |
| 54 | +|------------|-------------|------------------------------| |
| 55 | +| **Sankey Diagrams** | Flow data visualization showing relationships and quantities | Flow or process data <br/>(workflows, funnels, process datasets) | |
| 56 | +| **Radar Charts** | Multi-dimensional data comparison (spider charts) | Multi-dimensional comparisons <br/>(performance metrics, feature comparisons) | |
| 57 | +| **Donut/Pie Charts** | Categorical data visualization with support for multiple charts | Categorical proportions <br/>(percentage breakdowns, category distributions) | |
| 58 | +| **Treemap Visualizations** | Hierarchical data with proportional area representation | Hierarchical data <br/>(nested categories, organizational structures) | |
| 59 | +| **Chord Diagrams** | Relationship and flow visualization between entities | Relationship matrices <br/>(network connections, cross-references) | |
| 60 | +| **Interactive Maps** | Geographic data visualization with location markers using Leaflet | Geographic information <br/>(location data, coordinates, addresses) | |
| 61 | +| **Line/Bar/Scatter Charts** | Traditional chart types for data analysis | Time series data <br/>(historical data, trends over time) | |
| 62 | + |
| 63 | +### Example Visualizations |
| 64 | + |
| 65 | +<ImageCarousel id="flappy" width="40%" images={[ |
| 66 | + |
| 67 | + require('/blog/2025-08-27-autovisualiser-with-mcp-ui/sankey.png').default, |
| 68 | + require('/blog/2025-08-27-autovisualiser-with-mcp-ui/treemap.png').default, |
| 69 | + ]} |
| 70 | + names={[ |
| 71 | + "Sankey", |
| 72 | + "Treemap" |
| 73 | + ]} /> |
| 74 | + |
| 75 | +### Features |
| 76 | + |
| 77 | +- **Automatic Detection**: Goose intelligently chooses the best visualization type for your data |
| 78 | +- **Interactive Components**: All visualizations are interactive with hover effects, zooming, and drilling capabilities |
| 79 | +- **MCP-UI Integration**: Leverages the emerging MCP-UI standard for seamless rendering |
| 80 | +- **Multiple Chart Support**: Can render multiple visualizations in a single response |
| 81 | +- **Customizable Styling**: Supports custom colors, labels, and formatting options |
| 82 | +- **Export Capability**: Visualizations can be saved as HTML files for sharing |
| 83 | + |
| 84 | + |
| 85 | +## Example Usage |
| 86 | + |
| 87 | +In this example, I'll have Goose analyze some sales data and automatically visualize it using the Auto Visualiser extension. |
| 88 | + |
| 89 | + |
| 90 | +### Goose Prompt |
| 91 | +``` |
| 92 | +I have quarterly sales data for different product categories. Can you help me understand: |
| 93 | +1. The hierarchical breakdown of revenue across our nested product categories |
| 94 | +2. How our performance metrics compare across all four quarters |
| 95 | +3. The customer flow through our sales funnel process |
| 96 | +
|
| 97 | +Here's the data: |
| 98 | +- Electronics: Q1: $150k, Q2: $180k, Q3: $220k, Q4: $195k |
| 99 | +- Clothing: Q1: $120k, Q2: $140k, Q3: $160k, Q4: $175k |
| 100 | +- Home & Garden: Q1: $80k, Q2: $95k, Q3: $110k, Q4: $125k |
| 101 | +``` |
| 102 | + |
| 103 | +### Goose Output |
| 104 | + |
| 105 | +:::note Desktop |
| 106 | + |
| 107 | +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. |
| 108 | + |
| 109 | +First, let's visualize the hierarchical breakdown of your revenue across product categories: |
| 110 | + |
| 111 | + |
| 112 | + |
| 113 | + |
| 114 | + |
| 115 | + |
| 116 | + |
| 117 | + |
| 118 | +I've created three comprehensive visualizations to help you understand your quarterly sales data from different perspectives: |
| 119 | + |
| 120 | +#### 1. Hierarchical Revenue Breakdown (Treemap) |
| 121 | +The **treemap visualization** shows your revenue hierarchy with proportional areas representing the relative size of each category and quarter. Key insights: |
| 122 | +- **Electronics** is your largest revenue generator ($745k total) |
| 123 | +- **Clothing** follows as second largest ($595k total) |
| 124 | +- **Home & Garden** is smallest but growing ($410k total) |
| 125 | +- You can see how each quarter contributes within each category |
| 126 | + |
| 127 | +#### 2. Performance Metrics Comparison (Radar Chart) |
| 128 | +The **radar chart** displays how all three product categories performed across the four quarters, making it easy to compare: |
| 129 | +- **Electronics** shows strong Q3 performance ($220k) with slight Q4 decline |
| 130 | +- **Clothing** demonstrates consistent growth throughout the year |
| 131 | +- **Home & Garden** shows steady upward trajectory across all quarters |
| 132 | +- All categories show their strongest performance in Q3-Q4 |
| 133 | + |
| 134 | +#### 3. Sales Funnel Flow (Sankey Diagram) |
| 135 | +The **Sankey diagram** represents customer flow through your sales process, with flow thickness proportional to revenue: |
| 136 | +- Shows how market opportunities flow into prospects for each category |
| 137 | +- Demonstrates the conversion from prospects to actual sales |
| 138 | +- **Electronics** has the thickest flow (highest revenue conversion) |
| 139 | +- **Home & Garden** has the thinnest but represents growth opportunity |
| 140 | + |
| 141 | +#### Key Business Insights: |
| 142 | +- **Total Revenue**: $1.75M across all categories |
| 143 | +- **Growth Pattern**: All categories show positive growth trends |
| 144 | +- **Category Performance**: Electronics (42.6%), Clothing (34%), Home & Garden (23.4%) |
| 145 | +- **Seasonal Trends**: Q3 appears to be your strongest quarter overall |
| 146 | + |
| 147 | +Would you like me to create additional visualizations or dive deeper into any specific aspect of your sales data? |
| 148 | +::: |
| 149 | + |
| 150 | + |
| 151 | + |
| 152 | +## Troubleshooting |
| 153 | + |
| 154 | +- **Visualization not appearing**: Ensure the Auto Visualiser extension is enabled and your data follows the expected format. |
| 155 | + |
| 156 | +- **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. |
| 157 | + |
| 158 | +- **Performance with large datasets**: For very large datasets, consider aggregating or sampling your data before visualization. |
| 159 | + |
0 commit comments