DEV Community

Cover image for AI Engineering: Advent of AI with goose Day 3
Erica
Erica

Posted on

AI Engineering: Advent of AI with goose Day 3

#goose #ai #adventofai

Visualizing 5,294 Votes with AI (Auto-Visualiser + MCP-UI)

An Emergency data viz for a Hot Cocoa Championship using Goose's Auto-Visualiser extension. Tournament brackets, radar charts, and the magic of MCP-UI!

Day 3: The Hot Cocoa Championship Crisis ☕📊

The Urgent Email
It's December 3rd, and my inbox just was piping hot!:

URGENT - Hot Cocoa Championship Results Need Visualization

Hey there! The Hot Cocoa Championship was AMAZING but we need these results visualized for the big awards ceremony tomorrow. Our data person is sick and we're in a panic.

The ceremony is tomorrow at 2 PM and we need to print these for the big screen!

Sarah Chen

Winter Festival Coordinator

(Very Stressed)

Attached: A massive markdown file with tournament data, voting breakdowns, recipe scorecards, and 5,294 total votes.

Deadline: 18 hours.

My data viz experience: Minimal.

Panic level: Rising.

Enter the Auto-Visualiser
This is where I discovered one of the coolest AI tools I've ever used:
goose's Auto-Visualiser extension.

The Auto Visualiser made charting effortless, initially I thought I would need to add an additional detailed prompt, but I did not need to because it automatically picked the right visualization to highlight the detailed data given to input. I then asked goose to generate detailed HTML visuals / summation. I like goose's sentiment its "friendly" albeit professional.

Here's the magic: You paste data and describe what you want and the Charts render directly in your conversation. No code. No exports. No separate tools.

It's powered by MCP-UI (Model Context Protocol UI), which returns interactive UI components instead of just text. Mind-blowing.

The Data
Sarah sent me everything:

Tournament Bracket

  • Quarterfinals: 4 matches
  • Semifinals: 2 matches
  • Championship: 1 final showdown
  • Winner: Dark Chocolate Decadence 🏆

Recipe Scorecards
8 recipes rated on:

  • Richness (0-10)
  • Sweetness (0-10)
  • Creativity (0-10)
  • Presentation (0-10)

Voting Breakdown

  • Period 1 (Morning): 1,247 votes
  • Period 2 (Afternoon): 1,891 votes
  • Period 3 (Evening): 2,156 votes
  • Total: 5,294 votes

Fun Stats

  • Closest match: Peppermint Dream vs Salted Caramel Swirl (14 vote difference!)
  • Biggest blowout: Dark Chocolate Decadence vs White Chocolate Wonder (73 votes)
  • Most controversial: Spicy Mexican Mocha

What I Created
🏆 Tournament Bracket Flow (Sankey Diagram)

The first visualization showed the complete tournament progression - how votes flowed from quarterfinals through semifinals to the championship.

Why Sankey? Perfect for showing how competitors advanced and where votes accumulated. You can literally see Dark Chocolate Decadence's dominance.

Key insights:

  • Peppermint Dream had the most votes in Round 1 (312!)
  • Dark Chocolate Decadence peaked in the finals (678 votes)
  • The semifinals had massive voter turnout

📊 Recipe Attribute Comparison (Radar Chart)

This was my favorite - an 8-way radar chart comparing all recipes across 4 attributes.

Visual patterns emerged:

  • Dark Chocolate Decadence: Perfect 10/10 richness and presentation
  • White Chocolate Wonder: Maxed sweetness but low everything else
  • Spicy Mexican Mocha: High creativity (9/10) but polarizing
  • Classic Swiss Velvet: Balanced across all attributes

The story: Dark Chocolate won because it excelled where it mattered (richness, presentation) while maintaining good creativity.

📈 Voting Trends Over Time
A line chart showing how voter engagement increased throughout the day:

  • Morning: 1,247 votes (people waking up)
  • Afternoon: 1,891 votes (+52% increase!)
  • Evening: 2,156 votes (peak engagement)

Insight: Evening voters decided the championship. Marketing lesson: timing matters!

🥊 Head-to-Head Matchup Analysis
Bar charts for each round showing vote distributions:

  • Round 1: 4 matches, clear winners
  • Round 2: Closer battles, higher stakes
  • Finals: The epic 678 vs 623 showdown

The nail-biter: Peppermint Dream vs Salted Caramel Swirl in Round 1 - only 14 votes separated them!

The AI Engineering Process

Here's what blew my mind: I didn't write visualization code. I had a conversation with Goose.

My Prompts:

"Create a tournament bracket showing how each recipe progressed 
through quarterfinals, semifinals, and the championship."
Enter fullscreen mode Exit fullscreen mode

Result: Beautiful Sankey diagram, instantly rendered.

