今日已更新 116 条资讯 | 累计 29258 条内容
关于我们

I Built a Chat App That Rewrites Its Own UI in Real Time

Varshith V Hegde 2026年07月29日 02:35 7 次阅读 来源:Dev.to

So I had this idea that kept nagging at me. Every AI chat app works the same way. You type something, the model returns text or markdown, the UI renders it as a nice formatted paragraph. That is fine if you want an answer. It is genuinely boring if you want to actually build something. What if the AI could respond with a working game board you could click? What if saying "make it Barbie themed" actually transformed the whole interface while you watched? What if "add a starfield in the background" dropped an animated canvas behind your chat in real time? I spent a few weeks building exactly that. I call it FlowChat . Here is the live version: https://flowchat-public.varshithvh.workers.dev And yes, someone immediately asked it to play Tic Tac Toe and then asked it to switch to an Oppenheimer theme mid-game. I could not be prouder. The Idea Normal AI chat: model returns markdown, client renders it as text. Simple, predictable, boring. FlowChat: model returns raw HTML with CSS and JavaScript, client injects it directly into the DOM using a streaming protocol built on the browser's native template system. That one change makes the entire experience different. You are not reading about a game. You are playing one. You are not reading about a Barbie color palette. You are sitting inside one. The AI does not just answer questions. It rebuilds the UI from its responses . What You Can Actually Do With It I want to give you a feel for what this means in practice before getting into the technical bits, because the demos are more interesting than any architecture diagram. Games : Ask it to build Tic Tac Toe. You get a playable board, click-to-move, an AI opponent, win detection. Ask for Connect 4. Ask for Snake. The game renders in the chat as an agent bubble with a form inside it. Each move submits to the LLM which processes it and updates only the cells that changed. Themes : Say "change to a Barbie theme". The model injects CSS overrides and the whole interface turns pink. Me

本文内容来源于互联网,版权归原作者所有
查看原文