Book a callGitHub147

Comes with OpenDesigner

Answers that show your interface

Smart UI makes your assistant answer by rendering your own components instead of plain text. Ask it for flights and get a list you can book, drawn with your tokens and checked before it shows.

It comes with OpenDesigner. Nothing separate to install, and it stays off until you ask for it or say yes when OpenDesigner offers it.

Add it to your assistantHow it works

Live in this page, not a video. The answers are recorded, then checked and drawn by the same code a live answer goes through. Try a question, book the fare, switch the system, or send a broken answer. Photo: Sean Fahrenbruch on Unsplash.

26

parts an answer can use, from the component library.

6

jobs they're sorted into: answer, data, choose, act, confirm and media.

69

shared test cases. The Python and browser validators must answer each one the same way.

3

design systems in this demo. Same answers, different tokens.

Counted from the repository when this page was built.

01How it works

From a message to a screen, in six steps.

The model picks a part and fills in words and numbers. It never picks a colour, a size or a link.

  1. 01

    Scope

    It reads your repo: what the product is, who uses it, where the assistant lives, your framework, your tokens, and the actions your API can take. It proposes what the assistant should answer with (for a travel app: flight results, a fare comparison, a booking confirmation) and you confirm the list. What it can't find says "not known".

  2. 02

    Catalog

    Your confirmed parts become a catalog the model reads. It holds words and numbers, and looks only from your token names.

  3. 03

    Select

    For each message, only the two or three parts that fit go to the model. A short question gets a text answer.

  4. 04

    Check

    The answer is validated before it renders. A mistake comes back to the model as an error it can fix.

  5. 05

    Show

    <od-surface>, a plain HTML element, draws the part from your library and your tokens.css. It works in React, Vue, Svelte or plain HTML.

  6. 06

    Audit

    Every part is rendered in every state at phone and desktop sizes, at 200% text, in dark mode and right to left, and checked against the accessibility floors.

02The parts

26 parts, each one a library component.

They work in your product with or without the assistant. Your scope step keeps only the ones you need.

Answer

Say something with its evidence

Data

Show numbers

Choose

Help the person pick

Act

Collect input or ask before acting

Confirm

Say what happened

Media

Show a picture, a place, a file or code

For one product

Offered only when the scope step picks it

The rest of the library

97 more components for the screens around the chat. They use the same tokens.

Open the library

03The rules

What every answer has to pass.

A mistake goes back to the model as an error it can fix. Nothing half-checked reaches the screen.

04Where it runs

What we ran, and what we haven't yet.

Where Smart UI runs

Not tried yet

  • Claude Desktop, claude.ai and ChatGPT with the MCP server. The view passes a simulated host; real hosts are known to differ.
  • Other A2UI renderers (the Lit, React and Flutter ones) and CopilotKit.
  • A real screen reader. The audit checks names, roles and the live region, which is what one reads, but not how it sounds.

05Read more

Try it on your own assistant.

It needs an OpenDesigner system first. The five-question sketch takes a few minutes.

Smart UI, explained

What it does, the rules it keeps and what you get.

Read the concept

Add it to your assistant

Scope your repo, confirm the parts, write the catalog and check each answer.

Open the quickstart

Where it runs

Your own product, A2UI v1.0, and MCP Apps hosts, with what was tested in each.

See the adapters