Mosaic | Devpost

debug window
info panel + search bar
app window + theme selector

Inspiration

Mosaic was built because accessing data shouldn't feel like work. Whether it's your Spotify wrapped, market trends, or fitness stats, traditional dashboards are static, boring, and require you to go searching. It's about making data exploration fast, interactive, and actually engaging. Mosaic turns what used to be tedious analysis into an intuitive, visual conversation. Data access reimagined for how people actually think and explore.

What it does

Mosaic allows for a simple prompt, then the user can watch a custom UI about their prompt materialize instantly. By aggregating data from multiple sources (Spotify, fitness, stocks, etc.), it democratizes data storytelling, making complex visualization accessible without technical expertise.

How we built it

We built Mosaic with a FastAPI backend using LiteLLM to support multiple AI models (GPT-4o) for dynamic UI generation. The system uses a planning phase that analyzes user intent and determines which data sources to fetch from—integrating with Spotify, ESPN, Yahoo Finance, Strava, and Clash Royale APIs. We created a dynamic tool generator to automatically generate function calling schemas from fetcher classes. The frontend uses Next.js 16 with React 19, streaming server-sent events to render HTML in real-time as the AI generates it. We implemented morphdom for efficient DOM diffing and Zustand for state management, allowing smooth progressive rendering of components.

Challenges we ran into

Our biggest challenge was getting the AI to generate consistent, properly structured HTML that could render progressively without breaking upon clicking. We had to design a strict component system with data-binding patterns to prevent the AI from hallucinating synthetic data. Another major hurdle was implementing OAuth flows for multiple services (especially Spotify's token refresh) while keeping the authentication state synchronized across the application.

Accomplishments that we're proud of

We're incredibly proud of achieving real-time UI generation that actually works. We are also super proud of successfully integrating different data sources with proper OAuth and error handling is a major win. Lastly, we are proud of implementing proper streaming architecture where data flows from the backend through SSE to progressive DOM updates which creates a smooth user experience.

What we learned

We learned that building with generative AI requires designing strict constraints. The more structure you provide (component schemas, data-binding patterns), the better the output. We also learned that OAuth flows are complex but crucial for real user data. LiteLLM is powerful for multi-model support but requires careful API key management. Server-sent events are perfect for streaming AI responses, and morphdom makes progressive rendering efficient. We also discovered that planning phases (classify intent → fetch data → generate UI) create better results than end-to-end generation.

What's next for Mosaic

Next, we want to add more data sources (GitHub, Google Calendar, banking APIs) to create truly comprehensive personal dashboards. Adding collaborative features where users can share generated visualizations is another consideration, alongside voice input and implement a refinement loop where users can iterate on generated UIs with natural language edits. Finally, we're considering a plugin system where developers can contribute custom data fetchers and visualization components, turning Mosaic into a platform for AI-powered data storytelling.