MirrorGroup: AI Synthetic User Flow Simulator

Inspiration

As product builders, I spend countless hours sketching out user journeys on digital whiteboards, but I rarely know where real users will stumble until after I launch. Traditional user testing takes weeks to organize, and product analytics only show us where people dropped off after the bounce has already happened. I wanted to create a tool that bridges the gap between static design and live testing. MirrorGroup was born from a desire to let product managers stress-test their UX logic instantly against unpredictable human behaviors before writing a single line of production code.

What it does

MirrorGroup is an interactive, graph-based simulator that lets you map out your product flows and see them executed by AI-driven synthetic cohorts. Using a clean canvas workspace, you can drag, drop, and connect standard screen views, branching decision points, and terminal end states. From there, you toggle on specific AI personas like "The Executive" or "The Low-Bandwidth User," each built with unique behavioral traits such as varying patience levels and technical literacy.

When you click run, the simulation engine drives these virtual users through your graph layout. It populates a real-time terminal log showing exactly where each persona hesitates or drops off, culminating in a detailed Friction Matrix report that offers actionable, AI-generated design recommendations to optimize your conversion paths.

How I built it

I engineered the entire application inside the Antigravity workspace using React and TypeScript. The front end relies on React Flow to deliver a responsive, infinite graph layout canvas with clean grid controls. For local state management, I chose Zustand to organize separate, lightweight atomic stores for the canvas nodes, user settings, simulation data, and onboarding baselines, ensuring top-tier rendering performance.

The intelligence engine communicates directly with the Groq API utilizing the llama-3.3-70b-versatile model. By running on specialized hardware and forcing strict JSON mode, I fetch rich behavioral profiles in milliseconds.

To quantify user drop-off mathematically, the engine calculates a localized Friction Index \( F_n(c) \) for a specific cohort \( c \) at any given node \( n \) using the following formula:

$$F_n(c) = \frac{\mathcal{D}_n \cdot \mathcal{A}_n}{\tau_c + \sigma_c}$$

Where \( \mathcal{D}_n \) represents the node description complexity score, \( \mathcal{A}_n \) represents the expected action friction coefficient, \( \tau_c \) is the cohort's Patience Index, and \( \sigma_c \) is the cohort's Decision Confidence.

The total Path Completion Probability \( P_{\text{success}}(c) \) across an entire wired journey path \( \mathcal{P} \) is computed as the product of survival probabilities across all traversed nodes:

$$P_{\text{success}}(c) = \prod_{n \in \mathcal{P}} \left( 1 - F_n(c) \right)$$

For telemetry and measurable trackability, I integrated the Novus.ai platform, booting the Pendo script right at our application entry point to handle anonymous interaction logging. The entire workspace is wrapped in a responsive Tailwind CSS package tailored to an industrial design language.

Challenges I ran into

Building an interactive tutorial that was truly state-driven proved to be a significant technical challenge. I did not want a passive tour where a user just clicks next through a set of text boxes. I used driver.js to create the background dimming and spotlight effects, but I had to program custom React lifecycle listeners. These listeners take baseline memory snapshots of the graph store and actively pause the onboarding steps until the user actually performs the required action, like dropping a node or wiring an edge.

I also had to engineer for the unexpected realities of live hackathon evaluation. If a global API goes down or hits a rate limit during a judge's review, the product cannot fail. I spent a lot of time writing a resilient try and catch fallback architecture. If the live Groq API encounters an error or lacks a key, the simulation engine quietly diverts to a vast local repository of pre-packaged mock data, keeping the app completely functional and crash-proof.

Accomplishments that I'm proud of

I am incredibly proud of shipping a highly complex, asynchronous graph layout application that passes its production build with zero TypeScript errors or compiler warnings. I succeeded in designing an onboarding flow that gracefully handles dynamic UI mounting, automatically opening edit sidebars and targeting elements that did not exist on the canvas moments prior. Furthermore, I successfully wired the Novus telemetry SDK directly into our React core to fulfill the tracking requirements smoothly.

What I learned

This project taught us how to seamlessly orchestrate generative AI payloads with highly interactive client-side graph visualizers. I also reinforced the idea that product execution is just as critical as the underlying technical logic. A highly responsive UI, crisp copy, and intuitive interactive feedback are what turn a cool technical proof of concept into a usable, high-value product.

What's next for MirrorGroup: AI Synthetic User Flow Simulator

The next step for MirrorGroup is expanding our synthetic cohort roster into a fully open sandbox where product teams can write custom prompts to generate hyper-specific customer demographics. I also plan to implement automated graph optimization. Instead of just highlighting a friction point, the AI will actively calculate and suggest the optimal structural path, drawing the ideal edge connections for the designer with a single click.

Built With

• css
• flow
• groq
• llama
• novus
• react
• sdk
• tailwind
• typescript
• vercel
• vite
• zustand