Chat with an LLM in two columns: text on the left, a live dashboard on the right. The interface mirrors your intent in real time.
 |
 |
| Mira visualizes in the canvas — building the interface widget by widget, as the model speaks. | Mira explains in the chat — narrating the data in plain language, in the same conversation turn. |
Mira is a conversational AI surface built on the open Model Interface Protocol (MIP) — a JSON-driven protocol and React runtime that turns large language models into a two-layer conversation. The model still talks to you in natural language — but in parallel, it mutates a live visual interface beside the chat: widgets appear, charts update, tables fill, KPIs animate, and connections to real APIs get wired as the model speaks.
Every reply has two layers: a verbal layer (reasoning, summary, next steps) and a visual layer (a dashboard you can actually use). Voice-to-voice is on the roadmap — speak to Mira, hear her speak back, watch the interface change with the conversation.
Mira = product. MIP = protocol. Mira is the experience you talk to; MIP is the JSON spec the runtime renders and the AI authors. The split mirrors how Claude (the product) is built on MCP (the protocol).
In one sentence: MIP is a shared language between you, the AI, and your screen.
When you ask AI to build something today, the AI usually answers in long paragraphs of text. The tools that can build a real UI instead write thousands of lines of code that have to be compiled and bundled before you see anything. Either way, it's slow, expensive, and easy to break.
MIP works differently — think of it like sheet music. A composer doesn't ship an orchestra with every song; they ship the score, and any orchestra that can read it plays it back. MIP is the score for interfaces: a small, structured description of what should be on screen. The AI writes the score; your computer plays it instantly as a real, interactive interface.
Here's the whole loop in three lines:
You say: "Add a sales chart."
Mira writes: { type: "lineChart", data: "$.sales" } ← a tiny line of MIP (~12 tokens)
Screen shows: 📈 a live, interactive chart, in under a second
For comparison — same request, other AI tools:
You say: "Add a sales chart."
Code-gen tool: import { LineChart, XAxis, YAxis, Line, Tooltip,
ResponsiveContainer } from 'recharts';
export default function SalesChart() {
const [data, setData] = useState([]);
useEffect(() => { fetch('/api/sales')
.then(r => r.json()).then(setData); }, []);
return (<ResponsiveContainer><LineChart data={data}>
<XAxis dataKey="month" /><YAxis /><Tooltip />
<Line dataKey="value" stroke="#8884d8" />
</LineChart></ResponsiveContainer>);
} ← ~450 tokens
Screen shows: ⏳ bundle → compile → chart, 5–15 seconds later
You say: "Add a sales chart."
Plain chat: "Sure! Here's a sales chart you could create — imagine
a line graph with months on the x-axis and revenue
on the y-axis. January typically shows lower numbers…"
← ~200 tokens
Screen shows: 📝 a paragraph. No chart. You're on your own.
~40× fewer tokens than code-gen, for a single widget. The gap compounds as you add more widgets — by the time you've built a 10-widget dashboard, the conversation is roughly 5× lighter than prose chat and 10–30× lighter per edit than code-gen tools. Full numbers in the comparison table below.
What that means for you — whether or not you write code:
- No technical background required. Describe what you want; Mira composes the score; the screen plays it. Dashboards, reports, internal tools, full apps — all built by talking.
- Edits happen in under a second. Asking Mira to change one widget updates one line of the score, not the whole song.
- The conversation stays cheap. A score is tiny compared to source code, so the AI can build a lot more for you on the same budget — roughly 3–5× more than ordinary chat, and 10–30× more than tools that re-emit code on every edit.
- Open and portable. MIP isn't owned by any one AI provider. Any compatible runtime can read it; any tool-calling model can write it.
Mira is the conversational product built on MIP — the conductor who turns your words into the score on demand. MIP is the score itself.
Most AI chat is a straight line: you talk to the AI, the AI talks back. Two participants, one channel, all language.
Mira adds a third participant: the canvas. That turns the whole interaction into a triangle, with each side speaking its own language.
YOU
╱ ╲
sharper ╱ ╲ visual
prompts ╱ ╲ reply
▼ ╲
MIRA ────────▶ CANVAS
(text) (live interface)
MIP tool calls
Three channels, three languages:
- You → Mira (words). You describe what you want — in any language, at any level of specificity.
- Mira → Canvas (MIP). Mira's reply isn't only words. In the same turn she emits structured tool calls that mutate the canvas in real time.
- Canvas → You (vision). The canvas isn't passive. It's a visual reply. You see what the data actually looks like, what's clear, what's missing, what's wrong. The interface explains itself faster than any paragraph could.
And then the loop closes. Because the canvas just showed you something you didn't know, your next prompt is better — sharper, more specific, deeper. You stop asking vague questions and start pointing at what you see.
Each pass around the triangle makes the next one smarter:
- Your prompts get more precise.
- Mira's tool calls land more on-target.
- The canvas gets denser with the right information.
- You understand your own problem better.
The conversation doesn't drift — it converges into a scaffold of ideas: a sharper map of your own blind spots, and a bigger, better picture of whatever you're working through. The interface is the artifact; the real output is understanding. You leave the conversation knowing the topic better than when you started, with a built interface beside you to prove it.
This is what we mean by interface mirror. Mira holds up a visual reflection of your intent; you refine; the reflection sharpens; you refine again. Three or four turns in, you have both a clearer head and a usable dashboard — built collaboratively, not specified upfront.
A new level of communication with AI: three participants, one tight feedback loop, every turn making everyone smarter.
Today's AI chat surfaces force the model to do everything in prose. You ask for a sales dashboard and you get a paragraph describing a chart, an ASCII table, and a suggestion to "import this into Excel." Tools that do generate UI (code-gen sandboxes, canvas/artifact panels) re-emit thousands of tokens of source code on every edit and then wait seconds to compile.
Mira takes a different path: the model emits small, structured MIP tool calls (mip_inject_widget, mip_update_widget, mip_send_connection_request). The runtime renders them client-side — instantly, no compilation, no image generation, no full re-emit on edits. The conversation stays cheap; the interface stays live.
Approximate tokens for "build me an 8-widget sales dashboard" and then "change the chart to bar":
| Approach | Initial dashboard | Single edit | Render time |
|---|---|---|---|
| Mira (MIP tool calls) | ~800–1,200 tokens | ~40–80 tokens | <1 s (client-side render) |
| Plain LLM chat (markdown tables, prose charts) | ~2,000–3,000 tokens | ~200–400 tokens | streaming-bound, no interactivity |
| Code-gen sandboxes (v0, Bolt, etc.) | ~3,000–6,000 tokens (full JSX/components) | ~1,500–4,000 tokens (re-emits component) | 5–15 s (sandbox compile + bundle) |
| Canvas / Artifacts | ~2,000–4,000 tokens | ~2,000–4,000 tokens (full re-emit) | 2–5 s per edit |
~3–5× fewer tokens than prose chat. ~10–30× fewer tokens per edit than code-gen tools. And the result is a real, interactive interface — not a screenshot, not a markdown table, not a sandboxed iframe.
- No compile step. Tool args are JSON; widgets are React components that already live in the bundle.
- Incremental updates. Editing a widget is one tool call (
mip_update_widget) — not a re-emission of the entire artifact. - Live data binding. Widgets bind to real REST APIs via JSONPath (
{ rows: "$.results" }). The model doesn't have to invent or paste data; it just describes the shape. - Built-in validators. The runtime checks every
dataMapagainst a live sample before injecting, so the model self-corrects in one round instead of emitting another verbose attempt.
Mira inspects your real APIs, picks the right JSONPaths from the live response, and lays out 8–10 widgets per page — in a single turn. Some example prompts that work today against any REST source you've connected:
- 🛡️ Real-user monitoring. "Build me a RUM page from my access-log API." → request-timing histogram, error-rate KPI, slow-route table, country donut, browser breakdown.
- 📣 Marketing funnel. "Show our acquisition funnel from awareness to paid this quarter." → multi-stage funnel, channel-attribution donut, CAC trend, retention curve, top-of-funnel KPIs.
- 💼 Sales pipeline. "Sales-channels dashboard for the team — pipeline by stage, by AE, win rate, forecast." → pipeline bar by stage, deals-by-AE table, win-rate KPI, monthly forecast line, leakage waterfall.
- 📱 Social media performance. "Last 30 days of post performance across our channels." → engagement-rate trend, top-post table, follower-growth KPI, posting-hours scatter.
- 👔 Executive overview. "Give me a one-screen view a CEO can read in 30 seconds." → revenue KPI with delta, burn-rate progress, hiring fill table, NPS gauge, top-three risks list.
- 🧭 Strategy review. "Aggregate Q3 performance across the four departments and surface which one is over-indexing on cost." → cross-departmental KPI grid, cost-vs-output scatter, anomaly call-outs, owner table.
- 💰 Finance snapshot. "Month-end close: revenue, COGS, opex, runway, AR ageing." → KPI row, AR ageing table, opex breakdown donut, runway projection line.
- 📦 Ops & inventory. "SKUs running below safety stock with lead-time risk." → low-stock table, supplier risk pie, reorder-cost KPI, lead-time histogram.
Mira plugs into anything you have credentials for: REST APIs, app endpoints, internal data warehouses (via REST proxies), Postman / OpenAPI imports. The Connections page is your org's single source of truth — every team's tool, in one place, behind one chat.
- Persistent dashboards. Build a marketing-funnel view once; return to it next quarter and Mira just refreshes the live data underneath. The MIP JSON is the saved page; nothing is locked into a prompt.
- Snapshots. Freeze a moment — "end-of-Q3 board view," "pre-launch baseline" — so you can compare against it later.
- Departmental + executive layers. Each team owns their own pages (marketing, sales, ops, finance, support); an executive layer aggregates the KPIs that matter across them.
- Any source, any shape. If it has an HTTP endpoint and you can authenticate, Mira can read it. Custom backends, SaaS APIs, internal warehouses, scrappy spreadsheets behind a REST shim — same chat, same canvas.
The dashboards are the warm-up. Mira's real value shows up when you start using the triangular flow to think out loud with your data:
- You ask. "How did Q3 go?" — Mira builds the overview.
- You read the canvas. Something looks off — a chart you didn't expect to peak does, a KPI is flatter than it should be. Your next prompt sharpens: "Why is signup spiking on Tuesdays?"
- Mira pulls the supporting cuts. Day-of-week chart, source split, referrer table — all in one turn.
- You spot a pattern. "Strip out paid, show me organic only." — Mira does it. Five seconds later you're three layers deeper into a question you couldn't have asked at the start.
- You form a hypothesis. "Compare this Tuesday spike to the post we shipped on Monday — is one driving the other?" — Mira pulls both onto the same canvas.
By turn three or four, you're not asking for charts anymore — you're asking for hypotheses. Mira holds up the data, you point at the anomaly, the next prompt closes in. This is why the triangle matters: the conversation doesn't drift, it converges on insight. Strategy sessions stop being about "build a dashboard" and become "find the question worth answering."
- No-code interface authoring. Drag, drop, resize. Or just ask. Or both.
- Multi-provider AI. Anthropic Claude, OpenAI GPT, Google Gemini — interchangeable behind one chat surface.
- Real connections. REST sources with
mapPathhints, endpoint catalogs, per-source enable/disable for the assistant, key overrides.
Mira grows in stages, each one adding a new sense or surface:
- Mira·One — Text (current). Two-column chat + canvas. Mira reads, writes, and reflects intent through MIP tool calls.
- Mira·Two — Vision. Mira sees what's on the canvas: layout-aware suggestions, contextual edits ("make this section align with the one above"), screenshot-to-widget input.
- Mira·Voice. Real-time voice-to-voice. The user speaks; Mira speaks back; the interface mutates in sync with the audio. ("Show me last week's churn" → you hear the answer and the chart slides in beside it.)
- Mira·Atlas — Ambient. Mira listens through a meeting, answers questions out loud, surfaces visual answers without breaking flow. Bidirectional voice control: point at a widget, say "drop this and replace with a cohort retention chart."
- Mira·Eureka — Live Imagery, Video, & VR. The eureka moment. Mira stops being only an interface assistant and becomes a full visual collaborator — generating imagery, motion, animated diagrams, short video explainers, and immersive VR scenes live in the conversation. The brush-strokes-vs-pixels research below powers this: procedural visual content composed in seconds, not pixel-by-pixel diffusion in minutes. As good as a screen-based AI experience gets — and the bridge from screens to spatial computing.
The level roadmap above grows Mira's senses. These three tracks grow Mira's output, reach, and direction — all on the same MIP substrate:
Mira today builds great dashboards. The next leap is full, design-grade interfaces in a single conversation: marketing sites, product onboarding, internal tools with brand-quality polish, multi-step user flows, custom landing pages. Because everything still flows through MIP tool calls — not code generation — the ~5× token-efficiency advantage compounds as the interface gets more sophisticated. The richer the interface, the bigger the gap between Mira and tools that re-emit thousands of lines of JSX per edit. Soon: award-ready output, at conversation cost.
Wider library of pre-wired integrations available the moment you sign in. More REST connectors, more endpoint catalogs, more app manifests under data/apps/<id>/ — so Mira can talk to the tools your team already uses without the manual connection step. The endpoint catalog is already designed to be discovered by the assistant at conversation time; growing the catalog grows what Mira can build.
Today Mira's reads are stable — she inspects live APIs, picks the right JSONPaths, and binds widgets to real data. Her ability to write through endpoints is wired but not yet hardened end-to-end. The next stage closes that loop:
- Form widgets that submit to write endpoints (POST/PUT/PATCH), with field schemas Mira can author from a request shape.
- Outcome rendering in a neighboring widget — the form sends a record, the result widget shows it back (the created row, the API's response, a status pill, an updated KPI).
- Two-way conversations with your data: "add a new customer named Acme Corp with a $50k contract" → form submits, the new customer appears in the table beside it, a KPI ticks up, all in the same turn.
Today Mira can compose interfaces; soon she'll reshape their entire visual identity in a single conversation. Color palette, typography scale, spacing, radius, density, motion, component variants — everything — adjustable by talking:
- "Make this feel like a fintech product — tighter spacing, deeper navy, mono numerals on the KPIs."
- "Switch to a softer brand — increase the radius, warmer neutrals, slightly larger body text."
- "Apply our actual brand: here's our hex palette, our logo, our font URL."
Because MIP separates intent (the JSON spec) from render (the runtime), changing the design system never re-emits a single widget. Mira just updates the theme tokens — once — and every widget on every page picks up the new look instantly. Same conversation, same canvas, a completely different interface.
What this unlocks:
- Token-based theme layer — neutral tokens (colors, spacing, radius, type scale, motion) with semantic overrides per surface.
- MIP theme tool calls —
mip_update_theme,mip_set_palette,mip_set_typography,mip_set_density— small, structured, instant. - Design-system memory — Mira remembers your brand decisions across sessions so the look stays consistent without re-explaining it.
- A/B your visual identity by talking — iterate on brand polish in real time, ship the same interface in three different looks without touching a single component.
This is what AI conversation should feel like — fast, visual, hands-free, bidirectional, restyleable, and built on a protocol anyone can extend.
MIP's compression idea works for more than dashboards. We're exploring it for image generation too.
A 4K image is 8,294,400 pixels. To produce one, today's diffusion models compute and emit a color value for every single pixel — 8.3 million data points, each carrying just three numbers (R, G, B). A skilled painter renders the same scene in roughly 10,000 brush strokes. Each stroke isn't a number — it's a procedural token: a path with curvature, pressure, a multi-pigment color mix, bristle variance, and 3D impasto height. One stroke can cover ~5,000 pixels, hold a gradient of 50 microscopic color shifts, and leave a ridge that catches real light. The information-density gap is roughly ~830×, and the result scales to any resolution because strokes describe intent, not a frozen grid.
This is the same compression thesis as MIP, applied to a different medium. MIP sends { type: "lineChart", data: "$.sales" } instead of 450 lines of JSX. A stroke-based image model would send ~10,000 brush parameters instead of 8.3 million pixel values. Both replace brute-force spatial data with compact procedural data; both are resolution-independent; both let the model think in strokes that mean something rather than coordinates that don't. Pixel diffusion is to image generation what code-gen sandboxes are to interface building — heavy, fixed-resolution, expensive to edit. Stroke models are to image generation what MIP is to dashboards.
The experimental direction: AI image generation that emits brush strokes instead of pixels, with a hierarchical stroke budget (large block-ins → medium forms → tiny detail strokes), multi-pigment loaded brushes, and 3D impasto data per stroke. Target: photorealism at the focal points of an image using ~25,000 optimized strokes — roughly 300× more efficient than pixel-by-pixel diffusion, with output that stays sharp at any resolution. If MIP made dashboards conversational, the same compression idea can make image generation conversational too.
Mira is in active development. Mira·One — Text is live and usable today: install it, run it locally, and have the two-column conversation. Mira·Two (Vision), Mira·Voice, Mira·Atlas (Ambient), and Mira·Eureka (Live Imagery / Video / VR) are tracked on the roadmap.
- Protocol foundation — MIP schema, validator, typed schema constants, fixtures.
- React runtime — sidebar, top bar, pages, grid canvas, widget chrome, draggable/resizable layout editor.
- Data layer — REST + mock connectors with JSONPath data binding (
{ rows: "$.results" }), and a server-sidedataMapvalidator that resolves every path against a live sample before injection so the model can't silently render empty widgets. - Widget library — KPI, progress, line/bar/area/pie/donut charts, tables, lists, detail records, forms with inputs and buttons.
- In-app AI assistant — multi-provider chat (Anthropic Claude, OpenAI GPT, Google Gemini) behind one binding layer, with the full MIP tool surface (
mip_inject_widget,mip_update_widget,mip_inspect_page,mip_send_connection_request, etc.) executed live in the runtime. - Apps ecosystem — manifest-driven
data/apps/<id>/directory with per-app endpoint catalogs surfaced to Mira at conversation time. - Connections — REST sources with auth (key / bearer / basic), per-source enable/disable for the assistant, user-set API key overrides.
- Filesystem persistence + dashboard import/export.
- Full design-token theme layer and responsive-runtime polish.
- External MCP server with full parity to the in-app tool layer.
- Track A — High-fidelity interface widgets (beyond dashboards): layout containers, typography primitives, motion presets, design-grade components.
- Track B — Expanded apps ecosystem (target: 50+ pre-wired integrations).
- Track C — Read + write (form-to-outcome loop) so Mira can submit data and render the response in the same conversation turn.
- Track D — Conversational design system so Mira can restyle the entire visual identity (palette, typography, spacing, density, motion) from the chat.
pnpm install
# One-time: provision the Postgres store that backs dashboards, AI
# conversations, app catalogs, and runtime state. Any local Postgres works
# (Postgres.app, `brew install postgresql@16`, or `docker run … postgres:16`).
createdb mip
cp .env.example .env # adjust DATABASE_URL if it isn't postgres://localhost:5432/mip
pnpm db:migrate # create tables
pnpm db:seed # load the JSON files under data/ into Postgres
# in two terminals:
pnpm --filter @mip/data-proxy dev # Hono backend → http://127.0.0.1:8787
pnpm --filter @mip/dashboard-react dev # Vite frontend → http://127.0.0.1:5173Heads up: the
data/folder is still the canonical source for defaults checked into git, but at runtime the dashboard reads and writes Postgres. Re-runpnpm db:seedafter pulling new defaults, orpnpm db:backup && pnpm db:reset && pnpm db:migrate && pnpm db:seedfor a clean rebuild. Seepackages/mip-db/README.mdfor the full schema map and CLI reference.
For full privacy, run Mira entirely on your own machine. Point her at an open-source model in the 16–31B parameter range (Qwen 2.5, Llama 3.1, DeepSeek, Mistral, etc.) served locally via Ollama / vLLM / LM Studio — you'll get great results without a single token leaving your computer. Cloud providers (Anthropic Claude, OpenAI GPT, Google Gemini) work the same way if you'd rather use one — Mira binds to whatever you connect via the Connections page.
A counterintuitive truth: Mira does not need a frontier model. Claude Haiku, Gemini Flash, GPT-mini, or a local 8B open-source model is usually enough — and often better. No agent framework, no orchestration code, no Cursor/Claude-Desktop wrapper required: any tool-calling LLM can drive Mira directly, because the MIP tool surface is the harness.
Why small wins for this kind of work:
- Big models over-elaborate. They write five-paragraph justifications, debate themselves, hedge every claim, and burn reasoning tokens explaining what a chart means before drawing it.
- Small models think simply. They emit a sharp tool call, then move on. Mira's visual layer turns that simplicity into a chart you understand at a glance — no scrolling, no parsing prose, no waiting on a reasoning loop.
- The protocol does the heavy lifting. The model just has to pick widgets and bind them to data. That's a small, well-bounded job — perfect for a small, fast, cheap model.
- Same compression idea. Fewer tokens out of the model = lower cost = lower latency = sharper visuals = local-laptop friendly.
When the model thinks simple, the dashboard reads simple. When the dashboard reads simple, you spot the answer the moment you see it. That's the power of the system: the constraint of working through MIP tool calls forces clarity at every layer of the stack — model, protocol, runtime, eyeball.
Workspace-wide checks:
pnpm build # full workspace build
pnpm test # run all unit tests
pnpm typecheck # workspace typecheck
pnpm lint # workspace lint- Roadmap — full vision, stage gates, three capability tracks, voice/MCP layer.
- SRS — what Stage 0/1 commit to delivering and why.
- Architecture Decisions — the choices that shape Mira (interaction model, JSONPath subset, dataMap validator, AI-as-data fence, voice surface, etc.).
- Stage 1 Checklist — line-by-line tracking of what's shipped and what's open.
- Protocol — the MIP JSON spec.
- Work Breakdown — detailed task structure across all sub-stages.
- Package Responsibilities — what each workspace package owns.
QA reports & interface test logs — historical records of each stage's QA pass
- Stage 0 QA Report
- Stage 0 QA Agent Closeout
- Stage 1 Protocol Foundation QA
- Stage 1 Protocol Foundation QA Agent Check
- Stage 1 Runtime Foundation QA
- Stage 1 Runtime Foundation Interface Human Test
- Stage 1 Data And Actions QA
- Stage 1 Data And Actions Interface Human Test
- Stage 1 Interface Human Test Results
- Interface Human Testing Checklist