Mosaic

Mosaic transforms messy thoughts into beautiful visual thinking maps using GPT-5.6. Explore ideas, connect evidence, uncover risks, and make confident decisions one tile at a time.

Comment

Mosaic: Where Thoughts Become Beautiful Decisions

Inspiration

Most AI tools answer questions.

I wanted to build something that helps people think.

Whenever I face an important decision, whether it's studying abroad, pursuing a startup, choosing a career path, or planning a project, I usually end up with dozens of scattered notes, browser tabs, sticky notes, and conversations. Traditional chatbots produce long paragraphs, but real thinking isn't linear.

That inspired Mosaic: a visual workspace where AI doesn't replace your reasoning, it helps you organize and expand it.

Instead of generating another wall of text, Mosaic transforms one question into a connected network of ideas, evidence, risks, opportunities, assumptions, and recommendations.

What it does

A user begins with a single question.

"Should I study abroad?"

GPT-5.6 generates a visual reasoning map made of interconnected paper-like tiles.

Each tile represents a different aspect of the decision:

  • Ideas
  • Questions
  • Evidence
  • Risks
  • Opportunities
  • Costs
  • Recommendations

Users can:

  • Drag and rearrange tiles
  • Edit thoughts
  • Add their own ideas
  • Continue exploring with AI
  • Keep notes for every tile
  • Save their thinking locally
  • Return later and continue building their Mosaic

Instead of producing one long answer, the experience becomes an evolving visual conversation.

How I built it

Mosaic is built using:

  • Next.js
  • React
  • TypeScript
  • React Flow
  • Tailwind CSS
  • OpenAI Responses API
  • GPT-5.6
  • Codex

The application asks GPT-5.6 to generate structured JSON representing connected reasoning.

Conceptually, the workflow can be viewed as

$$ \text{Question} \rightarrow \text{Structured Reasoning} \rightarrow \text{Validated JSON} \rightarrow \text{Interactive Thinking Map} $$

The JSON is validated before being rendered as an interactive visual workspace.

Additional features include:

  • Browser persistence
  • Continue Thinking workflow
  • Interactive Thinking Notebook
  • Editable paper tiles
  • Animated graph generation
  • Scrapbook-inspired interface
  • Responsive design

How GPT-5.6 and Codex were used

This project was intentionally built around GPT-5.6 and Codex for the OpenAI Build Week Hackathon.

GPT-5.6

GPT-5.6 powers the Visual Thinking Engine by:

  • generating structured reasoning
  • organizing ideas into connected nodes
  • expanding existing Mosaics through "Continue Thinking"
  • producing validated JSON rather than plain text
  • categorizing reasoning into evidence, risks, opportunities, assumptions, recommendations, and questions

Rather than generating paragraphs, GPT-5.6 creates structured knowledge that becomes interactive inside the application.

Codex

Codex acted as my AI pair programmer throughout development.

It accelerated implementation of:

  • React Flow canvas
  • Browser persistence
  • Thinking Notebook
  • Continue Thinking workflow
  • API integration
  • TypeScript refactoring
  • UI polishing
  • Runtime debugging
  • Interactive editing features

This allowed me to spend more time refining the product vision and user experience while rapidly iterating on implementation.

Challenges I ran into

One of the biggest challenges was designing prompts that consistently produced structured JSON instead of conversational text.

I also had to:

  • Validate AI responses safely
  • Prevent duplicate continuation nodes
  • Preserve user edits while expanding AI reasoning
  • Position newly generated tiles naturally
  • Design a scrapbook-inspired interface that remained intuitive

Balancing AI generation with a smooth interactive editing experience required multiple iterations.

What I learned

This project taught me that building AI products is much more than calling an API.

I learned how to:

  • Design structured prompting strategies
  • Validate AI-generated data
  • Build interactive visual reasoning systems
  • Combine frontend engineering with AI workflows
  • Collaborate effectively with AI coding assistants

The biggest takeaway was that AI becomes much more useful when it helps users think, rather than simply providing answers.

What's next for Mosaic

Future improvements include:

  • Real-time collaboration
  • Cloud synchronization
  • Exportable thinking maps
  • Multiple reasoning templates
  • AI-supported research citations
  • Voice-to-Mosaic workflows
  • Collaborative brainstorming sessions
  • Richer visual layouts and animations

The long-term goal is to make Mosaic a creative workspace where planning, brainstorming, and decision-making feel visual, intuitive, and enjoyable.

Final Thought

If traditional AI chat follows the pattern

$$ \text{Question} \rightarrow \text{Answer}, $$

then Mosaic aims for

$$ \text{Question} \rightarrow \text{Exploration} \rightarrow \text{Connections} \rightarrow \text{Better Decisions}. $$

Built with ❤️ using GPT-5.6 and Codex for the OpenAI Build Week Hackathon 2026.

Built With

Share this project:

Updates