LumaBrowser's built-in AI Chat doesn't just reply with text; it produces artifacts: standalone documents that render live next to the conversation. Code, web pages, diagrams, and fully interactive mini-apps, all generated on demand and runnable in the same window.
Ask for something concrete and the model picks the right artifact type for the job. Each one renders in its own panel beside the chat, editable, runnable, and saved.
Any language, rendered in a VS Code-style Monaco editor with full syntax highlighting. Read it, scroll it, copy it, the same editing surface you already know.
Full pages or fragments, shown as a split view: the source on one side, a live preview on the other. Change the request, watch the preview update.
Vector graphics rendered straight to an image. Icons, diagrams, and illustrations come back as crisp, scalable artwork you can drop anywhere.
Long-form docs rendered formatted, headings, lists, tables, and code blocks laid out for reading, not buried inside a single chat reply.
Generated bitmaps shown inline in the artifact panel, right where you asked for them, no separate viewer, no download round-trip to look.
Interactive modules, calculators, charts, dashboards, toggles, simulations, that run inline and respond to your input in real time.
The live type is the one that turns a chat into a tool. The model writes a small HTML fragment plus JavaScript; it runs inline, powered by a lightweight reactive runtime (ResonantJS) with optional Chart.js for charts. No build step, no <script> tag wrangling; it just renders and reacts.
42
Under the hood, a live module is just markup bound to a tiny reactive state object. Here is roughly what the model emits:
<!-- HTML fragment: bound to reactive state, no <script> tag -->
<div class="counter">
<p r-text="count">0</p>
<button r-on:click="count--">− Decrement</button>
<button r-on:click="count++">+ Increment</button>
</div>// One reactive object. ResonantJS wires the bindings above.
Resonant.component('counter', {
count: 42
});
// That's it. Clicks mutate `count`; the <p> re-renders.
// Need a chart? `live` modules can pull in Chart.js the same way.A snippet that looks right but throws on the first run isn't an artifact, it's a chore. LumaBrowser puts validation gates between the model and your panel.
Lint on create and edit. Code artifacts are automatically linted whenever they're created or edited; JavaScript and TypeScript, JSON, and PowerShell are all checked. A syntax safety gate runs before a live module renders, and a lint pass runs after. The model is instructed to fix any problems with edit_artifact before it declares the work done; so you get fewer broken snippets and fewer round-trips.
Every code artifact is linted as it's written. JS/TS, JSON, and PowerShell all run through the checker.
Live modules pass a syntax safety gate before they're allowed to render in the panel.
A second lint pass runs after the module renders, catching what static checks alone might miss.
The model is told to fix flagged problems with edit_artifact before it calls the task finished.
Iterate without losing earlier drafts. Every edit creates a new version under the same root. The chat shows one entry per artifact with a version count, full history is retained, and deleting an artifact removes the whole version chain.
First draft - the model's initial take on your request.
You asked for a tweak; a new version is saved under the same root.
Another edit. The chat still shows one entry, with a version count.
The current version. Earlier drafts stay in the full history, ready to revisit.
An artifact isn't trapped in the chat window. Each one is served at a local URL on the LumaBrowser REST gateway, for example http://127.0.0.1:<port>/artifacts/<id>.html, so you can pop it into a full browser tab or download it. And when you turn on LumaBrowser's LAN sharing, paired devices can view artifacts remotely.
Every artifact is reachable on the REST gateway at /artifacts/<id>.html.
Pop the artifact out of the panel and into a normal browser tab when you need more room.
Keep the file on disk; it's a standalone document, not a screenshot of one.
Turn on LAN sharing and paired devices can view your artifacts remotely.
Artifacts aren't tied to one vendor. They're produced by whichever model you configure, a bundled local model (llama.cpp, Apple-Silicon MLX, or in-browser WebGPU) or your own OpenAI or Anthropic key. Pick the model that fits your privacy, cost, and quality budget; the artifact pipeline works the same either way.
Run entirely on your machine via llama.cpp, Apple-Silicon MLX, or in-browser WebGPU. Read more on local AI.
Point LumaBrowser at your own OpenAI key when you want a hosted frontier model.
Bring an Anthropic key and let Claude drive the same artifact pipeline.
Validation, versioning, and live rendering behave identically whichever model you choose.
LumaBrowser's AI Chat builds runnable artifacts, code, pages, visuals, and live mini-apps, right beside the conversation, versioned and validated, on whatever model you bring. It's free. Explore the APIs or head back to the overview to see the rest of LumaBrowser.