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

> Documentation Index
> Fetch the complete documentation index at: https://gistui.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Solid

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

```sh
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

```tsx
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](/docs/reference/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](/docs/guides/security/) and [Tools and live data](/docs/guides/tools-and-data/).

## Your own components

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

```tsx
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`).

Source: https://gistui.com/docs/frameworks/solid/index.mdx