{"slug": "show-hn-qorm-build-ui-apps-where-you-and-your-ai-edit-the-app-together-live", "title": "Show HN:QORM – build UI apps where you and your AI edit the app together, live", "summary": "QORM, an agent-native declarative-UI runtime, enables developers to build UI apps collaboratively with AI assistants like Claude in real time. The tool, written in Go, allows AI to scaffold, edit, run, and verify apps while humans interact with the same live app, and supports cross-platform deployment to web, iOS, Android, desktop, and mini-programs.", "body_md": "**English** · [中文](/qorm/qorm/blob/main/README.zh.md)\n\n**Build UI apps with your AI assistant — together, live.** QORM is an\nagent-native declarative-UI runtime: describe a UI as small, language-neutral\nJSON, and your AI (Claude, Cursor, …) can **scaffold, edit, run, and verify** it\nwhile you collaborate on the same running app in real time — you click, it sees\nyou; it edits, you watch it happen.\n\nThe GIF was recorded by QORM itself — the AI drove the edits over MCP and qorm shot captured each frame via WebKit. No browser automation; see\nscripts/record-demo.sh.\n\nUnder the hood the default build is pure Go — it runs the app live in the browser, renders a static HTML snapshot, ed25519-signs it into a distributable bundle, serves it over-the-air with rollback, exposes it to agents over MCP, and packages it for web / iOS / Android / desktop / mini-program — cross-compiled from any machine.\n\nDeveloped in collaboration with Claude (Anthropic) — fitting, since human-AI collaboration is QORM's whole premise.\n\nQORM is agent-native: point your AI coding assistant (Claude Code, Claude Desktop,\nCursor, Windsurf, …) at it and have it **scaffold, edit, run, and verify** QORM\napps — then collaborate with you on a live app in real time. You click, it sees\nyou (`qorm_activity`\n\n); it edits, you see an **\"AI edited\"** toast. Set it up once:\n\n```\ngo install github.com/qorm/qorm/cmd/qorm@latest\nclaude mcp add qorm -- qorm mcp .      # or add integrations/mcp.json to your agent\n```\n\nThen just ask — *\"scaffold a habit tracker\"*, *\"fix this overflow\"*, *\"package it\nfor web\"*. Full guide: ** Build with your AI** ·\n\n[Human-AI collaboration](/qorm/qorm/blob/main/docs/collaboration.md).\n\n| Target | Package | Render | Live app | Agent / MCP |\n|---|---|---|---|---|\n| Web | ok | ok | ok | ok |\n| iOS | ok | ok | ok | ok |\n| Android | ok | ok | ok | ok |\n| macOS | ok | ok | ok | ok |\n| Linux | beta | ok | ok | ok |\n| Windows | beta | ok | ok | ok |\n| Mini-program | ok | beta | beta | beta |\n\n`ok`\n\nsupported + tested · `beta`\n\nfoundation / partial · `—`\n\nn/a. The full feature\nlist (distribution, rendering, runtime, agent — each per target) is the\n[platform support matrix](/qorm/qorm/blob/main/docs/platforms/support-matrix.md); each platform's\nhardware interfaces are in [capabilities.md](/qorm/qorm/blob/main/docs/platforms/capabilities.md). Both\nare generated from the code and kept in sync by tests.\n\n```\ngo run ./cmd/qorm run examples/counter      # opens the app in your browser\ngo run ./cmd/qorm render examples/todo -o todo.html   # static snapshot\n```\n\nPress `+`\n\n/ `-`\n\nin the counter, or add/toggle tasks in the todo app — button\npresses POST to `/event`\n\n, the server updates state, re-runs the action, and\nswaps in the re-rendered UI.\n\nCompile an app into a single content-addressed artifact and sign it with ed25519. The runtime verifies integrity (tamper detection) and, with a trusted public key, authenticity — before running a line of it. This is the trust primitive for safe over-the-air UI delivery.\n\n``` php\nqorm keygen                                        # -> qorm_key, qorm_key.pub\nqorm build examples/counter -o counter.qorm.bundle --key qorm_key\nqorm verify counter.qorm.bundle --trust qorm_key.pub\nqorm run    counter.qorm.bundle --trust qorm_key.pub   # refuses tampered/unsigned bundles\n```\n\nA tampered bundle fails the hash check; a bundle signed by an untrusted key\nfails the signature check; both are refused at run time. All pure Go\n(`crypto/ed25519`\n\n), so it cross-compiles like everything else.\n\n``` php\n./scripts/build-all.sh          # -> dist/qorm-{darwin,linux,windows}-{amd64,arm64}\n```\n\nEach target is a single static ~7 MB binary with no runtime dependencies. In\nthis default (pure-Go) build, `qorm run --app`\n\nopens the app in a chromeless\nbrowser window.\n\nFor a true native window, build with `-tags desktop`\n\n. This drives the\nplatform-native WebView (WKWebView / WebView2 / WebKitGTK) via cgo — using a\nvendored WebView binding ([ internal/webview](/qorm/qorm/blob/main/internal/webview)) — so it is built\n\n**per-platform**, not cross-compiled from one machine:\n\n```\n./scripts/build-desktop.sh                     # native binary for this OS\nqorm-desktop-... run examples/counter --app    # opens a native window\n```\n\nThe two paths coexist deliberately: default = cross-compile everywhere (browser\nwindow); `-tags desktop`\n\n= native window (per-platform build). Both render\n**HTML/CSS in a web engine**, so both keep the full agent-collaboration stack\n(shared live session over SSE + MCP). The QORM architecture (loader → runtime →\nrender → server) is identical in both.\n\n| build | render | draws widgets |\n|---|---|---|\n| default | HTML/CSS → browser | web engine |\n`-tags desktop` |\nHTML/CSS → native WebView | web engine |\n\nExpose the app to an agent (Claude, Cursor, …) over the Model Context Protocol (stdio JSON-RPC):\n\n```\nqorm mcp examples/counter\n```\n\nThe agent can **design, run, test and operate** the app — the loop for real\nhuman-AI collaboration:\n\n| capability | tools |\n|---|---|\n| understand | `qorm_inspect` , `qorm_render_html` , `qorm_get_node` , `qorm_list_actions` |\n| operate | `qorm_dispatch` (run an action), `qorm_set_state` |\n| test | `qorm_assert` (stateEquals / htmlContains / nodeExists) |\n| design | `qorm_preview_patch` → `qorm_apply_patch` |\n| reason | `qorm_simulate_action` (side-effect-free) |\n\nSafety model: `simulate`\n\nand `preview_patch`\n\nnever touch the live app;\n`apply_patch`\n\nmust carry the `previewToken`\n\nreturned by a prior `preview_patch`\n\nof the **same** ops — so a committed design change is always bound to a review.\n\n`qorm run`\n\nalso exposes the agent over HTTP at `/mcp`\n\n, sharing the *same*\nruntime the browser renders. An AI's edits appear in every connected browser\n**instantly** — the page subscribes to Server-Sent Events at `/events`\n\n(with a\n`/poll`\n\nfallback) — and the human's clicks are visible to the AI's next\n`qorm_inspect`\n\n. True real-time human-AI collaboration on one running app.\n\n```\nqorm run examples/counter          # browser UI + agent endpoint at /mcp\n# agent: POST http://127.0.0.1:PORT/mcp  (JSON-RPC 2.0)\napp JSON (manifest + scenes + actions)\n  → loader   parse into model.App (Node tree / Action / GlobalState)\n  → runtime  state store + {{expr}} evaluation + action dispatch\n  → render   Node → HTML + CSS flexbox (browser does layout)\n  → server   HTTP + /event live update loop\n```\n\n| package | role |\n|---|---|\n`internal/model` |\nApp / Node / Action data model |\n`internal/loader` |\nload a dir (skips `type:test` ), parse manifest/scene/action |\n`internal/expr` |\nexpression evaluator (`count + 1` , `state.x` , ternary, ...) |\n`internal/runtime` |\nstate, binding interpolation, action steps (`state.set/append/appendObject/toggle` ) |\n`internal/render` |\nfull widget set → HTML/CSS, incl. `list` repeat with `{{item.*}}` scope |\n`internal/server` |\nlive HTTP server + event dispatch |\n`internal/bundle` |\ncompile + sha256 content hash + ed25519 sign/verify |\n`internal/keys` |\ned25519 keypair generation and storage |\n`internal/ota` |\nfetch (http/file) + verify-before-activate, rollback by inaction |\n`internal/mcp` |\nMCP stdio JSON-RPC server (agent tools) |\n`cmd/qorm` |\n`run` / `render` / `build` / `keygen` / `verify` / `mcp` CLI |\n\nTop-tier widget vocabulary, all mapped to semantic HTML/CSS:\n\n**Layout**: row, column, stack/absolute,`scroll`\n\n,`grid`\n\n(N columns),`card`\n\n,`spacer`\n\n,`divider`\n\n, wrap.**Text**: text,`link`\n\n,`icon`\n\n,`badge`\n\n— with fontFamily, lineHeight, letterSpacing, textDecoration,`lineClamp`\n\n/`ellipsis`\n\n, transform.**Input**: input (two-way state binding),`textarea`\n\n,`select`\n\n, checkbox, switch,`radio`\n\n, slider — with`onChange`\n\nevents.**Media/feedback**: image,`avatar`\n\n(image or initials),`progress`\n\n,`spinner`\n\n,`video`\n\n.**Structure**:`tabs`\n\n(client-side switching),`list`\n\n(data-bound repeat with`{{item.*}}`\n\nscope).\n\nPlus cross-cutting features on every node: conditional rendering\n(`\"if\": \"{{state.x}}\"`\n\n), accessibility (`role`\n\n, `ariaLabel`\n\n, `title`\n\n), and rich\nstyle (shadow, gradient, position + top/left/right/bottom, aspectRatio,\nmin/max width/height, opacity, transition). See `examples/gallery`\n\n.\n\nA running app (started from a bundle) accepts hot updates: `POST /update {\"source\": \"<url-or-path>\"}`\n\nfetches, verifies (hash + signature vs the trusted\nkey) and hot-swaps the app; `POST /rollback`\n\nreverts. A rejected update leaves\nthe live app untouched — a bad update can never take it down.\n\nQORM is dual-consumer — the same artifacts serve human developers and AI agents.\n\n**Humans** start at: the`docs/`\n\n[getting-started tutorial](/qorm/qorm/blob/main/docs/tutorials/getting-started.md), the[widget catalog](/qorm/qorm/blob/main/docs/reference/widgets.md)and[capabilities](/qorm/qorm/blob/main/docs/platforms/capabilities.md)(both auto-generated from the code), platform guides, and the[user middle-layer](/qorm/qorm/blob/main/docs/platforms/native-middlelayer.md)— add your own native ops in one`native/desktop.go`\n\nthat compiles into the desktop binary*and*the mobile/web WASM.**AI agents** start at(or`llms.txt`\n\n): a curated, machine-readable map of everything above. Add QORM to your agent with`AGENTS.md`\n\n, drive a live app over`integrations/`\n\n[MCP](/qorm/qorm/blob/main/docs/agent/mcp-tools.md), and self-verify your edits against real rendered geometry with`qorm measure`\n\n/`qorm check`\n\n(see[verification](/qorm/qorm/blob/main/docs/verification.md)).\n\nThe source is [MIT](/qorm/qorm/blob/main/LICENSE) — free to use, modify, and distribute. One branding\nterm applies ([ops/TERMS.md](/qorm/qorm/blob/main/ops/TERMS.md)): apps ship with the QORM logo by default;\npersonal / educational / open-source use may re-icon freely, and **commercial\nwhite-labeling** (a custom icon, or removing the \"Made with QORM\" metadata note) asks\na Patreon membership — **Indie $1/mo** (individual) or **Studio $7/mo** (company). A **Supporter** tier ($3/mo) backs the project with priority feature requests; personal/edu/OSS use is the free **Community** tier. The `qorm`\n\nCLI asks you\nto confirm (honour-system) when you package a commercial feature. Supporters are recognized on the QORM Patreon page.\n\nHTTPS OTA (`qorm run --tls`\n\n), key-revocation lists (`--revoked`\n\n), and the\nagent `apply_patch`\n\ntool have all landed. Remaining direction — a hosted docs\nportal, a sandboxed Playground, and the ecosystem registry — is tracked in\n`docs/planning/`\n\n.\n\nThe optional native-desktop window vendors the [webview](https://github.com/webview/webview)\nC/C++ library and its [Go binding](https://github.com/webview/webview_go) (MIT,\n(c) Serge Zaitsev) — thank you. The opt-in native-window approach was inspired by\n[Wails](https://github.com/wailsapp/wails).", "url": "https://wpnews.pro/news/show-hn-qorm-build-ui-apps-where-you-and-your-ai-edit-the-app-together-live", "canonical_source": "https://github.com/qorm/qorm", "published_at": "2026-07-07 11:48:39+00:00", "updated_at": "2026-07-07 11:59:24.508145+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools", "generative-ai"], "entities": ["QORM", "Claude", "Anthropic", "Cursor", "Windsurf", "WebKit", "Go"], "alternates": {"html": "https://wpnews.pro/news/show-hn-qorm-build-ui-apps-where-you-and-your-ai-edit-the-app-together-live", "markdown": "https://wpnews.pro/news/show-hn-qorm-build-ui-apps-where-you-and-your-ai-edit-the-app-together-live.md", "text": "https://wpnews.pro/news/show-hn-qorm-build-ui-apps-where-you-and-your-ai-edit-the-app-together-live.txt", "jsonld": "https://wpnews.pro/news/show-hn-qorm-build-ui-apps-where-you-and-your-ai-edit-the-app-together-live.jsonld"}}