Image | GistUI

Preview

Loading preview…

root = Image("https://images.unsplash.com/photo-1490806843957-31f4c9a91c65?w=900&q=75&auto=format&fit=crop", "Mount Fuji behind cherry blossom", caption:"Mount Fuji in spring", ratio:"16/9", zoom)

Signature

This is the line a model reads in the system prompt.

Image(src, alt?, caption:str, ratio:str, zoom)

Group: Content
Children: No
Positional arguments: src, alt? (a trailing ? means it may be left out)

Props

Prop	Type	How to write it	Notes
`src`	string (URL)	positional, required
`alt`	string	positional, optional
`caption`	string	named: `caption:…`
`ratio`	string	named: `ratio:…`	e.g. 16:9, 4:3, 1:1
`zoom`	flag	bare word: `zoom`	click opens a lightbox

Use your own component

Keep the name and schema, swap what is drawn. The prompt and the model’s output do not change.

import { ui } from "@gistui/react/ui";

const lib = ui.extend({ Image: MyImage });
<GistUI library={lib} stream={response.body} />;

<GistUI :source="answer" :components="{ Image: MyImage }" />

<GistUI source={answer} components={{ Image: MyImage }} />

<GistUI source={answer()} components={{ Image: MyImage }} />

import { ui } from "@gistui/vanilla/ui";

const lib = ui.extend({ Image: (ctx) => ({ el: myElement(ctx) }) });

See Custom components for the full contract. Style hook: [data-gistui="Image"].