"Compare all 8 recipes on a radar chart using their judge scores 
for richness, sweetness, creativity, and presentation."
Enter fullscreen mode Exit fullscreen mode

Result: Multi-series radar chart with color-coded recipes.

"Show voting trends across the three time periods."
Enter fullscreen mode Exit fullscreen mode

Result: Line chart with clear trend visualization.
Charts Created: 6+
Crisis Averted: Yes!

The Tech Behind the Magic
MCP-UI (Model Context Protocol UI)

Traditional AI outputs text. MCP-UI outputs interactive components:
Traditional: "Here's the data formatted as JSON..."
MCP-UI: [Renders actual interactive chart]

This is a paradigm shift in AI interfaces. Instead of describing visualizations, the AI creates them.

Auto-Visualiser Extension
Built on MCP-UI, it:

  1. Parses your data (CSV, JSON, markdown, whatever)
  2. Understands your visualization request
  3. Chooses the appropriate chart type
  4. Renders it with proper styling
  5. Makes it interactive (hover, zoom, filter)

No configuration needed. Just describe what you want.
What I Learned

Data Storytelling > Raw Data
The tournament data was just numbers. The visualizations told a story:

  • Dark Chocolate's dominance
  • Peppermint's strong start
  • Evening voters' impact
  • Recipe attribute patterns

AI Understands Context
I didn't need to specify "use a Sankey diagram for tournament flow." Goose understood that tournament progression = flow visualization = Sankey. That's intelligence.

Speed is a Competitive Advantage
Traditional workflow:

  1. Export data to CSV
  2. Open Excel/Tableau/Python
  3. Clean data
  4. Choose chart type
  5. Configure styling
  6. Export image
  7. Repeat for each chart

Time: Hours
AI workflow:

  1. Paste data
  2. Describe what you want
  3. Done

Time: Minutes

Iteration is Effortless
"Make the radar chart bigger"

"Add a legend"

"Change colors to match the festival theme"

"Show only the top 4 recipes"
Each request took seconds. No re-coding, no re-exporting.

MCP-UI is the Future
This isn't just about charts. MCP-UI can render:

  • Interactive forms
  • Data tables
  • Maps
  • Dashboards
  • Custom UI components

We're moving from "AI can assist us in writing code" to "AI that creates interfaces."

What I Learned
These skills apply to:

  • Business reporting (quarterly results, KPIs)
  • Research presentations (academic papers, conferences)
  • Marketing analytics (campaign performance)
  • Emergency situations (like Sarah's crisis!)
  • Data exploration (understand patterns quickly)

The Results
Sarah got her visualizations with 17 hours to spare. The awards ceremony was a hit. Dark Chocolate Decadence got its moment in the spotlight. 🏆
More importantly, I learned that AI can democratize data visualization. You don't need to be a data scientist or designer to create professional charts.

Performance & Quality

Chart quality: Publication-ready

Interactivity: Hover tooltips, zoom, pan

Export options: PNG, SVG, PDF

Customization: Colors, labels, legends

Accuracy: 100% (AI reads data correctly)

Bonus Challenges I Tackled
Beginner 🌟
Created 5+ different chart types from the same data:

  • Sankey (tournament flow)
  • Radar (recipe comparison)
  • Line (voting trends)
  • Bar (matchup results)
  • Pie (vote distribution)

Intermediate 🌟🌟
Created "what-if" scenarios:

  • "What if Peppermint Dream had won?"
  • "What if voting stopped after Period 2?"
  • "What if Spicy Mexican Mocha advanced?"

Advanced 🌟🌟🌟
Had Goose generate a completely NEW 16-recipe tournament with realistic voting patterns, then visualized it. This tested whether the AI understood tournament structure deeply enough to create synthetic but realistic data.

Result: It did. Perfectly.

What's Next?
Day 4 is coming: Building and deploying a full festival website. The stakes keep rising, and I'm learning that AI engineering is less about coding and more about orchestrating AI tools effectively.

Try It Yourself
Want to visualize your own data?

  1. Get Goose Desktop from block.github.io/goose
  2. Go to Settings → Extensions
  3. Enable Auto-Visualiser
  4. Get free credits at goose-credits.dev (code: ADVENTDAY3)
  5. Paste your data and describe what you want to see

Resources

Final Thoughts
This challenge changed how I think about data visualization. We can master tools like Tableau or D3.js (those are great). It's about understanding what story your data tells and communicating that clearly to AI.

Both me and AI handles the technical implementation. I handle the insight and storytelling.

Day 3: Complete. Championship: Visualized. Sarah: No longer stressed. ☕📊✨

What data would YOU visualize with AI? Drop a comment! 👇

This post is part of my Advent of AI journey - AI Engineering: Advent of AI with goose Day 3 of AI engineering challenges.

Follow along for more AI adventures with Eri!

Top comments (0)