Prototypes

A prototype is a live HTML page a model writes — a chart, a calculator, a landing page, a dashboard — run in your browser, sealed off from everything else.

How a model makes one

A model writes a complete HTML page in a fenced block whose language is prototype-chat or prototype-page, with a short title on the same line:

markdown

```prototype-chat Monthly sales
<!doctype html>
<html>…</html>
```

Fence	Shown	For
`prototype-chat`	Inline, inside the reply, as tall as what it draws (under about 600 px).	Small things: a chart, a diagram, a calculator, a styled table, a summary card.
`prototype-page`	In a panel beside the conversation, with a desktop and a phone view.	Anything that is a page or a screen: a website design, an app mock-up, a dashboard, a long report, a game.

A model makes one only when seeing it answers better than reading, and says in a sentence what it shows. To change one it writes the whole new version in a new block.

The sandbox

A prototype runs in a frame of its own, served from its own address with a policy that seals it off: it is a different origin from the application, so it has no cookie, no access to the page around it and no way to call the server; it cannot open a window or navigate the page that holds it.

No network, by default. No request leaves the frame: every script, style and picture has to be inline or a data: URL. Charts are drawn by the page’s own code, and the page works offline.
An administrator can open HTTPS — Admin → General → Prototypes, may load over HTTPS — so a page can load a charting library, a web font or a picture. That tells whoever serves them that somebody opened the page, and stops it working offline. It can never reach the application either way.
Prototypes can be switched off for the whole instance on the same page; who may see them is the See prototypes permission; and every chat can turn them off in its scope menu, beside web search.

What it can still do. A sandbox is not a promise of silence: a page can still navigate its own frame to another address, as a link in any reply can. With the network closed, that is the one way out, and it carries only what the model wrote into the page.

The panel

A prototype-page opens beside the conversation. The panel lays the page out at a desktop’s width or a phone’s (390 × 844) and scales it to fit; on a narrow screen it starts in the phone view. A Download button saves the page as a file, named after its title, to open in a browser or hand on. An inline prototype-chat keeps its height while the reply goes on, so the page does not jump.

Matching your theme

The frame hands the page the reader’s theme as CSS variables, and a model writes them with a fallback, so the page reads right in Moria and in Shire and outside LLeMbas alike:

css

color: var(--lembas-ink, #222);
background: var(--lembas-bg, #fff);
/* also: --lembas-surface, --lembas-ink-muted, --lembas-accent, --lembas-border */

In an agent chat

In an agent chat the device’s model writes the prototype — the server tells the linked LLeMbas CLI whether the chat may have one — and the web UI renders the fence live, exactly as for a chat on the server. Nothing runs on the server either way.

In the terminal

A terminal cannot show a page, so LLeMbas CLI saves it. A completed fence in a reply is written as a file — the model’s output as it is — under the state directory, never in the project, and drawn as one line saying where:

shell

~/.local/state/lembas/prototypes/<session>/<n>-<slug>.html

Command	Does
`/prototype`	lists this session’s prototypes
`/prototype <n>`	prints that one’s path, to open in a browser

In a session linked from a server, prototypes are offered when the chat allows them. For a terminal session of your own, switch them on in the global config — never a project’s, since a cloned repository should not decide what the model may write:

yaml

prototypes: true     # ~/.config/lembas/config.yaml; default false

Only you can read the files (a page is a page: it may say anything). See CLI configuration.