Macro Mixer - Generative UI Global Hackathon: Agentic Interfaces
AI Tinkerers - Hong Kong
Hackathon Showcase

Macro Mixer

3 members

Macro Mixer is a generative-UI workbench for map / reduce research. Instead of producing one long chatbot answer, it turns a question into a live spatial board of model-generated cards that can expand, stream, be selected, and collapse into synthesis while preserving provenance.

The operator starts with a seed question, then runs Expand to fan it out through multiple Gemini-powered lenses such as base case, dissent, and wildcards. Each lens streams into its own card in parallel. The user can then select the strongest or most interesting cards and run Reduce, which synthesizes the selected material into a new card. The source cards are tucked behind the synthesis rather than deleted, so the interface keeps the reasoning graph inspectable.

The real-world problem is that AI research workflows often create too much output across too many tabs, chats, and documents. Macro Mixer gives users a visual way to compare perspectives, preserve source lineage, compress noise, and iterate toward a better answer. The UI is generated by the agentic process itself: Gemini streams become structured board nodes, card states, provenance links, provider lanes, and event logs rather than static text.

The project is working code built with Next.js App Router, React 19, TypeScript, Tailwind CSS 4, @google/genai, and @ag-ui/core. The server-side /api/expand route opens parallel Gemini streaming calls, multiplexes them over one SSE response, and emits AG-UI-style lifecycle, text, and state events. The /api/reduce route streams one synthesis call over the selected cards. On the client, React consumes the SSE frames, updates the board, records provenance fields (parentIds, directive, lensId, provider, model, and status), and renders the evolving work surface.

AG-UI is used as the event contract for run lifecycle, streaming text messages, custom events, snapshots, and state deltas. The board state is also A2UI-ready: cards, provider lanes, active-card projections, and provenance metadata are modeled so generated or declarative UI surfaces can inspect and re-render them cleanly. For this hackathon cut we kept the app lean and direct with Gemini as the model provider, while leaving the event/state architecture ready for CopilotKit, MCP Apps, or multi-provider extensions later

AG-UI (@ag-ui/core) AI Tinkerers Google DeepMind Google Developer Group Cloud Hong Kong Google Developer Group Hong Kong Google Gemini API (@google/genai) Next.js App Router React 19 Regal Hotels Server-Sent Events Tailwind CSS 4 TypeScript