UI-Centric-AI

Explorable answers, rendered inside conversation.

UI-Centric-AI is an open research prototype for chat products where an assistant can answer with text and an embedded interactive UI. It is inspired by Generative UI: LLMs are Effective UI Generators, but shaped as a small product you can run, inspect, and extend.

When text is enough, UI-Centric-AI replies normally. When a topic benefits from exploration, it asks an OpenAI-compatible model to return a JSON response containing a sandboxed HTML artifact. The frontend streams the model output while generation is happening, then renders the completed UI directly inside the assistant message.

Why This Exists

Most chat UIs still turn every answer into text. UI-Centric-AI explores a different interaction model: the answer can become a calculator, timeline, planner, simulation, chart, game, or tiny app inside the conversation.

The project is intentionally compact:

• React + Vite frontend.
• FastAPI backend.
• OpenAI-compatible model client.
• Sandboxed iframe rendering for generated HTML.
• Streaming model output during generation.
• Multi-turn follow-up requests that can revise prior generated UIs.
• Lightweight research eval for artifact quality.
• Standalone reproduction scripts for arXiv 2604.09577-style experiments.

Quick Start

Clone the repo:

git clone https://github.com/lern-to-write/UI-Centric-AI.git
cd UI-Centric-AI

Start everything:

bash scripts/start.sh

On first run, the script will ask for:

• OPENAI_API_KEY
• OPENAI_BASE_URL, default https://api.openai.com/v1
• OPENAI_MODEL, default gpt-4o

It writes those values to backend/.env, installs missing dependencies, and starts the app. The .env file is ignored by git.

Open:

http://127.0.0.1:5173/

scripts/start.sh starts:

• backend: http://127.0.0.1:8001
• frontend: http://127.0.0.1:5173

For any OpenAI-compatible provider, set OPENAI_BASE_URL and OPENAI_MODEL to values supported by that endpoint. If you already installed dependencies and configured backend/.env, bash run-dev.sh starts the app directly.

Try These Prompts

Explain gradient descent with sliders and a plotted loss curve.

Create an interactive study planner for a busy college student.

Create a memory matching game with score and reset controls.

Then try a follow-up:

Make it harder and add a restart button.

While the model is generating, UI-Centric-AI shows the live model stream in the assistant bubble. When the JSON response is complete, it replaces the loading state with the final assistant text and embedded UI.

Demo Screenshots

These screenshots were captured from real local runs of the UI-Centric-AI app.

Gradient Descent Explorer

Study Planner

Snake Game

How It Works

frontend/
  React + Vite chat interface
  renders assistant text and sandboxed HTML artifacts

backend/
  FastAPI API
  /api/chat for normal JSON responses
  /api/chat/stream for SSE streaming responses
  current-session conversation history support
  OpenAI-compatible model client

eval/prompts/
  small PAGEN-inspired prompt set

scripts/run_research_eval.py
  smoke eval for the chat-embedded artifact contract

docs/research/
  paper notes and demo script

generative_ui.py / eval_pipeline.py / prepare.py
  standalone reproduction utilities for arXiv 2604.09577-style experiments

The model contract is strict JSON:

{
  "assistant_text": "short friendly response text",
  "artifact": {
    "type": "html",
    "title": "short artifact title",
    "html": "complete single-page HTML document"
  }
}

artifact can be null when the answer does not need an interactive surface.

Research Mode

UI-Centric-AI has two research paths.

The app-specific smoke eval tests the current chat-embedded artifact contract:

python3 scripts/run_research_eval.py --limit 3

It reads eval/prompts/pagen_lite.jsonl, loads provider settings from backend/.env, writes JSONL results to .openresearch/runs/, and summarizes:

• artifact rate
• interaction rate
• HTML document/script/style signals
• model errors
• unsafe pattern hits such as window.parent, localStorage, or API-key text
• latency

The standalone reproduction utilities are closer to the paper's original setup:

bash demo.sh

or:

bash run.sh

These scripts generate full-page HTML artifacts and run a structural evaluation pipeline. They are useful for experiments, but the main product surface is the chat app.

Paper Alignment

Paper component	UI-Centric-AI status
Generated UI instead of markdown-only answers	Implemented
Browser-rendered single-page UI	Implemented as sandboxed chat artifacts
Detailed system prompt	Implemented
Streaming during generation	Implemented
Multi-turn UI refinement	Implemented for current frontend session
PAGEN-style prompt coverage	Lightweight smoke set included
Automated structural eval	Included
Standalone page-generation reproduction	Included
Image/search tools	Not implemented in the chat app yet
Post-processors for malformed HTML/JS/CSS	Minimal only
Human-rater ELO evaluation	Not included

Useful docs:

• Paper notes
• Demo script
• Citation

Brand Assets

The repository includes a small set of generated visual assets:

• Logo SVG
• Mark SVG
• Logo exploration sheet
• Generated app icon

Verification

Backend tests:

(cd backend && PYTHONPATH=. python3 -m pytest -v)

Frontend tests:

(cd frontend && npm test)

Production build:

(cd frontend && npm run build)

Contributing

Start with CONTRIBUTING.md. Good first contributions include:

• better artifact post-processing
• safer sandbox policies
• more research prompts
• streaming UX improvements
• image/search tool adapters
• human preference evaluation UI
• stronger docs and examples

Security Notes

• Do not put provider keys in frontend code.
• Do not commit backend/.env.
• Generated artifacts run in sandboxed iframes with scripts enabled but without same-origin access.
• This prototype allows generated artifacts to load external resources, including CDN scripts and images.
• Treat generated artifact HTML as untrusted content.

Current Limits

• No chat persistence.
• No server-side conversation sessions; multi-turn memory lives in the visible frontend state.
• No artifact approval workflow.
• No server-side artifact storage.
• Minimal post-processing.

License

MIT. See LICENSE.