Lattice

Demo Video: https://drive.google.com/drive/folders/1gW38Uo8eXhXL2ytlwFfh7fpgX35Mb4ir?usp=sharing

Lattice is an agent-driven infinite canvas where you compose interactive UIs by describing them, not by reading a chatbot’s text reply, but by watching working dashboards, forms, and tools
materialize on a warm-paper canvas in real time.

Beyond chat — the core flow:

1. Drop any CSV / JSON / TXT onto the canvas. It’s parsed in-browser into a DataSource widget.
2. Click “+ box” and an empty Container drops at the viewport center.
3. Drag a wire from the data source’s orange output port to the container’s blue input port. Wire any number of sources to any number of containers, only wired data flows in.
4. Select the container and prompt: “build me a sales dashboard with KPIs, search, region filter, sortable table, and a bar chart of MRR by region.”
5. Llama 3.3 70B (via NVIDIA’s free build.nvidia.com API in OpenAI-compatible JSON mode) emits raw HTML/CSS/JS, which renders inside a sandboxed iframe with a small data-binding runtime

(data-field, data-bind, data-action, data-each). Inline script tags get window.__lattice.state and window.__lattice.sources synchronously injected, so charts compute, KPIs aggregate, and
search/sort/filter just work on first paint.

How the UI responds to the agent: a generate_html action with targetWidgetId atomically replaces a selected container’s content (snapshot recorded for revert); without target, a new container
shimmers in. Buttons, sliders, and inputs inside the iframe two-way bind to widget state via postMessage. Every widget tracks per-snapshot history — click any widget for a fullscreen view, scrub
the history, restore any prior version, or fork a snapshot into a parallel widget for branching exploration.

Technical execution: ~7,000 lines of working TypeScript. Two routes: / is the warm-paper agent canvas (the demo target), and /old is a separate experiment built on tldraw v5 with widget
archetypes (note, kanban, voting, timer) plus wires, compose preview, and per-widget version history. Repo includes 6 synthetic CSVs (sales, support tickets, web analytics, products, employees,
user events, expenses) for repro.

N/A