DEMO · BRING YOUR OWN KEY GITHUB HCII 2026

Visible Reasoning — the app gallery

Three real chat desks share one machine; every reply can be re-run without a source, to see what that source really changed.

Two of them run right here in your browser, on your own API key — Anthropic, OpenAI or Azure OpenAI — the key never leaves your browser.

Your key stays in your browser.

This is a live public demo — it runs entirely in your browser. Your key goes only to the provider you pick; this site’s host (GitHub Pages) never receives it.

Every model call goes straight from your browser to that provider’s own API — api.anthropic.com, api.openai.com, or your own *.openai.azure.com resource — our demo server never sees your key. It is not sent to us, not logged, and not put in any URL. With keep it in this browser ticked it is saved in this browser’s own storage, on your machine, and stays there through a reload or a restart until you press Forget; untick it and the key is held in memory only and is gone the moment you reload. Forget my key erases every provider’s key from both, instantly.

Each provider gets its own slot: an OpenAI key is used for OpenAI calls and nothing else, and switching provider never sends one provider’s key to another.

This page doesn’t even need our server: it is a plain static file — any dumb file host can serve it, and it chats just the same. That is the guarantee: there is no server code that could see your key.

You’ll pick your provider and add your key on the desk you open — this page never asks for either. Leave keep it in this browser ticked, as it is by default, and the key is saved on your own machine: it rides with you back to this gallery, into the other desk, across a reload and across a restart, until you press Forget. Untick it and the key is held in memory only, so a reload clears it and the next desk asks again. Keys are kept one slot per provider, so bringing an OpenAI key never disturbs an Anthropic one.

The one thing this page fetches is its web fonts, from fonts.googleapis.com and fonts.gstatic.com — a stylesheet and a few font files, no key, no data of yours, and if those requests fail you get your system fonts and the same page. Nothing else leaves it: this page takes no key at all.

Every file here — this page, the desks, the vendored library bytes — is generated from that repo and served as-is: source on GitHub.

Don’t take our word for it — open DevTools → Network and watch: the only requests that carry your key go to the provider you picked. Everything else is weather, Wikipedia and iTunes, called keylessly from your browser.

THE DESKS
01

The trip advisor

“Should I hike it?”

enter →
STARTER QUESTIONS

“Should I hike Mission Peak on Saturday?”

“What about "Mount Tamalpais"?”

SOURCES — AND THE VERDICT THIS BUILD CAN REPORT
weather Saturday's forecast for a place — condition, high temperature and rain chance (Open-Meteo, keyless).
place What a place is — a one-paragraph description (Wikipedia, keyless).
crowd How busy a trail tends to be on a Saturday morning — a MODELED estimate, not measured data.
THIS DESK
your key, your provider — Anthropic (claude-haiku-4-5-20251001), OpenAI (gpt-4o-mini) or your own Azure OpenAI deployment
browser-direct: every model call goes from your tab to that provider’s own API — no server in between
statuses and reply arrive as they happen
every reply: visible reason → re-run without a source → fork
02

The movie desk

“Should I watch it?”

enter →
STARTER QUESTIONS

“Should I watch "Interstellar" tonight?”

“Is "Dune" worth renting?”

SOURCES — AND THE VERDICT THIS BUILD CAN REPORT
itunes Price, availability and advisory rating for a movie (iTunes Search, keyless).
plot One-paragraph plot / overview for a movie (Wikipedia, keyless).
reception What critics said about a movie — the critical-response section of its Wikipedia article, never box office; says plainly when the article carries none (Wikipedia, keyless).
THIS DESK
your key, your provider — Anthropic (claude-haiku-4-5-20251001), OpenAI (gpt-4o-mini) or your own Azure OpenAI deployment
browser-direct: every model call goes from your tab to that provider’s own API — no server in between
statuses and reply arrive as they happen
every reply: visible reason → re-run without a source → fork
03

The stock desk

“Buy or hold?”

runs locally only · needs a server

The SEC’s servers don’t allow browser calls, so the stock desk runs only in the server demo. A browser cannot fetch a filing from EDGAR, and this page has no server of ours behind it to fetch one on your behalf — so the desk is not here, and it will not pretend.

