Vivid: Interactive Product Models

Turn plain text into shareable interactives you can poke. Vivid uses AI to map descriptions to hand-built templates, guaranteeing reliable, polished product models instantly—without generating code.

Comment

Inspiration

For complex software products, the most expensive moments are explanations. Pricing stalls deals because prospects constantly ask, "What will this actually cost us as we scale?" Architecture discussions slow down security reviews. Hard-to-follow onboarding burns support tickets.

Static slides and diagrams fail because nobody internalizes a system until they can change an input and watch it react. We realized that if we could make explanations "pokeable," buyers could model their own bills and new hires could walk through data flows themselves.

What it does

Vivid turns a plain-English description of how a product works into a live, interactive, shareable explainer.

Type something like: "how our pricing works: base fee plus per-seat plus usage overage" or "our trial-to-paid funnel where users drop before connecting a data source".

Vivid instantly classifies your description into one of five hand-built interactive templates (funnel, flow, system, tradeoff, simulator), fills a typed configuration, and renders an interactive UI on a shareable URL complete with a premium social preview.

How we built it: The Architecture

Our app is built on Next.js 14, TypeScript, and Tailwind CSS/Framer Motion. Data is persisted with Supabase, and we dogfood Novus to instrument the product usage funnel.

But the real challenge was ensuring reliability. The biggest failure mode of "AI building UI" is broken state, dead controls, and layout chaos. If an AI generates a React component, it breaks half the time.

Our primary technical bet solved this: The AI never writes interactive code.

Instead, the model is strictly constrained to two tasks:

  1. Classify the description into one of five hand-crafted React templates.
  2. Populate a JSON config that fills that template.

Pluggable AI & Strict Contracts

We built the LLM layer to be completely provider-pluggable, automatically detecting API keys and routing seamlessly to Groq, Gemini, OpenRouter, or Anthropic.

The output from the LLM never touches the DOM directly. It validates against a Zod discriminated-union contract keyed on the template ID. If the LLM generates a configuration with the wrong shape, it violates the schema. We catch this server-side, issue one strict prompt retry to correct the mistake, and only then persist the result to the database. A broken interactive never renders.

Safe Simulation (No eval)

One of our templates is a fully functional "Simulator" that generates mathematical formulas on the fly (perfect for pricing models). Executing AI-generated math is a massive security risk. To solve this, we never use eval. Expressions are run through a hardened mathjs instance. We parse the Abstract Syntax Tree (AST) of the generated expression and strictly check it against a whitelist of declared input IDs. If the LLM invents a rogue variable or malicious function, the validation fails instantly.

Challenges we ran into

Aside from preventing hallucinated code, our biggest challenge was UX engagement. We built an incredible generation tool, but we needed to prove users would actually "poke" the generated interfaces.

By integrating Novus, we created a live interaction tracker called Pulse (measuring views, interactions, and shares). It became clear early on that some users would generate a model but not realize they could interact with it. Pulse highlighted this drop-off, allowing us to pivot our UI design, adding "drag to interactive" hints and a seeded live example on the landing page, dramatically increasing engagement rates.

The AI Coach

Because we had high-quality interaction data via Novus, we built a Coach agent. The Coach reads the config and its live Pulse data, then suggests a concrete improvement to the user (e.g., "Only 12% of users are interacting with this pricing slider; consider changing the default input value to better reflect an average user's starting point").

What we learned

Building Vivid proved that bounded AI generation is the future of reliable AI products. Constraining the LLM to generate configuration rather than raw code drastically improved performance, allowed us to use extremely fast models like Gemini Flash and LLaMA 3 via Groq, and built ultimate user trust.

What's next for Vivid

Taking Vivid to the next level involves diving deeper into the analytics. We want to add per-step Novus heatmaps (e.g., "most viewers never reach step 3 of the flow"), embeddable widget support so teams can put these explainers directly in their Notion or Notion docs, and collaborative team workspaces.

Built With

Share this project:

Updates