Open source · MITThe expression-driven generative UI framework

Every screen, cast on request.

uicast turns a request into a working screen. The model picks your components and writes every value, filter and click as an expression over your data. Users get the screen they asked for. Developers ship the parts once.

Watch a screen being cast Open the live demo

Building with a coding agent? Give it the skill:

① Whole screens

Pick a request. The screen builds itself.

Your components:

Every screen here is a document a model wrote for the request, rendered with registered components. No model is attached to this page: these are recorded samples.

ready

② Chat answers

Ask a question, get a tool back.

The answer is not a paragraph you read and then go act on. It is a small working screen: a poll you vote in, a chart with a slider, a refund form that asks before it refunds.

Your users stay in the conversation. The buttons in an answer do the thing, through your functions.

Your developers drop one plugin into a Markdown chat. The UI rides in code fences, and every block in a conversation shares one state. Tap </> under an answer to see its document.

Assistant● in your app

Sample questions only: no model is attached to this page. Ask your own in the live demo.

For product teams

The screen your users want, without the ticket

A report for one customer, a form for one process, a view nobody planned: today each is a ticket, a sprint and a release. With uicast it is a request, answered from parts your team already built.

New screens without a release

A report for one customer, a form for one process: built when someone asks, from parts your team already has.

Your look on every screen

Only your components are used, so a generated screen looks like the rest of your product. Try the style switch above.

Your rules still hold

Screens reach your data only through the functions your developers expose, and your server checks permissions on every call.

Answers that do the work

In a chat, an answer can be a form, a chart or a list with actions, and blocks in one conversation share state.

Questions you'll be asked

Yes, if your components do. The model can only use the components your developers registered, and your own React code renders them. The style switch above shows one document in three designs.

What it is not

Not a website builder and not a code generator. A generated screen can only combine the components and functions your developers registered, so it is as good as those parts.

Screens that need pixel-level control, like a marketing page or a print-exact invoice, are still better built by hand.

It is in beta, open source under the MIT License.

For developers

The model as your front-end developer

uicast is a UI framework whose language is written by models, not people. It gives a model what JSX gives a developer (components, state, events) but is built to be reliable to generate rather than easy to maintain. The model's output is data: the engine turns it into a working front-end app, with no build or deploy step per page.

Define components, functions

Your design system and your endpoints, each behind a schema: the closed set the model builds from.

AI generates

Derived values, visibility and events are short JavaScript expressions, checked before they run.

Get an app, logic included

Elements mount as they arrive. Clicks run callbacks that call your functions and write reactive state.

Expressions hold the logic

What makes uicast different is expressions: computed values, visibility and event handling are JavaScript, run by a closed-grammar interpreter. Structured generation offers a fixed set of bindings and operators instead, so a calculation outside that set needs a code change.

Approach	Predictability	Expressiveness	Model code
Raw code generation	low	unlimited	any
uicast	high	high	expressions
Structured generation (json-render, A2UI)	deterministic	limited	none

The expression evaluator

Expressions run on an interpreter for a fraction of JavaScript: a closed grammar, an allow-list of methods and globals, a check on every property read, and a CPU and allocation budget. By default nothing reaches eval or new Function, so a uicast app runs under a strict Content-Security-Policy, without unsafe-eval.

The interpreter secures the language, not what you plug into it: host functions are capabilities you grant, and scope data is only as safe as what you put there.

The expression language

// scopes.root.orders === [{ total: 2 }, { total: 3 }]

scopes.root.orders.reduce((a, o) => a + o.total, 0) ✅ → 5Plain JavaScript over JSON data.

listOrders() ✅ a host function you registeredCallable in seed and callbacks.

fetch("/api/orders") ❌ throws"fetch" is not available in expressions.

document.cookie ❌ throwsSo do "window", "localStorage", "eval", …

The prompt is generated from your code

uicast prints the model's list of components and functions from your component definitions and function schemas. Change a prop or a function, and the prompt changes with it.

Both lists are closed: the model picks components from your catalog and calls only your functions, each a standard-tool. The descriptions are the ones you wrote on props and schema fields.

Assembling the prompt

# Available Components

Alert, Badge, BarChart, Button, Card, Checkbox, …

## Component Details

- Button — A clickable button.
  Props:
    - text?: string — The button label
    - variant?: "default" | "destructive" | "outline" | …
  Event handlers:
    - onClick(evt: MouseEvent)

# Available Functions

listOrders, refundOrder, …

## Function Details

- listOrders() => {
    id: number /* integer */;
    customer: string;
    total: number;
    status: "pending" | "paid" | "shipped" | "refunded";
  }[]: Every order this week, newest first.

Events carry declared payloads

An event can carry data. Inside a callback, evt is the payload, shaped by the definition. It is not React’s SyntheticEvent.

Events

Expressions call host functions

The functions you register, each a standard-tool with a name, a description, schemas and execute. They are how a document reaches your backend.

Host functions

Chat replies carry live UI

The Streamdown plugin renders each uicast fenced block in a Markdown reply as a live renderer. All blocks in a chat share the root scope.

Chat surfaces

Next steps

Getting started — install and render your first document.
Concepts — the model, expressions and scopes.
Component definition — build your own components.
Streaming — stream entries from a route and render them as they arrive.

Try it

Live demo · no setup

Warehouse back office

A back office for a made-up store: suppliers, products, customers, orders and a stock ledger. Only the sidebar and the chat panel are hand-written; every page and chat answer is a document a model wrote. Browse without an account, or log in with OpenRouter to generate on your own key.

warehouse.uicast.dev

Agent skill

Let your agent wire it

One SKILL.md covers components, functions, the prompt, the renderer, chat and errors. The skills CLI installs it for Claude Code, Cursor, Codex, Gemini CLI, Copilot and other agents.

Run in your project

Starter app

Start from a template

The app the getting-started guide builds: a prompt box, the shadcn catalog, one function and a stand-in API. Next.js is the example; any React app with a server route works.

Create the app