Tessera

Problem

AI can generate a dashboard in a minute. The harder problem starts when that dashboard has to survive real work: someone moves a chart, changes the visual language, adds a hand-built analysis — and then next month's workbook arrives with renamed columns, new rows, and a business definition that may have quietly changed.

Most generated dashboards end as outputs. Maintaining one means editing markup, rewriting a large JSON document, or asking a model to regenerate the artifact and hoping the human's changes survive. Over a few reporting cycles, maintenance costs as much as rebuilding.

Solution

Tessera is a visual analytics workspace for recurring operational reporting. Source workbooks, cleaned analytical tables, reusable transformation recipes, dashboard editions, data bindings, provenance, layout, and styling are all durable application objects, not rendered output.

The person uses the visual interface. An external agent uses Tessera through WebMCP. Both paths resolve to the same typed command layer and the same project state. If the agent creates a chart, the person can drag and restyle it. If the person builds a visualization by hand, the agent encounters it as part of the same dashboard on the next refresh. If the person leaves an empty tile with a written brief, the agent can find it and build into that exact spot.

When a new reporting period arrives, Tessera applies the saved recipe to the new source and creates a new edition of the existing dashboard. Layout, presentation, illustrations, and manual work persist; values and period-specific commentary change; earlier months remain intact behind a month selector. When a source change is genuinely ambiguous — a facility that stopped reporting a metric, a column that didn't exist last month — Tessera raises a Decision Needed instead of guessing. A person resolves it, hands the work back, and the interrupted workflow continues.

Why This Matters

Operations, finance, and analytics teams don't need another disposable chart generator. They need reporting artifacts that outlive the conversation that created them.

WebMCP fits because Tessera is an application with many structured, composable operations: inspect a source, outline regions, map columns, create a clean table, save a recipe, add a dashboard block, bind a metric, style an exact element, inspect the result. Exposing those native operations gives an agent a reliable application to operate rather than a page of buttons to guess through or a generated artifact to rewrite.

The result is one artifact with two operators. Agent work compounds across reporting periods, while business judgment and final approval stay with the person responsible for the report.

How We Used AI

In the product, AI stays outside Tessera. A connected browser agent discovers Tessera's WebMCP tools, inspects the active workspace, and calls validated operations to prepare data and compose or maintain dashboards. Tessera does not embed a chatbot, does not maintain a second agent-only state model, and does not accept arbitrary generated markup. The one exception is illustration: from a plain-language request, the external agent can generate a graphic and place it through Tessera as a recolorable illustration block in the product's house style, still part of the dashboard like any other object.

AI tools were also used during development to review the architecture, refine the monthly workflow, diagnose interaction issues, improve accessibility, and exercise the product end to end. Every generated change went through the same build, lint, and automated test suite used for the final release.

How We Used Codex

Codex helped turn the working product into a submission-ready release. It reviewed the repository and WebMCP surface, implemented and tested polish across the warehouse and dashboard studio, checked manual and agent parity, performed live browser verification, and ran the full release quality gate.

Key Features

• A complete monthly data workflow: upload, source inspection, multi-region outlining, field mapping, decision capture, clean-draft review, and approval.
• Persistent recipes that carry learned structure and column mappings into later reporting periods.
• Dashboard month editions behind a single month selector — layout, styling, illustrations, and hand-built blocks preserved while bound values refresh; prior months never overwritten.
• Decision Needed: human-only gates for ambiguous source changes and for monthly approval, with a resumable handoff back to the agent.
• Draft markers: empty tiles with a written brief that the agent discovers and builds into, at the position the person chose.
• One-click provenance from a dashboard metric to its cleaned table and on to the source workbook.
• A 12-column canvas with drag, resize, stacking, undo, redo, presentation kits, and per-block inspectors.
• KPI, text, table, illustration, bar, line, donut, gauge, scatter, heatmap, treemap, and Sankey blocks.
• Visible WebMCP connection status and named operation activity — no embedded assistant.
• Per-visitor hosted workspaces, plus optional local folder mirroring to readable project, dashboard, and dataset files.

Architecture

Tessera is a React and TypeScript application backed by a validated command bus. Manual controls and WebMCP tool calls execute the same command definitions, so validation, persistence, live synchronization, and undo history cannot drift between the two interfaces.

The browser registers seven native WebMCP tools: four high-value direct tools plus a three-tool catalog, schema, and execution gateway. The gateway exposes 64 agent-facing operations while keeping the browser's native tool budget small. Every input is checked against its JSON schema at the boundary. Mutations return an updated dashboard or project snapshot so an agent can verify its work without extra calls. Read-only and untrusted-content annotations follow the current WebMCP contract. Two judgment and approval operations are intentionally withheld from the agent catalog and remain available only in the human interface.

Hosted state uses revision-aware persistence, isolated per visitor. Uploads are stored separately and scoped to the same workspace. The local server mirrors the same API, and an optional folder connection writes readable project JSON and source files to a location the user chooses.

Built With

• business-intelligence
• chatgpt
• data-visualization
• human-in-the-loop
• node.js
• openai
• react
• typescript
• vite
• webmcp