The same options exist in every renderer: as props on <GistUI>, or as options of mount() in vanilla JavaScript.
Input
| Option | Type | Notes |
|---|---|---|
stream |
ReadableStream | AsyncIterable |
Text or bytes. The renderer reads it. |
source |
string |
A growing string. Only the appended part is parsed. |
streaming |
boolean |
With source: whether more text is coming. |
inline |
boolean |
The text is chat text with gistui fences. |
library |
Library |
Required in React and vanilla (ui). Optional in Vue, Svelte and Solid, which default to the built-in one. |
components |
map | Vue, Svelte, Solid: components that replace built-in ones. |
Use stream, or source + streaming, not both.
Callbacks
| React, Solid, vanilla | Vue | Svelte | Receives |
|---|---|---|---|
onAction |
@action |
onaction |
An action |
onError |
@error |
onerror |
Diagnostics, as they are found |
onStateChange |
@stateChange |
onstatechange |
State after a change |
onProse |
@prose |
onprose |
Prose lines the model wrote around the program |
onAutofix |
@autofix |
onautofix |
{ changes, errors } after a repair |
onToolCall |
onToolCall (prop) |
ontoolcall |
{ name, args, kind, nodeId }; return false to block |
Appearance
| Option | Type | Default |
|---|---|---|
theme |
"system" | "light" | "dark" |
"system" |
color |
a preset name | the catalog default |
tokens |
theme tokens | none |
darkTokens |
theme tokens for dark | none |
classNames |
classes per component | none |
See Theming.
Behaviour
| Option | Type | Default | Notes |
|---|---|---|---|
initialState |
object | {} |
Starting values for $state variables |
lockUntil |
"done" | "ready" |
"done" |
When interactive parts unlock: at the end of the stream, or as each part completes |
openLinks |
boolean |
true |
false stops @open from opening links itself; you still get the open action |
paused |
boolean |
false |
Stops timed data refreshes |
autofix |
boolean |
true |
Repairs a finished program in code |
Tools and safety
| Option | Type | Notes |
|---|---|---|
tools |
functions, or { callTool } |
Read-only. @query may call them as soon as the UI renders. |
mutations |
functions | Run only when a person presses a button. |
allowedHosts |
string[] |
Hosts that images, video and backgrounds may load from. *.example.com matches subdomains. |
favicons |
boolean | string |
Site icons on Source cards. Off by default. A string is a URL with {host}. |
See Security.
Vanilla: the mount handle
const view = mount(element, options);
view.update(partialOptions); // change any option later
view.destroy();