Next-gen UI isn't using AI to generate code to ship to everybody. It's AI streaming UI to each user live.

LensUI lets agents generate interfaces inside a mounted browser surface, then save the useful pieces as reusable components. Built-ins are just the starter grammar; your agent grows the UI vocabulary while the app is running.

Connect an agent Install package GitHub

no rebuildruntime patches the mounted page

62%average token savings vs React

savegenerated components for later use

agent streamrendered after load

voice prompt
  -> builder model
  -> compact lightcode
  -> runtime.validate()
  -> browser surface updates

Connect your agent to this surface.

Copy the generated instructions into your local agent, then watch it stream lightcode into the blank target below without a rebuild loop.

Connect your agent.Copy these instructions into your local coding agent to target the blank LensUI stage above.

idle

You are controlling a live LensUI container in the user's browser.

Target:
- lensID: pending
- bridge: http://127.0.0.1:5743
- auth: Bearer pending

Rules:
- Do not scaffold a React app, write an HTML file, or start a web server. The browser already has a LensUI runtime mounted.
- First, run the proof render below exactly. Once it returns {"ok":true}, keep posting lightcode or command streams to this same target.
- Use /render for plain semantic lightcode.
- Use /apply for saved components, custom HTML/CSS/JS/canvas, patches, styles, or source updates.
- If you get "No connected LensUI container for that lensID/token", the browser EventSource is not connected yet or this prompt is stale. Ask the user to keep this page open, refresh it, or copy a fresh prompt.
- A 200 response means the bridge delivered the message to the browser. If the UI does not change, simplify the lightcode/component and retry; render errors appear in the browser surface.

Read the LensUI skill:
   npx -y --package @ardabot/lensui@latest lensui skill > LENSUI_SKILL.md
   Read LENSUI_SKILL.md, especially "Live Target Fast Path" and "Custom HTML/CSS/JS/Canvas".

If the bridge is not already running, start it:
   npx -y --package @ardabot/lensui@latest lensui bridge --port 5743

1. Proof render:
curl -X POST http://127.0.0.1:5743/lens/pending/render \
  -H "authorization: Bearer pending" \
  -H "content-type: application/json" \
  --data "{\"lightcode\":\"0F|st=mono|f=mono|d=compact\\n0V|Hello from your agent|Live LensUI target\\n1G|auto|min=180|max=3\\n2M|Bridge|connected|local\\n2M|Payload|lightcode|compact\\n2M|Target|scoped|secure\\n1T|This surface was rendered through the local LensUI bridge.\"}"

2. Custom HTML/CSS/JS/canvas example using /apply:
curl -X POST http://127.0.0.1:5743/lens/pending/apply \
  -H "authorization: Bearer pending" \
  -H "content-type: application/json" \
  --data "{\"commandStream\":\"!\\n@!|AgentCanvas|html|agent-generated\\n<div class=\\\"agent-canvas\\\"><canvas></canvas><strong>{{0}}</strong><script>\\n(() => {\\n  const root = document.currentScript.parentElement;\\n  const c = root.querySelector(\\\"canvas\\\"), ctx = c.getContext(\\\"2d\\\");\\n  let t = 0;\\n  function draw(){\\n    c.width = Math.max(1, root.clientWidth / 4); c.height = Math.max(1, root.clientHeight / 4); t += .04;\\n    const img = ctx.createImageData(c.width, c.height);\\n    for (let i = 0; i < img.data.length; i += 4) {\\n      const p = i / 4, x = p % c.width, y = (p / c.width) | 0, v = Math.sin(x * .18 + t) + Math.cos(y * .14 - t);\\n      img.data[i] = 80 + v * 50; img.data[i + 1] = 190 + v * 30; img.data[i + 2] = 235; img.data[i + 3] = 255;\\n    }\\n    ctx.putImageData(img, 0, 0); requestAnimationFrame(draw);\\n  }\\n  draw();\\n})();\\n</script></div>\\n<style>\\n.agent-canvas{position:relative;min-height:260px;border:1px solid hsl(var(--border));background:#050607;overflow:hidden}\\n.agent-canvas canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}\\n.agent-canvas strong{position:absolute;left:18px;bottom:14px;font:700 13px var(--lens-font-mono);text-transform:uppercase;color:white}\\n</style>\\n.\\nR\\n0F|st=studio|d=compact\\n0V|Custom canvas|Saved HTML/CSS/JS component\\n1AgentCanvas|hello from custom canvas\\n.\"}"

