thesysdev/open-intelligent-ui

Open Intelligent UI – What It Is

Open Intelligent UI is an open‑source demo that recreates the “Intelligent UI” experience shown in ChatGPT – where a user query like “plan a day in San Francisco” returns a rich, interactive answer (maps, photos, editable itineraries) instead of plain text. The project builds this on top of OpenUI, an open standard for generative UI that lets a language model stream a description of UI components (OpenUI Lang 1.0) which the front‑end then renders.

Core ideas

• Model‑driven UI – The LLM generates a program in OpenUI Lang that assembles UI primitives (layout, text, inputs, media, charts, maps, etc.). No static layout is hard‑coded; the model decides which components to use.
• Component library – A TypeScript library (src/lib/components/) defines 30+ reusable primitives (e.g., Col, Row, Map, Chart, SearchImage). Each component has a schema, styling tokens, and dark‑mode support.
• Built‑in functions – 59 generic @functions (list, math, date, color, aggregation, etc.) let the generated program compute values, update state, and drive interactive widgets.
• State & actions – UI inputs bind to $variables; actions like @Set, @CopyToClipboard, @OpenUrl mutate state without round‑tripping to the server.
• Pluggable back‑ends – By default the app talks to the OpenUI Cloud gateway, but you can point it at any OpenAI‑compatible API (OpenRouter, local Ollama, etc.).

How it works (high‑level flow)

1. User types a request → front‑end sends it to /api/chat.
2. Server builds a system prompt that includes the component spec and prompt‑options, then calls the chosen LLM (OpenAI, Ollama, etc.).
3. LLM streams OpenUI Lang describing the UI.
4. Front‑end parses the stream and renders the described components live. State changes (sliders, checkboxes) trigger the same functions on the client.
5. Optional tools – SearchImage fetches a Wikipedia lead image, /api/street-route gets road geometry from OSRM, etc.

What you get out of the box

• A demo chat UI at http://localhost:3000 that can answer travel‑planning, dashboard, and other “Intelligent UI” prompts.
• A design surface (/gallery) showing hand‑written programs for all 16 official examples plus two dashboards, useful for UI designers to explore the component set.
• Benchmark scripts that can run the 16 examples and 8 dashboard prompts against any model, validate the generated UI, and capture screenshots.

Getting started (quick steps)

cp .env.example .env
npm install
npm run generate:apiKey   # writes THESYS_API_KEY to .env (or skip if using your own API)
npm run dev               # starts the dev server

Open the browser, type a request such as:

I'm in San Francisco for a day, plan a sightseeing route for me

The UI will appear with a map, photos, and editable itinerary.

Running locally with Ollama (no cloud key)

1. Install Ollama and pull a model (default qwen3.8:27b).
2. Ensure a large context window (OLLAMA_CONTEXT_LENGTH=32768).
3. Set MODEL_PROVIDER=ollama in .env and npm run dev.
   • No output‑correction step, so larger models give better results.

Who might use this

• Developers building AI‑augmented products who want a ready‑made UI‑generation stack.
• Designers exploring how LLM‑driven interfaces can be composed from reusable primitives.
• Researchers evaluating generative UI models (the benchmark scripts make systematic testing easy).

Limitations

• The demo relies on a fairly large prompt (≈8 k tokens); local models need a big context window.
• When using a local model, the OpenUI gateway’s validation/correction is skipped, so malformed UI code can break the UI.
• Only a subset of OpenUI 1.0 components/functions are implemented; extending the library requires adding schemas and regeneration steps.

---

In short: Open Intelligent UI is a concrete, open‑source implementation of ChatGPT‑style “Intelligent UI” using the OpenUI generative‑UI standard, with a full component library, stateful functions, and flexible back‑end options for any OpenAI‑compatible model.