A browser version of the same demo. Run it with npm run web and open http://localhost:3000.
It exists because the terminal version proves the memory works, and this one proves what memory feels like. Watching a fact appear in a panel the moment you say it is more convincing than reading a log line.
| Part of the screen | What it teaches |
|---|---|
| Status pill, top right | Whether a database is attached at all |
| Create a cluster button | The one API call, as a button anyone can press |
| "What it remembers" panel | The actual stored documents, readable and deletable |
| Note under each reply | Whether a database was created, how many memories were recalled, and what was learned |
| Thread switcher | Scoping. Same cluster, different thread, no shared memories |
| Expiry banner | The cluster is temporary until you claim it |
The expiry banner is the part worth stealing for your own product. Most apps store everything about a user forever and mention it in a privacy policy. This one says how long it will remember you and puts a button next to it.
You do not have to press the button. Ask the bot to remember you and it calls provision_memory itself, creates a cluster, attaches it, and backfills the conversation so far, the same as the terminal version. The status pill, facts panel, and expiry banner all update from the chat response.
Two things to know if you copy this pattern:
- That turn takes about a minute, because provisioning waits for the vector index to become queryable. The client shows "Thinking (may set up a database)" rather than plain "Thinking" while no memory is attached, so the pause does not read as a hang.
POST /api/chattherefore returnsattached,claimUrl, andexpiresAtalongside the reply. The client uses those to flip its own state without a second round trip to/api/status.
Passing onProvision into converse() is what enables this. Leave it out and the model never sees the tool, which is the deterministic path.
The styling follows LeafyGreen, MongoDB's design system. Colour tokens come from the LeafyGreen palette package and are declared at the top of public/styles.css with the same names, so they are easy to check against the source.
The tokens are hand-rolled rather than imported. That is a deliberate trade. LeafyGreen is a React component library and pulling it in would mean React, a bundler, and a build step, which turns a twenty second clone into a much longer one. For a teaching repo the install time matters more than component fidelity.
If you are building an actual MongoDB product surface, do not copy this stylesheet. Use the LeafyGreen React components. This is a demo skin, not a substitute for the design system.
Euclid Circular A and MongoDB Value Serif are MongoDB's licensed brand faces. They are not redistributed here, so the stylesheet asks for them first and they are picked up automatically on any machine that already has them.
Everywhere else the stack falls back to close free stand-ins loaded from Google Fonts: DM Sans for the geometric sans and Source Serif 4 for the display serif. Source Code Pro is MongoDB's mono and is freely licensed, so that one is exact.
There is a green square in the top left, not a leaf. The MongoDB leaf is a trademarked asset and drawing an approximation of it is worse than leaving it out. If you are shipping this anywhere real, take the proper SVG from the MongoDB brand portal and replace .topbar .mark.
The server is a thin wrapper around src/memory. No memory logic lives in web/.
| Method and path | Purpose |
|---|---|
GET /api/status |
Is a cluster attached, and when does it expire |
POST /api/provision |
Create an Ephemeral Cluster and attach it |
POST /api/attach |
Attach a cluster you already have |
POST /api/chat |
One turn. Returns the reply, what was recalled and learned, and the current attach state, since the model may have provisioned a cluster during the turn |
GET /api/memories |
Stored facts for a thread |
DELETE /api/memories |
Wipe a thread |