Where it does run, it runs server-side — which is the honest difference from the two desks above. In the local demo a local MCP server calls SEC EDGAR and Reddit over the real protocol, and that server, not your browser, calls the model.

Run it yourself with npm run gallery:live, then open http://localhost:4175.

THE LIBRARIES IT RUNS ON

agentfootprint observable, explainable AI agents: recordings, influence localization, ablate-and-rerun, MCP tools. If it’s useful, a star helps people find it.

footprintjs the self-explaining flowchart engine underneath, recording every stage, decision and write as a typed event. A star there is welcome too, for the same reason.

agentthinkingui the panels you are clicking — the reply’s story, its sources and its re-runs.

All of them, and the rest of the family, live at footprintjs.github.io — the repositories are at github.com/footprintjs.

WHAT THIS IS

The reference implementation of the paper below.

Visible Reasoning: User-Facing Decision Transparency for Generative AI Systems

HCII 2026 · LNCS 16745 · pp. 3–21 · doi.org/10.1007/978-3-032-30849-8_1

Anbalagan, Nie, Kommalapati, Kanamarlapudi, Radhakrishnan, Zhao, Mohan

The ideas in this repository were developed with those co-authors and published in that paper. The paper states the argument; this repository makes it runnable.

This repository is an independent, personal open-source project. It is built on the author's own MIT-licensed libraries and is not affiliated with, sponsored by, or endorsed by any employer.

PROGRAM NOTES

Next to each desk’s sources you’ll see a dot. The dot is the demo’s honest core — it names where that source’s data actually came from on the latest reply:

live real data fetched from the internet just now (this source really answered)
fallback we tried the real source but couldn’t reach it, so the demo used realistic stand-in data — and says so
synthetic (never measured) data that is invented by design (like the crowd estimate); it is always labeled, never passed off as real
not consulted the assistant didn’t use this source for this reply

Every tool sentence carries its own [source: …] label — the map never hides where data came from.

The rule everywhere: the label names what actually happened. A desk that can't reach a source says so, and data that was invented is never passed off as real.

The trip advisor's crowd estimate is always synthetic — modeled, never measured — and always says so.

visible reason opens a ranked list of exactly which sources shaped that reply
ignore a source inside that panel, pick a source to leave out
re-run answers the same question again without it — over the frozen tool results of the original turn, zero new fetches
Continue from this version forks a new session from the what-if reply; the ignored source stays ignored for every later turn

Runs on your key: each reply is a handful of small model calls (one per source the agent consults, plus one to answer); a verified what-if re-run is a few more, replayed over the frozen tool results of the original turn — zero new fetches, and the counter on the re-run card proves it. Usage appears in your own provider’s console like any other API traffic.

Two desks are here, not three: the SEC’s servers don’t allow browser calls, so the stock desk runs only in the server demo. Fewer desks, honestly labeled, beats a desk that pretends.

Ask a model why it said something and you get a story about itself — fluent, plausible, unverified. Here the why is established outside the model: remove a source, run the same turn again, read what changed.

None of these desks narrates its own reasoning. Each one records it: every source the agent consults is a tool call, and the record of which tools ran, what came back and what it changed survives the reply.

The paper calls this a third paradigm. Instead of asking the model to narrate its reasons — which cannot be checked — or asking a second model to judge it, the substrate that runs the work keeps the record. Tool calls, sources, scores and re-runs are typed events captured as the run happens, not a story told afterwards.

The visible-reason panel ranks each source by semantic alignment: a deterministic score comparing what that source said with what the answer said. It is a proxy for influence, not a proof — a high score means “this reads like it mattered”.

Only the re-run convicts: drop a source, answer again over the frozen tool results, and see whether the decision actually changes.

Weather comes from Open-Meteo, plots and reception from Wikipedia, prices from iTunes — keyless public APIs, called straight from your tab.

Every tool sentence carries its own [source: …] label, and the dot beside a source names what really happened on the latest reply. The 4 labels are spelled out in how to read the demo, above.