Solid | GistUI

Install @gistui/solid, render a streamed answer in Solid or SolidStart, and use your own Solid components.

@gistui/solid is for Solid, SolidStart and TanStack Start with Solid.

npm i @gistui/solid @gistui/styles @gistui/catalog

yarn add @gistui/solid @gistui/styles @gistui/catalog

pnpm add @gistui/solid @gistui/styles @gistui/catalog

bun add @gistui/solid @gistui/styles @gistui/catalog

Render an answer

import "@gistui/styles/styles.css";
import { GistUI } from "@gistui/solid";

<GistUI source={answer()} streaming={loading()} onAction={(a) => console.log(a)} />;

Pass stream={response.body} instead to let the component read a ReadableStream.

Props

source + streaming or stream, inline, theme, color, tokens, darkTokens, classNames, tools, mutations, allowedHosts, paused, initialState, lockUntil, openLinks, autofix (default true), components, library, and the callbacks onAction, onError, onStateChange, onProse, onAutofix, onToolCall.

They mean the same as in every renderer: see Renderer options.

Tools and safety

A program is untrusted: a model wrote it, possibly steered by content it read. It cannot run code.

Option	What it does
`tools`	Read-only functions (or an MCP-style client, `{ callTool }`). `@query` may call them as soon as the UI renders, so nothing here may change anything.
`mutations`	Functions that change something. They run only when a person presses a button.
`onToolCall`	Called before every tool call with `{ name, args, kind, nodeId }`. Return `false` to block it.
`allowedHosts`	Hosts that images, video and backgrounds may load from, for example `["cdn.example.com", "*.example.com"]`. Set it when the model sees private data.
`paused`	Stops timed data refreshes.

More in Security and Tools and live data.

Your own components

Any Solid component (Kobalte, solid-ui, your design system) can replace a built-in one.

import { GistChildren, type GistUIComponentProps } from "@gistui/solid";

function MyCard(p: GistUIComponentProps) {
  return <section class="my-card"><GistChildren /></section>; // p.props: what the model wrote
}

<GistUI source={answer()} components={{ Card: MyCard }} />;

For a form field, createGistField(props) joins the GistUI Form around it (field().name, error, locked, value, setValue).