A multi-user AI chat that generates its own UI on the fly. Based on the new Dynamic Partial Update spec.
<div class="chat">
<div class="message user">Hi I am Phil</div>
<div class="message agent">Welcome Phil</div>
<?marker name="append-message">
</div>
... <!-- a few seconds later -->
<template for="append-message">
<div class="message user">What is 2 + 2?</div>
<div class="message agent">2 + 2 = 4</div>
<?marker name="append-message">
</template>The LLM responds with HTML not markdown so the response can include SVG, CSS, JS, MathML, WebGL etc. This can be applied in various template areas.
The output can contain forms that submit their response back to the LLM. Allowing users to prompt with structured data.
Forms can be styled with CSS E.g. to look like a game of Tic Tac Toe:
The chat is multi-user so you can have play multiplayer games with a one sentence prompt:
Or have conversations where each person sees the chat in their own language:
Enabling cross-cultural communication:
The chat can completely redesign its own interface E.g. adding voice dictation. Here I ask it to remove the prompt box and make the page look like Wikipedia. The links are forms which when submitted cause the LLM to replace the entire HTML content of the article.
Because the LLM has knowledge of CDNs it can inject Tailwind, d3.js, CodeMirror or any other popular library. Here I ask it to add a CodeMirror playground so I can edit some CSS.
The results are then submitted back to the LLM context and the CSS is made available to be used in response to further prompts.
Until this is hardened I would recommend only running in local dev. Like Openclaw you use this at your own risk. Currently this app works best with Gemini 3.0 Flash it costs about $0.01 per prompt and Gemini seems to really get the idea of Partial Updates and forms that can edit themselves better than other models.
Two attacks a malicious prompter could make that will cost you:
- Create clientside code that submits prompts in a tight loop (high inference cost)
- Create clientside code loop that keeps making other requests (high cloudflare cost)
Mitigate 1 by only using with a AI API keys with limited funds e.g. $20 don't use with an expensive frontier model connected straight to your bank account. Mitigate 2 by running in local dev where there is no cost for worker requests. Normal usage for a single user should be dirt cheap to run.
Requirements:
- Signed up to Cloudflare to run this (I think free plan will be fine)
https://dash.cloudflare.com/sign-up - Buy some credits in Cloudflare AI Gateway
Search for AI Gateway click on a gateway add funds top right click the dollar amount https://dash.cloudflare.com/YOUR_ACCOUNT_ID/ai/ai-gateway/gateways/default/overview
- You will need the following bare minimum env vars set in .env
CLOUDFLARE_ACCOUNT_ID= CLOUDFLARE_API_TOKEN= CLOUDFLARE_AI_GATEWAY_ID=
Your CLOUDFLARE_ACCOUNT_ID can be found on the url once you login.
Create an API token with at least the following permissions https://dash.cloudflare.com/YOUR_ACCOUNT_ID/api-tokens
- AI Gateway: Read, Write, Run
- Workers AI: Read, Write
- Workers Scripts: Read, Write
Paste the API key into the .env
For CLOUDFLARE_AI_GATEWAY_ID use default or create an new one and use that.
npm install
npm run devOpen browser at the mentioned url.
If you do not like having your secrets in an .env file visible to your Claude, Codex AI coding agent. On Mac you can put them in your keychain
security find-generic-password -a "frontclaw" -s "CLOUDFLARE_API_TOKEN" -w
security find-generic-password -a "frontclaw" -s "CLOUDFLARE_ACCOUNT_ID" -w
security find-generic-password -a "frontclaw" -s "CLOUDFLARE_AI_GATEWAY_ID" -wThen run:
npm run dev:secure