After that, generate the actual UI the user asked for. Use semantic LensUI nodes for common UI. For custom HTML, CSS, JavaScript, canvas, D3, Three.js, or app-like interaction, register a saved component once with @!, then render it by name with a short line like 1AgentCanvas|label.

The old loop generates code. LensUI grows a live interface.

Most AI UI demos stop at code generation: the model writes React, a build runs, and the result ships later. LensUI is designed for living surfaces: agents render now, patch what is already on screen, save components that work, and reuse them by name later.

Generated code loop

1. PromptAsk an agent for an interface.
2. CodeModel emits JSX, CSS, chart code, and glue.
3. ShipBuild, deploy, reload, then hope it fits.

LensUI live loop

1. PromptAsk an agent for a surface.
2. LightcodeModel emits semantic rows and source bindings.
3. RenderThe mounted runtime updates the existing page.
4. RememberUseful components and styles are saved, patched, and called by short names later.

GenerateAgents compose a purpose-built UI for the current request instead of choosing from a fixed gallery.

SaveCustom HTML, React, aliases, and LightStyle packs can be stored once when built-ins are not enough.

RecallFuture turns instantiate saved pieces by short names, so the UI gets richer without resending bulky code.

Why stream lightcode instead of HTML/React?

HTML and React make an agent describe implementation details. Lightcode lets it send compact UI intent to a live renderer that already knows how to lay out, patch, persist, and update the surface.

React

147 tokens

function MarketPulse({ data }) {
  return (
    <section className="stage rounded-xl border border-white/15 bg-black p-6 text-white">
      <header className="mb-5">
        <h1 className="text-4xl font-semibold tracking-tight">Market Pulse</h1>
        <p className="text-sm uppercase text-white/55">Live source</p>
      </header>
      <div className="grid grid-cols-3 gap-3">
        <Metric label="BTC" value={data.btc} detail="usd" />
        <Metric label="ETH" value={data.eth} detail="usd" />
        <LineChart data={data.trend} x="t" y="v" />
      </div>
    </section>
  );
}

HTML

110 tokens

<section class="stage">
  <header>
    <h1>Market Pulse</h1>
    <p>Live source</p>
  </header>
  <div class="grid grid-cols-3 gap-3">
    <article class="metric"><span>BTC</span><strong data-bind="markets.btc"></strong><em>usd</em></article>
    <article class="metric"><span>ETH</span><strong data-bind="markets.eth"></strong><em>usd</em></article>
    <canvas data-chart="line" data-source="markets.trend"></canvas>
  </div>
</section>

Lightcode

68 tokens

0DS|markets|https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum&vs_currencies=usd|ttl=30|mode=poll
0F|st=mono
0V|Market Pulse|Live source
1G|auto|min=180|max=3
2M|BTC|$markets.bitcoin.usd|usd
2M|ETH|$markets.ethereum.usd|usd
1H|line|4,7,6,10,9,13,16|x=t|y=v

54% saved vs React, 38% saved vs HTML.

Isn't agent-generated frontend code unsafe?

Yes. That is a real concern. LensUI is intentionally powerful: raw HTML, CSS, and JavaScript components are enabled by default because the goal is maximum expressive range for agents. Treat those components like untrusted plugin code until your host decides otherwise.

Default stanceThe runtime trusts browser security boundaries, validates lightcode, preserves the last good render, and lets hosts mount LensUI in an iframe or isolated origin.

Host controlApps can add review hooks, component allowlists, CSP, sandboxed iframes, approval flows, or disable raw component kinds when their product needs stricter policy.

Practical ruleKeep secrets, billing, auth, and privileged tools out of frontend code. Let raw components draw and interact; route sensitive effects through host-owned capabilities.

Install one package.

The package includes the browser runtime, CLI bridge, MCP server pieces, and the reusable LensUI agent skill.

npm install @ardabot/lensui
npx lensui skill
npx lensui bridge --port 5743

import { createPersistentStageRuntime } from "@ardabot/lensui/html";

const stage = createPersistentStageRuntime(document.querySelector("#lens-stage"));

stage.render(`0F|st=studio
0V|Market Pulse|Live source
1G|auto|min=180|max=3
2M|BTC|$markets.btc|usd
2H|line|$markets.trend|trend`);

stage.setSource("markets", nextSnapshot);

Open npm GitHub repo