ueye

A local-first playground for prompting an LLM to build UIs, interact with them, and keep iterating.

The model never writes HTML, CSS, or JavaScript. It writes triples — flat ID ATTRIBUTE VALUE rows — and a tiny renderer turns them into live DOM. Every edit the model makes later is a diff against those same ids. You get a fast feedback loop: type a prompt, watch the UI build itself, click on things, ask for changes, repeat.

No build step. No npm install for the app itself. Just python3 proxy.py and a browser.

Highlights

• Zero-build client. index.html plus ES modules under js/. The browser loads everything natively; no bundler, no transpiler, no framework.
• Stdlib-only server. proxy.py is a single Python file that serves the app, proxies LLM calls (to work around CORS), and backs the projects/pages API with plain files under ./data/.
• Triples DSL. The model emits rows like header content "Hello" and header style.fontSize 24. Nothing more, nothing less. Multi-line values use heredocs (<<<EOF … EOF). Deletions use -id and -id attr.
• Projects, pages, and history. Every project has one or more pages; every page has its own scene, its own data bag, and an unbounded history timeline you can roll back to. Editing on one page never loses work on another.
• Targeted edits. Click anything in the rendered UI to append [Context: …] to your prompt, or toggle Select mode to promote clicks into persistent target chips that scope subsequent prompts by node id.
• Multi-provider LLM support. Google Gemini and Anthropic Claude out of the box. Keys are stored per-provider in data/settings.json so you can switch providers without re-entering.
• Four image providers. Pollinations (free, no key), Google Imagen 3, OpenAI gpt-image-1, and Fal.ai FLUX.1 [schnell]. Each paid provider stores its key separately; a failure opens a "switch provider?" modal so a bad day at one vendor doesn't block your work. Images support a first-class seed attribute so "regenerate this image" gives a genuinely new variant.
• Theme-aware. Every UI chrome color comes from a small token set that flips cleanly between light and dark. The DSL exposes the same tokens (theme.accent, theme.surface, theme.danger, …) so generated content follows the theme too.

How it works, in one picture

prompt → buildPassPrompt → LLM → triples → parser → AST → renderer → live DOM
   ↑                                                                      │
   └──────── click / Select mode / keyboard edits ───────────────────────┘

The sidebar shows your current scene as Triples source, the viewport shows the rendered DOM. Every generation pass is appended to history; you can click an older entry to preview it and explicitly roll back.

Getting started

See QUICKSTART.md for the full clone-to-first-prompt walkthrough. The short version:

git clone git@github.com:LedgerAI/ueye.git
cd ueye
python3 proxy.py

Then open http://127.0.0.1:8765/, create a new project, paste your Google Gemini or Anthropic Claude API key into the Settings panel, and type a prompt.

Examples to try

See IDEAS.md for six ready-to-paste prompts that exercise different parts of the system: a multi-page portfolio, a Kanban board, a recipe collection with per-recipe pages, a habit-tracker dashboard, a Pomodoro timer, and a tiny blog.

Repo layout

index.html          # single-page shell: all markup, all CSS, one <script type="module">
proxy.py            # Python-stdlib server: static files + LLM proxy + projects API
js/
  main.js           # boot entry point
  ai.js             # prompt construction + multi-pass generation loop
  triples.js        # DSL parser and text-merge
  renderer.js       # AST → DOM, link resolution, select-mode hooks
  pages.js          # sidebar pages panel
  history.js        # per-page history timeline
  select.js         # target-chip selection model
  ...               # smaller modules: state, dom, theme, settings, modal, drafts, layout
test/
  *.test.js         # Node 20+ test suite, jsdom-backed
data/               # runtime state: settings.json + projects/<id>/pages/<pgid>/...
AGENTS.md           # contract for AI coding agents working on this repo
QUICKSTART.md       # human-friendly getting-started guide
IDEAS.md            # example prompts to paste in

Development

The app itself has no runtime dependencies beyond a browser and Python 3. The only npm dependency is jsdom, used by the unit tests.

Run the test suite:

npm install    # once, pulls jsdom for the test harness
npm test

Tests cover the Triples parser, the renderer, the target-chip selection model, the pages/history APIs, the collapsibles, and more.

Contributions that introduce a build step, a bundler, a framework, or a third-party runtime dependency will be declined. See AGENTS.md for the full contract — it's written for AI agents but applies to humans just as well.

License

TBD — check back for a LICENSE file, or ask before redistributing.