cd /news/artificial-intelligence/an-llm-writes-a-playground-ui-for-ea… · home topics artificial-intelligence article
[ARTICLE · art-69461] src=discuss.huggingface.co ↗ pub= topic=artificial-intelligence verified=true sentiment=· neutral

An LLM writes a playground UI for each model and the browser compiles and sandboxes it

Developer AminMusah built Forge (modelplayground.dev), an open-source browser playground for Hugging Face models that runs models locally via transformers.js and WebGPU, while a separate code model generates a task-specific UI on demand. The playground compiles and sandboxes the generated React UI in the browser, with a single shared React instance to avoid hook errors, and includes a view-source toggle for inspection. The project is available under an MIT license.

read2 min views1 publishedJul 23, 2026

I built Forge (https://modelplayground.dev) (open source, MIT) a browser playground for Hugging Face models. You pick a model, it downloads and runs on your GPU via transformers.js + WebGPU. The part I want to show is how it builds the UI.

Two models are involved, and it’s worth separating them up front: the model you’re testing runs locally in your browser, while a separate code model writes the playground UI. That part is a server call (a few free on the hosted app, or your own key). Everything below is about that second path.

Different tasks need completely different interfaces. Object detection needs an image with boxes drawn over it, ASR needs an audio recorder and a transcript etc. Hand building an interface for each task is not ideal, so instead the UI is generated on demand, and the browser compiles and runs it.

How a playground is created

A few decisions that mattered

One model kept warm, behind a normal looking API: Weights take tens of seconds to compile and won’t fit in GPU memory twice, so a single background worker holds exactly one model at a time. Local inference is dressed up to look like an ordinary streaming chat API, so everything downstream, streaming, stop, regenerate, saved history works without knowing the tokens came from the user’s GPU instead of a server.

One shared copy of React in the sandbox: The generated component uses React, and the sandbox loads a single shared instance. Giving the compiled code its own bundled copy instead produced the classic two React “invalid hook call.”

You can read what it wrote: Every playground has a view source toggle, so a misbehaving UI is inspectable rather than a black box.

What I’m still chewing on

The compile error retry loop works, but it’s blunt. it re-sends the whole file with the error appended. Has anyone found a better pattern for getting a code model to repair a generated UI rather than regenerate it from scratch? And for in browser codegen, is esbuild-wasm still the best option, or is there something lighter now?

Source and live demo: https://modelplayground.dev · https://github.com/AminMusah/forge

── more in #artificial-intelligence 4 stories · sorted by recency
── more on @forge 3 stories trending now
sponsored brought to you by zahid.host 4,200+ EU-deployed projects
reading about agents? ship yours in a single git push.

Run your AI side-project on zahid.host

EU-based hosting, git-push deploys, automatic HTTPS, no cold starts. Free tier with a custom domain — perfect for shipping the agent you just read about.

$git push zahid main
Live at https://your-agent.zahid.host
Get free account → Pricing
from €0/mo · no card required
LIVE [news/an-llm-writes-a-play…] indexed:0 read:2min 2026-07-23 ·