SugarStack

• 

  dashboard

Inspiration

Sugar is everywhere, but grams on a nutrition label are difficult to visualize. People also drink different sizes, choose diet versions, share bottles, or only finish part of a serving.

We built SugarStack to make those everyday choices instantly understandable—and to explore how a human and an AI agent can work with the same health-tracking interface through WebMCP.

What it does

SugarStack is a visual sugar and calorie tracker that:

• Tracks drinks and foods using flexible amounts and quantities
• Distinguishes regular, diet and zero-sugar alternatives
• Supports custom entries using values from the product label
• Converts sugar into an easy-to-understand cube estimate
• Displays sugar and calories together
• Synchronizes the selected date, daily log, headline total and monthly calendar
• Highlights low, medium and high-sugar days
• Stores personal entries locally without requiring an account or API key

The values are presented as typical label estimates rather than medical advice, and users can enter exact information from their own product labels.

How we used WebMCP

WebMCP is a core part of the product rather than an extra chatbot feature. SugarStack exposes five focused tools:

• sugarstack_get_day
• sugarstack_search_catalog
• sugarstack_add_items
• sugarstack_update_entry
• sugarstack_remove_entry

An agent can search the catalogue, add validated items, adjust portions, remove mistakes and summarize the selected day.

Most importantly, the agent operates on the same visible state as the person. When an agent changes an entry, the date, log, sugar total, calories and calendar update on screen. Users can immediately inspect, verify or correct every action.

For example, someone can ask:

Log a medium cola and two small lattes. Then change the cola to diet and show me the updated total.

The agent can complete that workflow using structured WebMCP tools while SugarStack provides a clear visual result.

How we built it

SugarStack was built with TypeScript, React, Vinext, Vite and Tailwind CSS. Its responsive interface uses reusable components and local browser storage for persistence.

The WebMCP layer registers structured tool definitions with narrow input schemas, catalogue identifiers, amount limits and quantity validation. Read-only and state-changing tools are intentionally separated so agents can inspect before acting.

The live experience includes preloaded demonstration history so judges can immediately explore the synchronized monthly view without creating weeks of sample data.

Challenges we faced

The hardest challenge was designing WebMCP tools that were useful without exposing a large, confusing interface. We reduced the contract to five actions that correspond directly to real user tasks.

Another challenge was keeping every part of the interface synchronized. Selecting another date or changing an entry needed to update the daily log, hero total, calories, cube estimate and calendar consistently.

We also had to balance simplicity with flexible data entry. SugarStack needed to remain approachable for someone who just wants to tap “Cola,” while still supporting different serving sizes, quantities, diet variants and exact label values.

What we learned

We learned that good agent integration is not about exposing the largest number of tools. It is about creating a small, predictable contract with visible outcomes.

WebMCP works especially well when the website remains the source of truth: the agent can act efficiently, while the person maintains context, control and trust.

What we are proud of

SugarStack combines a polished human interface with a practical agent workflow without requiring an external nutrition API, account or API key.

Every important capability can be understood and demonstrated in under two minutes.

What is next

Future versions could add optional barcode scanning, user-defined goals, additional nutrients, exportable reports and verified regional nutrition catalogues—while preserving the local-first, human-verifiable experience.

Built With

• cloudflare-workers
• codex
• css3
• html5
• localstorage
• lucide-react
• openai-sites
• react
• shadcn/ui
• tailwind-css
• typescript
• vinext
• vite
• webmcp