---
url: /prefab/guide/getting-started.md
description: >-
  Install @maxhealth.tech/prefab and build your first MCP App UI in minutes.
  Covers npm setup, display() helpers, and browser rendering.
---

# Getting Started

## Installation

```bash
npm install @maxhealth.tech/prefab
# or
bun add @maxhealth.tech/prefab
```

## Base Theme CSS

Prefab ships a base CSS theme (`prefab.css`) that provides design tokens and structural styles for all components.

**Bundler (Vite / webpack):**

```ts
import '@maxhealth.tech/prefab/prefab.css'
```

**CDN:**

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@maxhealth.tech/prefab@latest/dist/prefab.css">
```

When using `toHTML()`, the base CSS is injected automatically. Pass `{ includeStyles: false }` to opt out.

The layering order is: `prefab.css` (base) → `stylesheets[]` (your overrides) → `theme` (runtime CSS variables).

### Token values are host-adaptive

Each token in `prefab.css` is a fallback chain rather than a literal:

```css
--background: var(--color-background-primary, var(--vscode-editor-background, #ffffff));
```

MCP Apps host variables win, then VS Code webview variables, then the static
default. That is what makes a viewer inherit the surrounding editor or client
theme without any configuration, so avoid replacing these with flat values
unless you genuinely want to override the host.

### Driving prefab from a shared brand

The token *names* are the [brandc](https://www.npmjs.com/package/brandc) contract,
the same vocabulary the other Max Network kits read. If you author a brand as
data, `toPrefabTheme()` emits exactly prefab's wire `theme` shape, so no adapter
is needed:

```ts
import { toPrefabTheme, dashboard } from 'brandc'
import { display, autoTable } from '@maxhealth.tech/prefab'

return display(autoTable(rows), { theme: toPrefabTheme(dashboard) })
```

prefab takes no runtime dependency on brandc (its `dependencies` are empty by
design, and the CDN renderer bundle must stay that way). brandc is a
devDependency used by `test/brand-contract.test.ts`, which fails if prefab ever
introduces a token outside the shared contract or if a brand stops covering a
token prefab reads.

## Usage Modes

prefab has four usage modes:

| Mode | Where | Import |
|------|-------|--------|
| **Server-side** | MCP tool handlers (Python/TS) | `@maxhealth.tech/prefab` |
| **Client-side** | Browser (MCP Apps iframe) | `dist/renderer.min.js` script tag |
| **Hybrid** | Node/Bun backend → HTML response | `PrefabApp.toHTML()` |
| **Remote** | Any MCP client (VS Code, Claude, etc.) | See [Remote section](#remote-use-the-hosted-mcp-server) |

::: tip See it in action
The [interactive demo](/demo/) shows how an LLM prompt becomes a fully rendered UI — dashboards, forms, charts, and more — powered by the client-side renderer.
:::

***

## Server-Side: Build UIs in MCP Tool Handlers

Build a component tree, wrap it with `display()`, and return it as an MCP tool result.

```ts
import {
  display, Column, H1, Text, DataTable, col, Badge, autoTable,
} from '@maxhealth.tech/prefab'

// Simple: auto-generate a table from data
async function listUsers() {
  const users = await db.query('SELECT * FROM users')
  return display(autoTable(users), { title: 'Users' })
}

// Advanced: hand-craft the layout
async function userDashboard() {
  const users = await db.query('SELECT * FROM users')

  return display(
    Column({
      gap: 8,
      children: [
        H1('User Dashboard'),
        Text('Manage your organization members.'),
        DataTable({
          rows: users,
          columns: [
            col('name', 'Name'),
            col('email', 'Email'),
            col('role', 'Role'),
            col('status', 'Status'),
          ],
          search: true,
        }),
      ],
    }),
    { title: 'User Dashboard' },
  )
}
```

The `display()` function serializes the tree to `$prefab` wire JSON and wraps it in an MCP tool result content array. Any MCP client that understands prefab can render it.

## Client-Side: Browser ext-app

Load the renderer bundle and use the `app()` factory. See the [live demo](/demo/) for a complete working example.

```html
<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@maxhealth.tech/prefab@latest/dist/prefab.css">
</head>
<body>
  <div id="root"></div>
  <script src="https://cdn.jsdelivr.net/npm/@maxhealth.tech/prefab@latest/dist/renderer.min.js"></script>
  <script>
    (async () => {
      const ui = await prefab.app();

      ui.onToolInput((args) => {
        ui.render('#root',
          { type: 'Column', children: [
            { type: 'H1', content: 'Results' },
            { type: 'Text', content: `Found ${args.count} items` },
          ]},
        );
      });
    })();
  </script>
</body>
</html>
```

::: tip Use versioned CDN URLs
Always pin a version (e.g. `@0.3`) in production to prevent breaking changes.
:::

The `app()` factory:

1. Detects whether the page is in an iframe (bridge mode) or standalone
2. Performs the PostMessage handshake with the host (if bridged)
3. Applies the host theme
4. Returns an API object with `callTool`, `render`, `onToolInput`, etc.

## Hybrid: Self-Contained HTML

Use `PrefabApp.toHTML()` to generate a complete HTML page from a server:

```ts
import { PrefabApp, Column, H1, Text } from '@maxhealth.tech/prefab'

const app = new PrefabApp({
  title: 'My Dashboard',
  view: Column({ gap: 4, children: [H1('Hello'), Text('World')] }),
})

const html = app.toHTML()
// Returns a self-contained HTML page with embedded JSON + renderer script
```

Options:

| Option | Default | Description |
|--------|---------|-------------|
| `cdnVersion` | Current package version | CDN version for script/CSS tags |
| `pretty` | `false` | Pretty-print the embedded JSON |
| `includeStyles` | `true` | Inject the `prefab.css` base theme |

## Remote: Use the Hosted MCP Server

The fastest way to use prefab — no installation needed. Point any MCP client at the hosted renderer server:

> **Important:** Claude Code / Claude Desktop require `/mcp` as the
> first path segment. VS Code accepts any path. Use the appropriate
> URL for your client.

**VS Code (`settings.json` or `.vscode/mcp.json`):**

```json
{
  "servers": {
    "prefab-renderer": {
      "type": "http",
      "url": "https://maxhealth.tech/prefab/mcp"
    }
  }
}
```

**Claude Desktop / Claude Code (`claude_desktop_config.json`):**

```json
{
  "mcpServers": {
    "prefab-renderer": {
      "type": "http",
      "url": "https://maxhealth.tech/mcp/prefab"
    }
  }
}
```

Once connected, the server exposes a `render_prefab_ui` tool that accepts `$prefab` wire-format JSON and returns rendered HTML. Your LLM can call it directly to produce rich UI from structured data.

::: tip See it in action
The [interactive demo](/demo/) shows exactly what the remote renderer produces — dashboards, forms, charts, and more.
:::

## Subpath Imports

```ts
import { ... } from '@maxhealth.tech/prefab'           // Everything
import { ... } from '@maxhealth.tech/prefab/actions'    // Actions only
import { ... } from '@maxhealth.tech/prefab/rx'         // Rx expressions
import { ... } from '@maxhealth.tech/prefab/charts'     // Chart components
import { ... } from '@maxhealth.tech/prefab/mcp'        // MCP display helpers
import { ... } from '@maxhealth.tech/prefab/renderer'   // Browser renderer
import '@maxhealth.tech/prefab/prefab.css'              // Base theme CSS
```

## Next Steps

* [Live Demo](/demo/) — see LLM prompts rendered as live UIs
* [Components](./components) — the component model, with the [full catalog](/reference/components) of all 115+ components
* [Actions](./actions) — client-side and MCP actions ([API](/reference/api/actions/))
* [Reactive Expressions](./rx) — dynamic values and [Signals & Collections](./rx#signals--collections) ([API](/reference/api/rx/))
* [Auto-Renderers](./auto-renderers) — generate UIs from raw data ([API](/reference/api/auto/))
* [Wire Format](/reference/wire-format) — the `$prefab` JSON spec

---

---
url: /prefab/guide/components.md
description: >-
  Guide to prefab's 115+ declarative UI components — layout, typography, forms,
  data tables, charts, media, and interactive elements.
---

# Components

A prefab UI is just data. You describe what you want as a tree of typed nodes, and the renderer turns that tree into a live interface. There is no JSX, no virtual DOM to reason about, and no framework to learn — only a vocabulary of component functions that you nest inside one another.

## The mental model

Each component is a function that returns a `Component` instance. Calling it builds one node in the tree; passing other components as its children grows the tree downward. When you are ready to ship, the whole structure serializes to plain `$prefab` wire JSON, which any prefab-aware client can render.

Most components share a friendly shape: an optional **props** object first, then an array of **children**.

```ts
Column({
  gap: 6,
  children: [
    H1('Patients'),
    Text('Everyone under your care, at a glance.'),
  ],
})
```

Containers like `Column` and `Row` hold other nodes; leaf nodes like `Text` and `Badge` carry content. Containers take a single props object, with the child nodes under `children`. Leaf nodes take their content positionally, which is why `H1('Patients')` and `Text('…')` read the way they do.

## How components compose

Composition is the whole game. You build small, meaningful pieces and slot them into larger layouts, the same way you would nest boxes inside boxes. A card lives inside a column, a table lives inside a card, a badge lives inside a table cell. Because every node is data, you can also build trees programmatically — map over rows, conditionally include a section, or factor a repeated fragment into a helper function.

Props that drive behavior (an `onClick` action, a reactive `cssClass`, a `from` collection) make these static trees come alive without changing the composition model.

## The categories

prefab groups its 115+ components into a handful of families. Reach for the family that matches your intent:

* **Layout** — structural containers that control direction, spacing, and grids (`Column`, `Row`, `Grid`, `MasterDetail`).
* **Typography** — headings, paragraphs, labels, and inline text styles.
* **Card & Alert** — grouped content surfaces and status callouts.
* **Forms** — inputs, selects, checkboxes, date pickers, and field wrappers.
* **Data display** — tables, badges, metrics, and progress indicators.
* **Charts** — bar, line, area, pie, radar, scatter, and more, rendered natively as SVG.
* **Media** — images, audio, video, embeds, and file drop zones.
* **Interactive** — tabs, accordions, dialogs, popovers, and carousels.
* **Control flow** — `If`/`Else`, `ForEach`, and reusable `Define`/`Use` templates that shape the tree at render time.

Pick a container, fill it with the leaves and nested containers you need, and let the renderer handle the rest.

→ See the [Components reference](/reference/components) for the full catalog: every component, its props, and examples.

---

---
url: /prefab/guide/actions.md
description: >-
  How to attach actions to components — CallTool, SetState, ShowToast, Navigate,
  and other serializable event handlers for MCP Apps.
---

# Actions

Actions are how a prefab UI does something. They are small, serializable commands you attach to a component event — `onClick`, `onChange`, `onSubmit`, or the app-level `onMount`. Because they are plain data (not closures), they travel across the wire and run wherever the renderer lives, which is what makes interactivity possible in an MCP App.

## Two execution models

Every action falls into one of two camps:

* **Client-side** actions resolve entirely in the renderer with no server roundtrip. Setting state, toggling a flag, showing a toast, opening a link, or picking a file all happen instantly in the browser.
* **MCP transport** actions take a roundtrip through the host — calling a tool, sending a chat message, or updating shared context. These are how your UI reaches back into the server that produced it.

Reaching for the right camp is usually obvious: if the work is purely visual or local, keep it client-side; if it needs the model or your backend, call a tool.

## Chaining with onSuccess and onError

Most actions accept `onSuccess` and `onError` options, each taking a single action or an array of them. This lets you compose flows declaratively — save a record, then flip a flag and show a success toast, and surface an error toast if it fails — without writing any imperative glue.

```ts
Button('Save & Notify', {
  onClick: new CallTool('save_item', {
    arguments: { name: STATE.name },
    onSuccess: [new SetState('saved', true), new ShowToast('Saved!', { variant: 'success' })],
    onError: new ShowToast('Save failed', { variant: 'error' }),
  }),
})
```

## Lifecycle: running on mount

Actions are not limited to user gestures. Pass `onMount` to `display()` to run an action the moment the UI first renders — perfect for loading initial data or opening a real-time subscription so the view arrives already populated.

## When to use the builder sugar

For the state-mutating actions (`set`, `toggle`, `append`, `pop`), prefab ships ergonomic wrappers that accept a `Signal` or `Collection` instead of a raw string key. Prefer them whenever you already model your state with signals: you keep type safety, avoid stringly-typed keys, and produce the exact same wire-format actions. Drop down to the raw action classes when you need a one-off or are working without a signal.

→ See the [Actions API reference](/reference/api/actions/) for every action class, its constructor options, and serialized shape.

---

---
url: /prefab/guide/rx.md
description: >-
  Reactive template expressions, pipes, signals, and collections — prefab's
  client-side state system with auto-updating UI bindings.
---

# Reactive Expressions (`rx`)

A reactive expression is just a string wrapped in `{{ }}` that the renderer keeps alive. Instead of baking a value into your UI once, you hand the renderer a tiny formula. Whenever the underlying state changes, the renderer re-runs the formula and patches only the affected parts of the screen.

```
Hello, {{ user.name }}!     →     Hello, Ada!
```

Change `user.name` in state and the greeting updates on its own. No re-render call, no event wiring — that is the whole idea.

## The mental model

Think of four moving pieces that flow in one direction:

1. **State store** — a plain key/value bag that lives in the browser (`count`, `user`, `patients`, …).
2. **Expressions** — `{{ }}` formulas that read from that store and from loop or event scope.
3. **Pipes** — `| filters` that format a value for display (`{{ price | currency:'EUR' }}`).
4. **Auto-update** — when state changes, every expression that touched the changed key re-evaluates and the DOM follows.

You rarely write the raw strings by hand. The `rx()` builder gives you a typed, chainable way to compose them, so a typo becomes a compile error instead of a blank screen:

```ts
import { rx, STATE } from '@maxhealth.tech/prefab'

rx('count').add(1)          // → "{{ count + 1 }}"
rx('name').upper()          // → "{{ name | upper }}"
rx('active').then('On', 'Off')
```

Expressions can also reference scope that only exists in certain places — the current `item` and `index` inside a `ForEach` loop, the `event` payload on a form, or the `result` and `error` of a tool call. Each has a matching builder (`ITEM`, `INDEX`, `EVENT`, `RESULT`, `ERROR`).

## Signals & Collections

Raw state keys work, but they are untyped and easy to misspell. **Signals** and **collections** are a thin typed layer on top of the same state store, giving your reactive data a name, a shape, and a home.

* A **signal** is a single reactive scalar — a string, number, boolean, or null. Think "the currently selected id" or "is the panel open".
* A **collection** is a keyed array of rows, with helpers to look a row up by a signal's value.

The nice part: declaring them is enough. Their initial values are auto-collected into `PrefabApp` state, so you never hand-assemble a `state: { ... }` object.

```ts
import { signal, collection } from '@maxhealth.tech/prefab'

const patients = collection('patients', data, { key: 'id' })
const selectedId = signal('selectedPatientId', patients.firstKey())

// patients.by(selectedId) → "{{ patients | find:'id',selectedPatientId }}"
// Reads the selected row, reactively. Bind it straight into a component.
```

Because everything compiles down to `{{ }}` expressions, a signal change ripples through every binding that depends on it — exactly like a hand-written expression, just type-safe.

→ See the [Rx API reference](/reference/api/rx/) for the full API: `rx`, `signal`, `collection`, every scope variable, and the pipe registry.

---

---
url: /prefab/guide/auto-renderers.md
description: >-
  Auto-generate tables, charts, forms, metrics, and timelines from raw data with
  autoTable, autoChart, autoForm, and autoMetrics.
---

# Auto-Renderers

Most of the time you already have the data — a list of users from a query, a few KPIs, a row of monthly sales. What you *don't* want to do is hand-wire a table, pick column definitions, choose a chart type, and style badges every single time. Auto-renderers close that gap: hand them raw data, get a finished UI back in one call.

## The Mental Model

Think of an auto-renderer as a single function with a simple shape: **data in → component tree out.**

```ts
const users = await db.query('SELECT * FROM users')
return display(autoTable(users), { title: 'Users' })
```

That `autoTable(users)` call inspects your data, infers the columns from the object keys, detects which fields are statuses (and renders them as badges), and returns a normal `Component`. Because the output is just a regular component, it slots into any layout — wrap it in a `Column`, drop it next to a chart, or hand it to `display()`. There is no special runtime and no escape hatch to learn.

The family follows one consistent convention: the **first argument is your data**, and an **optional second argument is an options object** (title, layout hints, behaviour flags). `autoForm` is the small exception — it takes a submit-tool name in the middle so a generated form knows which MCP tool to call.

A useful way to picture the whole family is by the shape of input each one expects. Roughly:

* a **single object** describes one thing → a detail view,
* a **list of records** describes many of the same thing → a table, chart, or comparison,
* a **sequence in time** describes a journey → a timeline or progress tracker,
* a **set of fields** describes an intent to capture → a form.

Once you internalise that mapping, choosing the right helper rarely needs the reference at all — you reach for the one whose input shape matches the data already in your hand.

## When to Reach for Them

Auto-renderers shine when the *structure* of your UI mirrors the *structure* of your data:

* An array of records → a searchable, sortable table.
* A handful of numbers → a row of metric cards.
* Date-stamped events → a vertical timeline.
* A list of fields → a working form wired to a tool.

They are perfect for MCP tool handlers, where you frequently turn an API response straight into something renderable with minimal ceremony.

## From a Schema, Not From a Field List

`autoForm` takes a list of fields, and writing that list is usually restating something the server already knows. An MCP tool declares an `inputSchema`. A REST route declares a request body. Both are JSON Schema, and `fieldsFromJsonSchema()` turns one into the field list:

```ts
const fields = fieldsFromJsonSchema({
  type: 'object',
  required: ['email'],
  properties: {
    email: { type: 'string', format: 'email', title: 'Email' },
    plan: { type: 'string', enum: ['pro', 'team'] },
    seats: { type: 'integer', minimum: 1, maximum: 50 },
  },
})

return display(autoForm(fields, 'create_account', { title: 'New account' }))
```

The form now asks for exactly what the tool accepts, because it is derived from the same declaration the tool validates against. Formats become the right control — `email`, `uri`, `date-time`, `password` — an enum becomes a Select, an array of enums becomes a multi-select, and `minimum` / `maxLength` carry over as bounds.

It only emits what a flat form can honestly ask for. A nested object, an array of objects, or a property marked `readOnly` is skipped rather than rendered as a control that cannot round-trip. Pass `include` to fix the order, or `exclude` to drop keys the caller already knows.

This is the inverse of `formSchema()`, which derives an elicitation schema from a field list for hosts with no UI. Together they mean one declaration serves both paths: the schema draws the form, and the form's fields describe the schema.

## When to Hand-Craft Instead

Reach for the underlying components directly when you need precise control — bespoke column renderers, custom interactions, conditional layouts, or a design that doesn't map cleanly onto your raw data shape. Auto-renderers are a fast on-ramp, not a ceiling: you can start with `autoTable`, then graduate to a hand-built `DataTable` the moment you need something the auto path can't express. The two styles compose freely in the same view.

→ See the [Auto-Renderers API reference](/reference/api/auto/) for the full API: every helper, its options, and examples.

---

---
url: /prefab/guide/mcp-display.md
description: >-
  display(), displayForm(), rendererHtml(), and registerViewerResource() —
  server-side helpers to return prefab UIs from MCP tools.
---

# MCP Display Helpers

When an MCP tool runs, it hands back a result. The display helpers let that
result be a living UI instead of a wall of text. You build a component tree on
the server, hand it to a helper, and the helper packages it into the exact
shape an MCP host expects to render.

## The mental model

Think of every tool handler as three small steps:

1. **Build** — compose your screen from prefab components (a `Column`, a table,
   a form, a chart).
2. **Wrap** — pass that tree to a display helper. The helper serializes it to
   the `$prefab` wire format and folds it into an MCP tool-result envelope.
3. **Return** — hand the envelope straight back from your handler. Any host that
   speaks prefab paints it.

```ts
import { display, Column, H1, autoTable } from '@maxhealth.tech/prefab'

async function listPatients() {
  const patients = await db.query('SELECT * FROM patients')
  return display(Column({ children: [H1('Patients'), autoTable(patients)] }), { title: 'Patients' })
}
```

You never touch the envelope by hand. The helper knows where the JSON goes,
which fields the host reads, and how to keep older and newer hosts happy.

## Full display vs. incremental update

There are two ways to send something back, and picking the right one keeps your
UIs snappy.

Reach for a **full display** when the screen changes shape — a new list, a
detail page, a form, an error or success card. The host swaps in the whole tree
and renders it fresh.

Reach for an **incremental update** when the screen is already on the user's
screen and you only need to nudge some values inside it — a counter ticking up,
a status flipping to "done", a freshly fetched total. Instead of re-sending the
entire view, you send just the changed state, and the renderer merges it into
the live store without rebuilding anything.

That split is the whole game: send a full view when the layout changes, send a
patch when only the data does.

## Chaining tools

Because each handler returns a self-contained UI, tools compose naturally. A
list view can carry a button whose click calls a detail tool; the detail view
can carry one that opens an edit form; submitting the form calls a save tool.
Each step is just another handler returning its own `display(...)`, so rich,
multi-screen flows fall out of simple pieces.

→ See the [MCP API reference](/reference/api/mcp/) for the full API: every helper, its options, and the tool-result shape.

---

---
url: /prefab/guide/input-required.md
description: >-
  Ask the user for input under MCP 2026-07-28 — display_form with elicit,
  formInputRequest, and reading the answer with acceptedFormInput.
---

# Asking for input

Protocol revision 2026-07-28 made the MCP core stateless and removed
server-initiated `elicitation/create` pushes. A handler now asks for input by
**returning** an `input_required` result: the client collects the answers and
retries the original call, and the handler runs again with the answers in hand.

That matters to `display_form()`. A prefab form is a UI, and a UI only exists on
a host that renders one. On a host with no MCP Apps surface the form was
unreachable. The same `AutoFormField[]` now also derives the restricted
elicitation schema, so one field list serves both paths.

## The two paths

```ts
const fields = [
  { name: 'email', label: 'Email', type: 'email', required: true },
  { name: 'plan', label: 'Plan', options: [{ value: 'pro', label: 'Pro' }, { value: 'team' }] },
]

// A host that renders UI: a prefab form calling the `signup` tool on submit.
display_form(fields, 'signup', { title: 'Create your account' })

// Any host: an input_required result the client fills in natively.
display_form(fields, 'signup', { title: 'Create your account', elicit: true })
```

Both ask for exactly the same thing, because both are derived from `fields`.

## The write-once handler

Write one handler that runs on every round: read the answers first, request only
what is still missing, and return the real result once everything has arrived.

```ts
const FIELDS = [
  { name: 'email', label: 'Email', type: 'email', required: true },
  { name: 'plan', label: 'Plan', options: [{ value: 'pro' }, { value: 'team' }] },
]

async function signup(_args: unknown, ctx: { inputResponses?: McpInputResponses }) {
  const answers = acceptedFormInput(ctx.inputResponses, 'signup', FIELDS)
  if (answers == null) {
    return formInputRequest(FIELDS, { key: 'signup', message: 'Create your account' })
  }
  return display(autoDetail(await createAccount(answers)))
}
```

Round one finds no answers and returns the request. The client shows its form
and retries. Round two finds the answers and the handler finishes.

## Reading the answer

`inputResponses` comes from the client, so treat it as untrusted.
`acceptedFormInput` checks it against the same field list that produced the
schema: unknown keys are dropped, values of the wrong type or outside the
advertised bounds are dropped, an enum value that was never offered is dropped,
and a missing required field fails the whole answer.

```ts
const answers = acceptedFormInput(responses, 'signup', FIELDS)
```

It returns `undefined` for a missing, declined, or cancelled answer alike.
Re-requesting is the right move for all three only when the request is
idempotent. When a refusal has to be told apart from a first pass, read the
response directly:

```ts
const view = inputResponse(responses, 'signup')
if (view?.action === 'decline') {
  // The user said no. Asking again is not the answer.
}
```

## The schema

`formSchema(fields)` produces the restricted JSON Schema on its own, which is
useful when the elicitation is issued through the SDK rather than through
prefab:

```ts
const schema = formSchema([
  { name: 'email', type: 'email', required: true },
  { name: 'age', type: 'number', min: 18, max: 120 },
  { name: 'tags', options: [{ value: 'a' }, { value: 'b' }], multiple: true },
])
```

The wire accepts a flat object of primitives and nothing else, so the mapping is
deliberately narrow:

| Field | Schema |
|---|---|
| `type: 'email' \| 'url' \| 'date' \| 'datetime'` | `string` with the matching `format` |
| `type: 'number' \| 'integer' \| 'range'` | `number` / `integer`, `min`/`max` as bounds |
| `type: 'checkbox' \| 'boolean'` | `boolean` |
| `options` | `string` with `enum` |
| `options` + `multiple` | `array` of `string` with `enum` items |
| anything else | `string`, `min`/`max` as length bounds |

`required: true` puts the field in the schema's `required` list. `label` becomes
the `title`, `description` becomes the `description`, and `default` is carried
across when its type matches.

A `password` field produces a plain string. The restricted schema has no
secret-input format, and claiming one would misrepresent how the client is going
to render it.

## Nesting and richer shapes

The restricted subset has no nested objects and no arrays beyond multi-select
enums. A flow that genuinely needs a richer shape belongs on the UI path, where
prefab renders the whole form and submits it through `CallTool`, or in several
rounds carrying `requestState` between them:

```ts
formInputRequest(FIELDS, { key: 'signup', requestState: signedToken })
```

`requestState` round-trips through the client and comes back as
attacker-controlled input. Sign it — the MCP TypeScript SDK's
`createRequestStateCodec` gives you an HMAC `{ mint, verify }` pair — and mint
only what earlier rounds already proved.

---

---
url: /prefab/guide/a2ui.md
description: >-
  Emit A2UI from a prefab component tree — toA2UI(), the a2ui:// resource
  helper, the Basic-catalog mapping table, and what degrades on the way across.
---

# A2UI

[A2UI](https://a2ui.org) is the declarative agent-to-UI protocol: an agent sends
JSON describing a component tree plus a data model, and the renderer maps the
abstract component names onto its own widgets — React, Angular, Lit, Flutter,
Swift, Jetpack Compose.

prefab speaks it as a second output target. The same server-side component tree
that produces a `$prefab` payload also produces A2UI messages, so one authoring
API reaches both:

| | `$prefab` | A2UI |
|---|---|---|
| Rendered by | prefab's own renderer | the host's A2UI renderer |
| Delivery | MCP Apps `ui://` HTML resource, or any web page | `a2ui://` resource or an embedded resource in a tool result |
| Surface | sandboxed iframe | native widgets, no iframe |
| Catalog | 115+ components | the 18-component Basic catalog |

## Emitting

```ts
const app = new PrefabApp({
  view: Column({ children: [H1('Users'), autoTable(rows)] }),
})

const { messages, diagnostics } = app.toA2UI()
```

`messages` is a list of A2UI protocol messages. By default everything is inlined
into a single `createSurface`, which is what a stored payload wants. Pass
`{ stream: true }` to split it into `createSurface` + `updateComponents` +
`updateDataModel` so a streaming transport can paint early.

`diagnostics` is the part worth reading. prefab has 115+ components and the
Basic catalog has 18, so some of the tree changes shape on the way across, and
every change is reported:

```ts
for (const d of app.toA2UI().diagnostics) {
  console.warn(`${d.kind}: ${d.subject} — ${d.detail}`)
}
```

| Kind | Meaning |
|---|---|
| `degraded` | Rendered as something simpler. An `Alert` became a `Card`, a `Metric` became a `Column` of `Text`. |
| `unsupported` | Dropped. Charts, diagrams and file uploads have no Basic-catalog reading. |
| `expression` | A `{{ }}` template was richer than a JSON Pointer, so the binding could not be made. |
| `action` | An action had no direct equivalent and was reported to the agent as an event instead. |

## Serving it over MCP

Return a surface from a tool with `display_a2ui`. The payload travels as an
embedded resource under the `application/a2ui+json` MIME type, which is how a
host knows to route it to its A2UI renderer:

```ts
server.registerTool('list-users', schema, async () =>
  display_a2ui(autoTable(await db.users())))
```

For a surface that does not depend on the conversation, register it as a
resource instead — the host reads it once and caches it:

```ts
registerA2uiResource(server, () => Column({ children: [
  H1('Settings'),
  Input({ name: 'apiKey', label: 'API key' }),
] }), { uri: 'a2ui://myserver/settings' })
```

The builder runs on every read, so a surface closing over live data refreshes
without re-registering. Caching is off by default for that reason; pass
`cache: { ttlMs, cacheScope }` when the surface really is static.

Both live alongside the MCP Apps path in [MCP Apps](/reference/mcp-apps) — a
server can offer `ui://` and `a2ui://` from the same tool and let the host pick.

## In the browser

The emitter also ships as a standalone IIFE bundle, apart from
`renderer.min.js`. Almost no page that renders `$prefab` also emits A2UI, so
folding the two together would tax every consumer for a feature they do not use:

```html
<script src="https://cdn.jsdelivr.net/npm/@maxhealth.tech/prefab/dist/a2ui.min.js"></script>
<script>
  const { messages, diagnostics } = PrefabA2UI.emit(wireJson)
  const payload = PrefabA2UI.envelope(messages)   // { messages: [...] }
</script>
```

`emit` takes parsed `$prefab` JSON rather than a component tree, so nothing in
the bundle needs the authoring API. That is what keeps it around a sixth the
size of the renderer.

The [playground](https://maxhealth.tech/prefab/playground/) runs this bundle:
switch the preview pane to **A2UI** to see any payload translated live, with the
diagnostics listed underneath.

## How the tree crosses over

Two structural differences drive everything:

**Flat, not nested.** A2UI components live in an adjacency list. Every component
carries an `id` and parents reference children by id. prefab's nested `children`
are flattened, ids are allocated deterministically in traversal order, and the
entry component is named `root` as the protocol requires. An `id` you set
yourself is honoured.

**Bound, not interpolated.** A2UI reads dynamic values through JSON Pointer
bindings. `{{ user.name }}` becomes `{ "path": "/user/name" }`, and prefab's
`state` becomes the surface data model.

Text that mixes literals with values goes through the `formatString` catalog
function, so `Score: {{ score }}` becomes
`{ call: 'formatString', args: { value: 'Score: ${/score}' } }` rather than being
lost. What has no equivalent is arithmetic, pipes and conditionals —
`{{ count + 1 }}`, `{{ price | currency:'USD' }}` — and those raise an
`expression` diagnostic. A string is interpolated only if *every* value in it
binds; one unbindable expression makes the whole string unbindable, because
interpolating half of it would change what the text says without saying so.

### Pipes

A2UI has no expression language, but its catalog has the formatting functions
that prefab's common pipes correspond to, so seven of the twenty-two map:

| prefab | A2UI |
|---|---|
| `currency` | `formatCurrency(value, currency)` |
| `number`, `round` | `formatNumber(value, decimals)` |
| `date`, `time`, `datetime` | `formatDate(value, format)` |
| `pluralize` | `pluralize(value, one, other)` |

`{{ price | currency:'EUR' }}` becomes
`{ call: 'formatCurrency', args: { value: { path: '/price' }, currency: 'EUR' } }`.

The date pipes are the one inexact mapping. prefab renders through the reader's
locale; A2UI's `formatDate` requires an explicit Unicode TR35 pattern, so one is
chosen and a `degraded` diagnostic says which. Losing the value entirely would be
the worse trade.

The other fifteen — `truncate`, `join`, `selectattr`, `percent`, `compact` and
friends — transform data rather than format it, and stay reported. So does a
chained pipe: no single catalog function is two pipes, and translating half of
one would change the value without saying so.

### Validation

Every A2UI input is `Checkable`, which is the same job prefab's `required` and
`inputType` do, so a form keeps its validation on the way across:

```json
{
  "component": "TextField",
  "label": "Email",
  "checks": [
    { "condition": { "call": "required", "args": { "value": { "path": "/email" } } } },
    { "condition": { "call": "email",    "args": { "value": { "path": "/email" } } } }
  ]
}
```

No `message` is emitted. The rule already says which check failed, and the
renderer is better placed to word and localize that than prefab is.

`numeric` is deliberately not emitted for a number field. The catalog requires it
to carry a `min` or a `max` — it is a range check rather than a type check — and
prefab's number inputs carry no range. `variant: 'number'` on the field already
says the value is numeric.

### Control flow

| prefab | A2UI |
|---|---|
| `ForEach` | the child template — one instance per item, `$item` resolving to a path relative to the current item and `$index` to the `@index` function |
| `Define` / `Use` / `Slot` | resolved at emit time by inlining the definition; a `Use`'s `overrides` are seeded into the data model and brought into scope by name |
| `If` / `Elif` / `Else` / `Condition` | **no equivalent** |

Conditionals are the one real capability gap between the two protocols. A2UI has
no declarative `if`: the renderer draws what the adjacency list says, and the
agent sends a fresh `updateComponents` when the shape should change. prefab runs
a reactive client that re-shapes itself without a round trip.

A one-item list template would *look* like a conditional and behave like one only
by accident, so the emitter reports the loss instead of faking it. A UI leaning
on `If` does not cross over intact, and no amount of emitter work changes that.

### Tables

`DataTable` and `autoTable` map onto A2UI's child template rather than being
flattened row by row: one `Row` template, one `Text` per column bound to the
column key, and a `Column` whose `children` is `{ path, componentId }`. The
renderer instantiates one copy per item in the data-model list, so the emitted
surface stays as small and as reactive as the prefab original.

A literal row array is seeded into the data model so the template has something
to iterate; a `{{ rows }}` expression binds straight to where the rows already
live.

### Mapping table

| prefab | A2UI Basic | Note |
|---|---|---|
| `Column`, `Row` | `Column`, `Row` | `align` and `justify` carried across |
| `Div`, `Container`, `Grid`, `Form`, `Page`, … | `Column` | containers with no A2UI meaning flatten |
| `Card`, `CardContent` | `Card` | several children get a `Column` wrapper |
| `H1`–`H6`, `Heading` | `Text` | Markdown `#` prefix |
| `Text`, `P`, `Lead`, `Large`, `Markdown` | `Text` | |
| `Muted`, `Small`, `Label`, `Badge` | `Text` | `variant: caption` |
| `Code`, `Kbd` | `Text` | backtick-wrapped |
| `BlockQuote` | `Text` | `>` prefix |
| `Input`, `Textarea` | `TextField` | `inputType` picks the variant; `required` becomes a check |
| `Checkbox`, `Switch` | `CheckBox` | |
| `Select`, `RadioGroup`, `Combobox` | `ChoicePicker` | options read from the children |
| `Slider` | `Slider` | `step` converted to division count |
| `DatePicker`, `TimePicker` | `DateTimeInput` | |
| `Button` | `Button` | label becomes a child `Text` |
| `Link` | `Button` | borderless, running the `openUrl` function |
| `Image`, `Video`, `Audio`, `Icon` | `Image`, `Video`, `AudioPlayer`, `Icon` | |
| `Tabs` / `Tab` | `Tabs` | |
| `Dialog` | `Modal` | |
| `Separator` | `Divider` | |
| `Alert` | `Card` | variant styling dropped |
| `Metric` | `Column` of `Text` | trend and delta dropped |
| `Table`, `DataTable` | `Column` of `Row`s | see above |
| `CardTitle`, `CardDescription`, `Tooltip` | `Text` | |
| `ForEach` | templated `Column` | see Control flow |
| `Define`, `Use`, `Slot` | inlined | see Control flow |
| `If`, `Elif`, `Else`, `Condition` | — | `unsupported` |
| charts, `Mermaid`, `Svg`, `DropZone`, `Progress` | — | `unsupported` |

A component the table does not name still emits: one with children flattens to a
`Column`, one with text renders as `Text`, and each raises a `degraded`
diagnostic. Nothing is dropped silently.

### Actions

| prefab action | A2UI |
|---|---|
| `CallTool` (either `toolCall` or `callTool` on the wire) | `{ event: { name: tool, context: arguments } }` |
| `SendMessage` | `{ event: { name: 'sendMessage', context: { message } } }` |
| `OpenLink` | `{ functionCall: { call: 'openUrl', args: { url } } }` |
| `SetState`, `ToggleState`, everything else | an agent event named after the action |

Argument values go through the same binding conversion as component props, so
`CallTool('search', { arguments: { q: '{{ query }}' } })` sends the bound value
rather than the raw template.

A2UI carries one action per control. Where prefab binds several, the first is
used and the rest raise an `action` diagnostic.

## Conformance

Emitted payloads are validated against the official A2UI v1.0 JSON Schemas,
vendored under `test/fixtures/a2ui/v1_0/`, plus the two structural rules the
schemas cannot express: every referenced child id must exist, and every
component must be reachable from `root`. `test/a2ui.test.ts` runs one view per
mapper family through that gate.

Refresh the vendored schemas when A2UI publishes a revision:

```bash
bun scripts/sync-a2ui-schemas.ts
```

---

---
url: /prefab/guide/renderer.md
description: >-
  Mount $prefab wire JSON into the browser with the vanilla DOM renderer. Zero
  dependencies, works in any iframe or web page.
---

# Browser Renderer

The browser renderer is how your `$prefab` UIs come alive in a real page. It is a single, self-contained script (`dist/renderer.min.js`) with **zero framework dependencies** — no React, no Vue, no build step. Drop it in with a `<script>` tag and it turns wire JSON into living DOM.

## The mental model

Think of the renderer as a small machine with one job: **wire JSON in, live DOM out.**

```
$prefab wire JSON  ──▶  renderer  ──▶  real DOM nodes
```

Your server (or your LLM) describes *what* the UI should look like as plain JSON — a tree of typed nodes like `Column`, `H1`, `DataTable`. The renderer reads that tree and builds the matching HTML elements, wires up event handlers, and applies your theme. You never touch the DOM yourself.

The interesting part is what happens *after* the first paint. The renderer keeps a small **reactive store** alongside the DOM. When a button fires an action, or a tool call returns fresh data, the store updates and every `{{ ... }}` expression that depends on it re-evaluates automatically. The page reacts; you don't re-render by hand.

## How it fits in a page

There are two ways to get a UI on screen, and which you reach for depends on whether the JSON is ready at load time.

**Auto-mount** is the zero-code path. Stash your wire data on `window.__PREFAB_DATA__` before the script runs, and the renderer finds your `#root` (or the body) and mounts itself on `DOMContentLoaded`. Perfect for server-rendered pages that already know what to show.

```html
<script>window.__PREFAB_DATA__ = { "$prefab": { "version": "0.3" }, "view": { "type": "H1", "content": "Hello!" } };</script>
<script src="renderer.min.js"></script>
```

**Manual mount** is for when the data arrives later — from a fetch, a tool call, or user interaction. Call `PrefabRenderer.mount(element, data, options)` yourself and you get back a **render handle** you can hold onto: feed it new data with `update()`, force a redraw with `rerender()`, reach into the reactive `store`, or tear everything down with `destroy()`.

::: tip Always ship prefab.css
The renderer paints structure, but `prefab.css` carries the design tokens and base styles. Load it alongside the script or your components come out unstyled.
:::

## Going further

The renderer is extensible without forking it. You can teach it new node types with `registerComponent`, add new `{{ }}` filters with `registerPipe`, and inject scoped stylesheets straight from the wire format — all covered in the reference.

→ See the [Renderer API reference](/reference/api/renderer/) for the full API: every method, option, and the render handle.

---

---
url: /prefab/guide/bridge.md
description: >-
  PostMessage bridge connecting prefab iframes to MCP Apps hosts (VS Code,
  Claude, ChatGPT) via prefab:* and ui/* JSON-RPC protocols.
---

# PostMessage Bridge

When a prefab app renders inside an MCP Apps host like VS Code, Claude, or ChatGPT, it lives in a sandboxed iframe. The bridge is what lets that iframe and its host hold a conversation — passing tool input in, sending tool calls and chat messages out, and reacting to theme or context changes — all over the browser's `postMessage` channel.

## Two protocols, one bridge

The bridge speaks two message dialects at once, so the same app works across hosts that disagree on conventions:

* **`prefab:*`** — the custom, prefab-native protocol (for example `prefab:tool-input`, `prefab:tool-call`).
* **`ui/*`** — the JSON-RPC dialect from the [MCP Apps spec](https://modelcontextprotocol.io), which standards-based hosts prefer.

You never choose between them. The bridge negotiates the right one during connection and translates underneath, so your code stays the same regardless of which host loaded it.

## Connection lifecycle

Every session opens with a short handshake. The app announces the capabilities it supports, the host replies with its own capabilities plus the active theme, and from there messages flow both ways for the life of the iframe. Tool input arrives, your app renders, tool calls go back out, and either side can tear the connection down cleanly when it's done. The host can also push updates mid-session — a theme switch or a fresh context payload (locale, access tokens, and the like) — which your handlers receive as they happen.

## High-level vs. low-level

Most apps only ever touch the high-level **`prefab.app()`** factory. It auto-detects whether you're in an iframe or running standalone, runs the handshake for you, applies the host theme, and hands back a ready-to-use `PrefabApp` object with friendly methods like `onToolInput`, `render`, and `callTool`.

```html
<script src="renderer.min.js"></script>
<script>
  (async () => {
    const ui = await prefab.app();

    ui.onToolInput((args) => {
      ui.render('#root', { type: 'H1', content: `Hello ${args.name}!` });
    });
  })();
</script>
```

If you need finer control — a custom transport, your own handshake timing, or raw message handling — reach for the low-level **`Bridge`** class instead. It exposes the wire directly: connect, initialize, subscribe to raw message types, and disconnect yourself. The factory is built on top of it, so you lose convenience but gain control.

## A note on origin security

By default the bridge accepts messages from any origin (`'*'`), which is fine for local development but unsafe in production. Always pass an explicit `hostOrigin` so the bridge only trusts messages from your real host. It validates incoming `event.origin`, correlates tool responses by id to prevent spoofing, and times out stalled tool calls — but the origin you set is the first line of defense.

→ See the [Renderer API reference](/reference/api/renderer/) for the full API: the `Bridge` class, the `PrefabApp` methods, and the `app()` factory.

---

---
url: /prefab/reference/components.md
description: >-
  Complete API reference for all 115+ prefab components — props, signatures, and
  wire format examples for layout, forms, data, media, and charts.
---

# Components Reference

All components are functions that return a `Component` instance. They serialize to JSON via `.toJSON()` and compose as children of container components.

***

## Layout

Structural containers that control spacing, direction, and grid placement.

### `Column(props?)`

Vertical flex container. The most common layout primitive.

```ts
Column({ gap: 6, children: [H1('Title'), Text('Body')] })
Column({ children: [Text('No gap')] })                          // shorthand
```

| Prop | Type | Description |
|------|------|-------------|
| `gap` | `number \| GapToken` | Spacing between children. Accepts a number or semantic token: `'none'`, `'xs'`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'2xl'` |
| `align` | `string` | Cross-axis alignment (`start`, `center`, `end`, `stretch`) |
| `justify` | `string` | Main-axis alignment |
| `cssClass` | `RxStr` | Extra CSS class — supports reactive expressions (e.g. `rx('active').then('bg-green', 'bg-red')`) |
| `onClick` | `Action \| Action[]` | Action(s) dispatched on click. Non-button elements get `role="button"` and keyboard support automatically |

**Gap tokens** map to numbers: `none`=0, `xs`=1, `sm`=2, `md`=3, `lg`=4, `xl`=6, `2xl`=8.

```ts
Column({ gap: 'md', children: [Text('Hello')] })  // same as gap: 3
Row({ gap: 'xl', children: [Button('A'), Button('B')] })
```

### `Row(props?)`

Horizontal flex container.

```ts
Row({ gap: 4, children: [Button('Cancel'), Button('Save')] })
```

Same props as `Column`.

### `Grid(props?)`

CSS Grid container.

```ts
Grid({ columns: 3, gap: 4, children: [
  GridItem({ colSpan: 2, children: [Card({ children: [Text('Wide')] })] }),
  GridItem({ children: [Card({ children: [Text('Narrow')] })] }),
] })
```

| Prop | Type | Description |
|------|------|-------------|
| `columns` | `number` | Number of columns |
| `gap` | `number \| GapToken` | Grid gap (number or semantic token) |

### `GridItem(props?)`

Child of `Grid`.

| Prop | Type | Description |
|------|------|-------------|
| `colSpan` | `number` | Column span |
| `rowSpan` | `number` | Row span |

### `Container(props?)`

Generic wrapper with max-width and padding.

### `Div(props?)` / `Span(props?)`

Generic block/inline wrappers.

### `Dashboard(props?)` / `DashboardItem(props?)`

Dashboard grid layout with named items.

### `Pages(props?)` / `Page(props?)`

Paginated view container.

### `Detail(props)`

Conditional detail pane. Shows `children` when `of` resolves, shows `empty` otherwise.

```ts
import { collection, signal, Detail, Heading, Text } from '@maxhealth.tech/prefab'

const patients = collection('patients', data, { key: 'id' })
const selectedId = signal('selectedPatientId', patients.firstKey())
const selected = patients.by(selectedId)

Detail({ of: selected, empty: Text('Select a patient'), children: [
  Heading(selected.dot('name')),
  Text(selected.dot('dob')),
] })
```

| Prop | Type | Description |
|------|------|-------------|
| `of` | `Ref \| RxStr` | Reactive reference expression |
| `empty` | `Component` | Shown when ref is null/undefined |

### `MasterDetail(props?)`

Two-pane layout (master list + detail). Expects two children.

```ts
MasterDetail({ masterWidth: '350px', gap: 4, children: [
  table,   // master panel
  detail,  // detail panel
] })
```

| Prop | Type | Description |
|------|------|-------------|
| `masterWidth` | `string` | Master pane width (default: `'33%'`) |
| `gap` | `number` | Gap between panes |

***

## Typography

Text rendering components.

### `Heading(content, props?)`

```ts
Heading('Welcome', { level: 2 })
```

| Prop | Type | Description |
|------|------|-------------|
| `content` | `string \| Rx` | Text content (supports reactive expressions) |
| `level` | `1-4` | Heading level |

### `H1(content)` / `H2(content)` / `H3(content)` / `H4(content)`

Shorthand heading constructors.

```ts
H1('Dashboard')  // same as Heading('Dashboard', { level: 1 })
```

### `Text(content, props?)`

```ts
Text('Hello world')
Text('Welcome, {{ userName }}!')
```

### `P(content)` / `Lead(content)` / `Large(content)` / `Small(content)` / `Muted(content)`

Semantic text variants.

### `BlockQuote(content)`

Block quotation.

### `Label(content, props?)`

Form label text.

### `Link(content, props?)`

```ts
Link('Visit site', { href: 'https://example.com', target: '_blank' })
```

| Prop | Type | Description |
|------|------|-------------|
| `href` | `string` | URL |
| `target` | `string` | Link target (`_blank`, `_self`, etc.) |

### `Code(content)` / `Kbd(content)`

Inline code / keyboard shortcut styling.

### `Markdown(content)`

Rendered Markdown content.

```ts
Markdown('## Hello\n\nThis is **bold** text.')
```

***

## Card

Card containers for grouped content.

### `Card(props?)`

```ts
Card({ children: [
  CardHeader({ children: [CardTitle('User'), CardDescription('Profile info')] }),
  CardContent({ children: [Text('Name: Alice')] }),
  CardFooter({ children: [Button('Edit')] }),
] })

// With variant:
Card({ variant: 'elevated', children: [CardContent({ children: [Text('Raised card')] })] })
```

| Prop | Type | Description |
|------|------|-------------|
| `variant` | `CardVariant` | `'default'` | `'outline'` | `'ghost'` | `'elevated'` | `'destructive'` |

### `CardHeader` / `CardTitle` / `CardDescription` / `CardContent` / `CardFooter`

Card sub-components. All accept children.

***

## Data Display

### `DataTable(props)`

Rich data table with search, column definitions, and optional row selection.

```ts
DataTable({
  rows: users,
  columns: [
    col('name', 'Name'),
    col('email', 'Email'),
    col('status', 'Status'),
  ],
  search: true,
})
```

| Prop | Type | Description |
|------|------|-------------|
| `rows` | `unknown[] \| RxStr` | Array of row objects (or reactive expression) |
| `columns` | `DataTableColumnDef[]` | Column definitions (use `col()`) |
| `search` | `boolean` | Enable search |
| `from` | `Collection` | Derive rows from a Collection (mutually exclusive with `rows`) |
| `selected` | `Signal` | Signal tracking selected row key (requires `from`) |

#### Row Selection with Signal/Collection

When `from` and `selected` are provided, DataTable auto-generates row click handling:

```ts
const patients = collection('patients', data, { key: 'id' })
const selectedId = signal('selectedPatientId', patients.firstKey())

DataTable({
  columns: [col('name'), col('dob')],
  from: patients,
  selected: selectedId,
})
// Wire: rows="{{ patients }}", rowKey="id", selected="{{ selectedPatientId }}",
//       onRowClick=[{ action: "setState", key: "selectedPatientId", value: "{{ $item.id }}" }]
```

### `col(key, header?, opts?)`

Column definition helper — short form or descriptor form.

```ts
// Short form
col('name', 'Full Name')
col('email', 'Email', { sortable: true })

// Descriptor form (object)
col({ key: 'amount', header: 'Amount', format: 'currency' })
col({ key: 'name', accessor: 'name | humanName', header: 'Patient' })
```

| Field | Type | Description |
|-------|------|-------------|
| `key` | `string` | Row object field name |
| `header` | `string` | Column header (defaults to `key`) |
| `sortable` | `boolean` | Enable column sorting |
| `format` | `string` | Pipe name for cell display (e.g. `'currency'`) |
| `accessor` | `string` | Pipe expression for complex access |

### `Badge(content, props?)`

```ts
Badge('Active', { variant: 'success' })
```

| Variant | Color |
|---------|-------|
| `default` | Neutral |
| `secondary` | Muted |
| `outline` | Border only |
| `success` | Green |
| `warning` | Yellow |
| `destructive` | Red |
| `info` | Blue |

### `Metric(props)`

```ts
Metric({ label: 'Revenue', value: '$125K', delta: '+12.5%' })
```

| Prop | Type | Description |
|------|------|-------------|
| `label` | `string` | Metric name |
| `value` | `string \| number` | Display value |
| `change` | `number` | Percentage change (positive = green, negative = red) |
| `prefix` | `string` | Value prefix (e.g. `$`) |
| `suffix` | `string` | Value suffix (e.g. `%`) |

### Other Data Components

| Component | Description |
|-----------|-------------|
| `Dot(props)` | Colored status dot |
| `Ring(props)` | Circular progress ring |
| `Progress(props)` | Linear progress bar |
| `Separator()` | Horizontal divider |
| `Loader()` | Loading spinner |
| `Icon(name, props?)` | Named icon |

***

## Table

Low-level HTML table primitives (for custom table layouts beyond `DataTable`).

```ts
Table({ striped: true, children: [
  TableHead({ children: [
    TableRow({ children: [TableHeader('Name'), TableHeader('Age')] }),
  ] }),
  TableBody({ children: [
    TableRow({ children: [TableCell({ children: [Text('Alice')] }), TableCell({ children: [Text('30')] })] }),
  ] }),
  TableCaption('User list'),
] })
```

### Components

`Table`, `TableHead`, `TableBody`, `TableFooter`, `TableRow`, `TableHeader`, `TableCell`, `TableCaption`, `ExpandableRow`

`TableCell` supports `colSpan` and `rowSpan` props.

***

## Form

### `Form(props?)`

```ts
Form({ onSubmit: new CallTool('create_user'), children: [
  Input({ name: 'email', inputType: 'email', required: true }),
  Button('Create', { submit: true }),
] })
```

| Prop | Type | Description |
|------|------|-------------|
| `onSubmit` | `Action` | Action to run when the form is submitted |

### `Input(props)`

```ts
Input({ name: 'email', inputType: 'email', label: 'Email', placeholder: 'you@example.com', required: true })
```

| Prop | Type | Description |
|------|------|-------------|
| `name` | `string` | State key (also used as form field name) |
| `type` | `string` | `text`, `email`, `number`, `password`, `url`, `tel`, `date`, `search`, `hidden` |
| `label` | `string` | Label text |
| `placeholder` | `string` | Placeholder text |
| `required` | `boolean` | Validation |
| `defaultValue` | `string` | Initial value |
| `onChange` | `Action` | Action on value change |

### `Textarea(props)`

Multi-line text input. Same props as `Input` plus `rows`.

### `Button(content, props?)`

```ts
Button('Save', { variant: 'default', onClick: new ShowToast('Saved!') })
```

| Prop | Type | Description |
|------|------|-------------|
| `variant` | `ButtonVariant` | `default`, `secondary`, `outline`, `ghost`, `destructive`, `link` |
| `size` | `ButtonSize` | `default`, `sm`, `lg`, `icon` |
| `onClick` | `Action` | Click action |
| `type` | `string` | `button` (default), `submit` |
| `disabled` | `boolean` | Disabled state |

### `ButtonGroup(children)`

Horizontal button row.

### `Select(props?)`

```ts
Select({ name: 'role', label: 'Role', required: true, children: [
  SelectOption('admin', 'Admin'),
  SelectOption('user', 'User'),
] })
```

| Prop | Type | Description |
|------|------|-------------|
| `name` | `string` | State key the choice is stored under |
| `label` | `string` | Visible field label |
| `value` | `string \| string[]` | Pre-selected choice, or choices when `multiple` |
| `placeholder` | `string` | Shown until a choice is made |
| `required` | `boolean` | Must be filled before submit |
| `multiple` | `boolean` | Accept several choices; submits an array under `name` |
| `onChange` | `Action` | Fired with the chosen value |

Sub-components: `SelectOption`, `SelectGroup`, `SelectLabel`, `SelectSeparator`

`required` is shared by every stateful control, so `RadioGroup`, `Combobox`,
`Textarea`, `Calendar` and `DatePicker` take it the same way.

### `Checkbox(props)` / `Switch(props)` / `Slider(props)`

Boolean and range inputs.

```ts
Checkbox({ name: 'agree', label: 'I agree to the terms' })
Switch({ name: 'notifications', label: 'Enable notifications' })
Slider({ name: 'volume', min: 0, max: 100, step: 1 })
```

### `Radio(props)` / `RadioGroup(props?)`

```ts
RadioGroup({ name: 'color', label: 'Favorite Color', children: [
  Radio({ value: 'red', label: 'Red' }),
  Radio({ value: 'blue', label: 'Blue' }),
  Radio({ value: 'green', label: 'Green' }),
] })
```

### `Combobox(props?)` / `ComboboxOption(props)`

Autocomplete select with search.

```ts
Combobox({ name: 'country', placeholder: 'Search countries...', searchable: true, children: [
  ComboboxOption('us', 'United States'),
  ComboboxOption('de', 'Germany'),
] })
```

Sub-components: `ComboboxGroup`, `ComboboxLabel`, `ComboboxSeparator`

### `Calendar(props)` / `DatePicker(props)`

Date selection.

```ts
Calendar({ name: 'date', minDate: '2024-01-01', maxDate: '2024-12-31' })
DatePicker({ name: 'dob', label: 'Date of Birth', placeholder: 'Pick a date' })
```

### `Field(props?)`

Structured form field wrapper.

```ts
Field({ children: [
  FieldTitle('Email'),
  FieldDescription('Your work email address'),
  FieldContent({ children: [Input({ name: 'email', inputType: 'email' })] }),
  FieldError('Invalid email format'),
] })
```

Sub-components: `FieldTitle`, `FieldDescription`, `FieldContent`, `FieldError`

### `ChoiceCard(props)`

Selectable card for option picking.

```ts
ChoiceCard({ value: 'pro', label: 'Pro Plan', description: '$29/mo', selected: true })
```

***

## Interactive

### `Tabs(props?)`

Tabbed interface with keyboard navigation (Arrow keys, Home/End).

```ts
Tabs({ defaultTab: 'overview', children: [
  Tab({ id: 'overview', title: 'Overview', children: [Text('Overview content')] }),
  Tab({ id: 'details', title: 'Details', children: [Text('Details content')] }),
] })
```

### `Accordion(props?)`

Collapsible sections.

```ts
Accordion({ children: [
  AccordionItem({ title: 'FAQ 1', children: [Text('Answer 1')] }),
  AccordionItem({ title: 'FAQ 2', children: [Text('Answer 2')] }),
] })
```

### `Dialog(props?)`

Modal dialog (ARIA `role="dialog"`).

```ts
Dialog({ title: 'Confirm', trigger: Button('Delete'), children: [
  Text('Are you sure?'),
  Button('Delete', { variant: 'destructive', onClick: new CallTool('delete_item') }),
] })
```

### `Popover(props?)` / `Tooltip(props?)` / `HoverCard(props?)`

Overlay components.

### `Carousel(props?)`

Image/content carousel with prev/next buttons.

***

## Charts

All charts accept a `data` prop (array of objects) and a `series` array.

### `BarChart(props)` / `LineChart(props)` / `AreaChart(props)` / `PieChart(props)`

```ts
BarChart({
  data: [{ month: 'Jan', revenue: 100 }, { month: 'Feb', revenue: 150 }],
  series: [{ dataKey: 'revenue', label: 'Revenue', color: '#3b82f6' }],
  xAxis: 'month',
  valueFormat: 'currency',
  height: 300,
})
```

| Prop | Type | Description |
|------|------|-------------|
| `data` | `object[]` | Data array |
| `series` | `ChartSeries[]` | Series definitions (see below) |
| `xAxis` | `string` | Data key for X axis labels |
| `xAxisFormat` | `string` | Pipe applied to X axis tick labels (e.g. `'date'`, `'truncate:10'`) |
| `tooltipXKey` | `string` | Data key for tooltip category label (defaults to `xAxis`) |
| `tooltipXFormat` | `string` | Pipe applied to tooltip category label (e.g. `'datetime'`, `'upper'`) |
| `height` | `number` | Chart height in px |
| `showTooltip` | `boolean` | Show tooltip on hover (default `true`) |
| `showGrid` | `boolean` | Show horizontal grid lines |
| `showYAxis` | `boolean` | Show Y axis labels (default `true`) |
| `valueFormat` | `string` | **Canonical** value-axis tick + tooltip format: `'currency'`, `'percent:1'`, `'compact'`, … (`'auto'` = none). Matches upstream prefab (PR #454). |
| `yAxisFormat` | `string` | Left-axis override for dual-axis charts (overrides `valueFormat`) |
| `showYAxisRight` | `boolean` | Show secondary Y axis on the right |
| `yAxisRightFormat` | `string` | Format for the right Y axis |
| `showLegend` | `boolean` | Show legend below chart |

`PieChart` takes `dataKey` (numeric value) + `nameKey` (slice label) instead of `series`/`xAxis` (the legacy series form is still accepted), plus `innerRadius`, `showLabel`, `paddingAngle`, and `valueFormat`.

#### `ChartSeries`

| Field | Type | Description |
|-------|------|-------------|
| `dataKey` | `string` | **Required.** Key in data objects for this series |
| `label` | `string` | Display label (defaults to `dataKey`) |
| `color` | `string` | Series color (auto-assigned if omitted) |
| `yAxisId` | `'left' \| 'right'` | Which Y axis this series binds to |
| `tooltipFormat` | `string` | Pipe for this series' value in the tooltip (overrides `yAxisFormat`) |

#### Formatting Example

Same timestamp field, different presentation on axis vs tooltip:

```ts
LineChart({
  data: timeseries,
  xAxis: 'timestamp',
  xAxisFormat: 'date',          // axis: "4/25/2026"
  tooltipXFormat: 'datetime',   // tooltip: "4/25/2026, 2:30:00 PM"
  series: [
    { dataKey: 'revenue', label: 'Revenue', tooltipFormat: 'currency' },
    { dataKey: 'growth', label: 'Growth', tooltipFormat: 'percent' },
  ],
})
```

All built-in pipes work: `upper`, `lower`, `truncate`, `currency`, `percent`, `compact`, `date`, `time`, `datetime`, `number`, `round`, plus custom wire pipes.

### `RadarChart(props)`

Spider/radar chart — one polygon per series across angular axes.

```ts
RadarChart({
  data: [{ subject: 'Math', alice: 120 }, { subject: 'English', alice: 98 }],
  series: [{ dataKey: 'alice', label: 'Alice' }],
  axisKey: 'subject',   // spoke labels (falls back to xAxis)
  filled: true,         // fill polygons (default true)
  showDots: false,      // vertices
})
```

### `ScatterChart(props)`

Scatter / bubble chart.

```ts
ScatterChart({
  data: [{ h: 170, w: 65, age: 25 }, { h: 180, w: 80, age: 30 }],
  series: [{ dataKey: 'people', label: 'People' }],
  xAxis: 'h',
  yAxis: 'w',
  zAxis: 'age',   // optional — sizes each point (bubble chart)
})
```

### `Sparkline(props)`

Inline mini chart.

```ts
Sparkline({ data: [10, 20, 15, 30, 25], variant: '#22c55e', height: 32 })
```

### `RadialChart(props)` / `Histogram(props)`

Radial bar chart (concentric value arcs) and histogram distribution chart.

```ts
RadialChart({
  data: [{ browser: 'Chrome', visitors: 275 }, { browser: 'Safari', visitors: 200 }],
  dataKey: 'visitors',   // value (legacy series form still accepted)
  nameKey: 'browser',    // label
  innerRadius: 30, startAngle: 180, endAngle: 0,
})
```

> All chart types now render natively as SVG in the built-in renderer.

***

## Media

### `Image(src, opts?)` / `Image(props)`

Positional form (consistent with Audio/Video/Embed) or props form:

```ts
Image('/photo.jpg', { alt: 'Profile photo' })   // positional (recommended)
Image({ src: '/photo.jpg', alt: 'Profile photo' })  // props form (also works)
```

### `Audio(props)` / `Video(props)` / `Embed(props)`

Media embeds.

### `Svg(props)`

Inline SVG content.

### `DropZone(props)`

File upload drop area. Accepts files by drag-and-drop or by click-to-browse, and is keyboard reachable.

```ts
DropZone({
  accept: 'image/*',
  multiple: true,
  resultKey: 'uploads',
  onDrop: new CallTool('upload_file'),
})
```

| Prop | Type | Description |
|------|------|-------------|
| `label` | `RxStr` | Prompt shown inside the area. Defaults to `Drop files here` |
| `accept` | `string` | Accepted types, as the HTML `accept` attribute (`image/*`, `.pdf`, `text/csv`). Enforced for dropped files too, which the browser does not do |
| `multiple` | `boolean` | Allow more than one file. When false, only the first accepted file is taken |
| `resultKey` | `string` | State key the chosen files are written to |
| `onDrop` | `Action \| Action[]` | Fired once files are chosen, with `$result` bound to the file list |

`resultKey` and `$result` match the `OpenFilePicker` action, so both paths to files behave the same.

### `Mermaid(content)`

Mermaid diagram (rendered by the browser if `mermaid` library is available).

```ts
Mermaid('graph TD; A-->B; B-->C;')
```

***

## Alert

### `Alert(props?)`

```ts
Alert({ variant: 'warning', children: [
  AlertTitle('Warning'),
  AlertDescription('This action cannot be undone.'),
] })

Alert({ variant: 'success', icon: 'CheckCircle', children: [
  AlertTitle('Saved'),
  AlertDescription('Changes applied successfully.'),
] })
```

| Variant | Color |
|---------|-------|
| `default` | Neutral |
| `success` | Green |
| `warning` | Yellow |
| `destructive` | Red |

| Prop | Type | Description |
|------|------|-------------|
| `variant` | `AlertVariant` | `'default'` | `'destructive'` | `'success'` | `'warning'` |
| `icon` | `string` | Icon name (e.g. `'CheckCircle'`, `'AlertTriangle'`) |

***

## Control Flow

### `ForEach(props?)`

Iterate over a reactive array.

```ts
ForEach({ expression: rx('items'), children: [
  Text(ITEM.dot('name')),
] })
```

| Prop | Type | Description |
|------|------|-------------|
| `each` | `Rx \| string` | Expression for the array to iterate |
| `as` | `string` | Variable name for each item (default: `item`) |

### `If(condition, children)` / `If(props)` / `Elif` / `Else`

Conditional rendering. Supports both shorthand and props form:

```ts
// Shorthand (recommended):
If('$loading', [Loader()])
Elif('$error', [Alert({ variant: 'destructive', children: [Text('$error')] })])
Else({ children: [Text('Content loaded!')] })

// Props form (also works):
If({ condition: '$loading', children: [Loader()] })
```

### `Define(props?)` / `Use(props)` / `Slot(props?)`

Component templates for reuse.

```ts
Define({ name: 'userCard', children: [
  Card({ children: [CardContent({ children: [
    Slot({ name: 'name' }),
    Slot({ name: 'role' }),
  ] })] }),
] })

// Later:
Use({ def: 'userCard', overrides: { name: 'Alice', role: 'Admin' } })
```

---

---
url: /prefab/reference/wire-format.md
description: >-
  $prefab v0.3 wire format specification — JSON structure, component nodes,
  state, actions, pipes, defs, and template slots.
---

# Wire Format Specification

The `$prefab` wire format is the JSON protocol that connects server-side component builders to client-side renderers. Both the TypeScript and Python libraries produce this format.

> **Note:** This TypeScript library is a superset of the Python `prefab-ui` (v0.20.x). Core components and the v0.3 protocol are identical. Chart formatting props (`xAxisFormat`, `tooltipXFormat`, `tooltipXKey`, per-series `tooltipFormat`, dual Y-axis) are TS-only extensions. The renderer handles both payloads seamlessly, and still accepts legacy `0.2` payloads.

## Envelope

Every prefab UI is wrapped in a top-level envelope:

```json
{
  "$prefab": { "version": "0.3" },
  "view": { ... },
  "state": { ... },
  "css": [ ... ],
  "stylesheets": [ ... ],
  "mode": "dark",
  "defs": { ... },
  "keyBindings": { ... },
  "onMount": { ... }
}
```

| Field | Type | Required | Description |
|-------|------|----------|-------------|
| `$prefab` | `{ version: string }` | **Yes** | Format identifier. Current version: `"0.3"` |
| `view` | `ComponentJSON` | **Yes** | Root component tree |
| `state` | `Record<string, unknown>` | No | Initial reactive state |
| `css` | `string[]` | No | Inline CSS blocks injected as `<style>` tags. The theme is compiled into this array (`:root` for light, `.dark, [data-theme="dark"]` for dark). |
| `stylesheets` | `string[]` | No | External CSS **URLs** loaded as `<link rel="stylesheet">` |
| `mode` | `"light" \| "dark"` | No | Force a color scheme regardless of OS preference |
| `defs` | `Record<string, ComponentJSON>` | No | Reusable component templates |
| `keyBindings` | `Record<string, ActionJSON>` | No | Keyboard shortcut → action |
| `onMount` | `ActionJSON \| ActionJSON[]` | No | Action(s) to run when the UI renders |

> **Protocol 0.3 (upstream PR #431).** The theme moved off the wire: instead of a structured `theme` object, `PrefabApp.toJSON()` compiles it into the `css` array and emits `mode`. `stylesheets` now means external URLs. The renderer still accepts `0.2` payloads (a structured `theme` object, and inline CSS in `stylesheets`) for backward compatibility.

## Component JSON

Every component serializes to a flat JSON object:

```json
{
  "type": "Button",
  "content": "Click me",
  "variant": "default",
  "size": "sm",
  "onClick": { "action": "setState", "key": "count", "value": "{{ state.count + 1 }}" },
  "children": []
}
```

| Field | Type | Description |
|-------|------|-------------|
| `type` | `string` | **Required.** Component type name (PascalCase) |
| `content` | `string` | Text content (supports `{{ }}` expressions) |
| `children` | `ComponentJSON[]` | Child components |
| `cssClass` | `string` | Extra CSS class |
| `*` | `unknown` | Any other props specific to the component type |

### Type Names

Component types use PascalCase and map 1:1 to the TypeScript/Python function names:

```
Column, Row, Grid, GridItem, Container, Div, Span, MasterDetail, Detail,
H1, H2, H3, H4, Text, Heading, Muted, Code, Markdown, Link, Kbd,
Card, CardHeader, CardTitle, CardContent, CardFooter,
DataTable, Badge, Metric, Progress, Separator, Loader, Icon,
Table, TableHead, TableBody, TableRow, TableHeader, TableCell,
Form, Input, Textarea, Button, Select, SelectOption, Checkbox, Switch, Slider,
Radio, RadioGroup, Combobox, ComboboxOption, Calendar, DatePicker,
Field, FieldTitle, FieldDescription, FieldContent, FieldError, ChoiceCard,
Tabs, Tab, Accordion, AccordionItem, Dialog, Popover, Tooltip, Carousel,
BarChart, LineChart, AreaChart, PieChart, Sparkline, RadialChart, Histogram,
Image, Audio, Video, Embed, Svg, DropZone, Mermaid,
Alert, AlertTitle, AlertDescription,
ForEach, If, Elif, Else, Define, Use, Slot
```

## Action JSON

Actions are serialized as objects with an `action` field:

```json
{ "action": "setState", "key": "count", "value": 42 }
```

```json
{ "action": "toolCall", "tool": "get_data", "arguments": { "id": "{{ state.selectedId }}" } }
```

```json
{ "action": "showToast", "message": "Saved!", "variant": "success" }
```

### Action Types

| `action` | Description | Key Fields |
|----------|-------------|------------|
| `setState` | Set state value | `key`, `value` |
| `toggleState` | Toggle boolean | `key` |
| `appendState` | Append to array | `key`, `value`, `index?` |
| `popState` | Remove from array | `key`, `index` |
| `showToast` | Toast notification | `message`, `variant?`, `duration?` |
| `closeOverlay` | Close dialog/popover | — |
| `openLink` | Navigate to URL | `url`, `target?` |
| `setInterval` | Periodic timer | `intervalMs`, `onTick` |
| `fetch` | HTTP request | `url`, `method?`, `resultKey?` |
| `openFilePicker` | File picker | `accept?`, `multiple?`, `resultKey?` |
| `callHandler` | Client handler | `handler`, `arguments?` |
| `toolCall` | MCP tool call | `tool`, `arguments?`, `resultKey?` |
| `sendMessage` | Chat message | `message` |
| `updateContext` | Host context update | `context` |
| `requestDisplayMode` | Display mode | `mode` |

All actions support optional `onSuccess` and `onError` callbacks (single action or array).

## Reactive Expressions

String values containing `{{ }}` are evaluated as reactive expressions:

```json
{ "type": "Text", "content": "{{ state.count }}" }
{ "type": "Text", "content": "Hello, {{ state.name | upper }}!" }
```

### Expression Grammar

```
expression   = ternary | logical
ternary      = logical "?" value ":" value
logical      = comparison (("&&" | "||") comparison)*
comparison   = additive (("===" | "!==" | ">" | ">=" | "<" | "<=") additive)?
additive     = multiplicative (("+" | "-") multiplicative)*
multiplicative = unary (("*" | "/" | "%") unary)*
unary        = "!" primary | primary
primary      = number | string | boolean | null | dotpath | "(" expression ")"
dotpath      = identifier ("." identifier)*
piped        = expression ("|" pipeName (":" pipeArg ("," pipeArg)*)? )*
```

### Key Pipes for Collections

| Pipe | Syntax | Description |
|------|--------|-------------|
| `find` | `collection \| find:'keyField',stateKeyRef` | Find a row where `row[keyField]` matches the value of `stateKeyRef` |
| `dot` | `object \| dot:'field'` | Extract a property from an object |

Example: `{{ patients | find:'id',selectedPatientId | dot:'name' }}`

These pipes enable the Signal/Collection/Ref data pattern on the wire format level.

### Scope Variables

| Variable | Available In | Description |
|----------|-------------|-------------|
| `state.*` | Everywhere | Reactive state store |
| `item` | `ForEach` body | Current iteration item |
| `index` | `ForEach` body | Current iteration index |
| `event` | `onChange`/`onSubmit` | Event data |
| `error` | `onError` callback | Error value |
| `result` | `onSuccess` callback | Action result |

## Theme (authoring input → compiled `css`)

You author a theme as a `{ light, dark }` map of CSS custom properties:

```ts
new PrefabApp({
  view,
  theme: {
    light: { primary: '#3b82f6', background: '#ffffff', foreground: '#0a0a0a' },
    dark:  { primary: '#60a5fa', background: '#0a0a0a', foreground: '#fafafa' },
  },
})
```

In protocol **0.3** this is **compiled into the wire `css` array** (it is *not* sent as a structured `theme` object). Light variables target `:root`; dark variables target `.dark, [data-theme="dark"]` plus a `prefers-color-scheme: dark` block:

```json
{
  "$prefab": { "version": "0.3" },
  "view": { ... },
  "css": [
    ":root {\n  --primary: #3b82f6;\n  --background: #ffffff;\n}\n.dark, [data-theme=\"dark\"] {\n  --primary: #60a5fa;\n}"
  ]
}
```

The renderer injects each `css` entry as a `<style>` tag. Color scheme is selected by the host's `prefers-color-scheme`, the `data-theme` attribute, or the `dark`/`light` class. Use the top-level `mode` field to force one. (Legacy `0.2` payloads carrying a structured `theme` object still render.)

## State Updates (Partial)

For incremental updates without re-rendering the full UI, use a state update wire:

```json
{
  "$prefab": { "version": "0.3" },
  "stateUpdate": {
    "count": 42,
    "status": "complete"
  }
}
```

This merges values into the existing state store and triggers re-evaluation of affected reactive expressions.

## Validation

Use `validateWireFormat()` to check a payload:

```ts
import { validateWireFormat } from '@maxhealth.tech/prefab'

const result = validateWireFormat(jsonPayload)
if (!result.valid) {
  console.error(result.errors)
  // [{ path: '$.view', message: 'Missing required "view" field' }]
}
```

---

---
url: /prefab/reference/mcp-apps.md
description: >-
  Complete guide to rendering prefab UIs inside MCP Apps hosts (VS Code, Claude
  Desktop, ChatGPT). Covers CSP, ui/* JSON-RPC protocol, and common pitfalls.
---

# Rendering Prefab UIs in MCP Apps Hosts

How to make an MCP server return interactive `$prefab` UIs that render
inside any MCP Apps host — VS Code Copilot Chat, Claude Desktop,
ChatGPT, and others.

This guide documents the **MCP Apps UI protocol** (`ui/*` JSON-RPC 2.0
over `postMessage`), the server-side wire format, and the host-specific
gotchas that cost us several hours of debugging.

> **TL;DR** The renderer auto-detects the host protocol. You only need
> an HTML page with a single `<script>` tag pointing at
> `renderer.auto.min.js`. The server must return `structuredContent`
> alongside `content[]`, and CSP (if the host requires it) should be
> declared on **both** the resource listing and the content item
> returned by `readResource`. Where both are present the content item
> wins, and a listing-only CSP breaks on hosts that read only the
> content item.

## Architecture overview

```
┌─────────────────────────┐  stdio   ┌──────────────────────────┐
│  MCP Apps host           │◄────────►│   your MCP server        │
│  (VS Code / Claude /    │  MCP     │   (Node, Python, etc.)   │
│   ChatGPT / …)          │          └──────────────────────────┘
└──────────┬──────────────┘
           │
           │  sandboxed iframe
           ▼
┌─────────────────────────┐  postMessage   ┌──────────────────┐
│  ui:// resource (HTML)  │◄──────────────►│  Host bridge     │
│  + renderer.auto.min.js │   JSON-RPC     │  (ui/* protocol) │
└─────────────────────────┘   ui/*         └──────────────────┘
```

The flow:

1. Tool's `_meta.ui.resourceUri` points the host at a `ui://` resource.
2. The host calls `readResource` and loads the HTML into a sandboxed
   iframe (webview in VS Code, iframe in Claude/ChatGPT).
3. The renderer JS performs a `ui/initialize` handshake with the host.
4. When the tool runs, the host sends the result to the iframe as a
   JSON-RPC `ui/notifications/tool-result` notification.
5. The renderer extracts `$prefab` wire data and mounts it into `#root`.

### Host-specific notes

| Host | Transport | CSP handling | Notes |
|------|-----------|-------------|-------|
| **VS Code** | `acquireVsCodeApi().postMessage()` | Reads `_meta.ui.csp` from content item | Injects CSP via `<meta>` tag + `acquireVsCodeApi()` shim |
| **Claude Desktop** | `window.parent.postMessage()` | Reads `_meta.ui.csp` from content item | Enforces CSP via HTTP headers; assigns stable origin (`{hash}.claudemcpcontent.com`). Sends tool result before `ui/initialize` response — buffering is critical |
| **ChatGPT** | `window.parent.postMessage()` | Reads `_meta.ui.csp` from content item | Enforces CSP via HTTP headers; assigns stable origin (`{slug}.oaiusercontent.com`) |

## Server-side wire format

### 1. Tools — point at the renderer resource

```ts
mcp.registerTool(
  'browse_patient',
  {
    title: 'Browse Patient',
    description: '...',
    inputSchema: { /* zod shape */ },
    _meta: { ui: { resourceUri: 'ui://your/viewer' } },
  },
  async (args) => ({
    content: [{ type: 'text', text: JSON.stringify(myPrefabData) }],
    // ⚠️ structuredContent is REQUIRED for the host to render the UI.
    structuredContent: myPrefabData,
  }),
);
```

`structuredContent` is what the host forwards to the iframe via
`ui/notifications/tool-result`. The text in `content[]` is the LLM
fallback for hosts without UI rendering.

### 2. Renderer resource — declare CSP on both, the content item wins

> Per the MCP Apps spec: "When `_meta.ui` is present on **both**, the
> content-item value takes precedence. Hosts MUST check both locations,
> preferring the content item and falling back to the listing entry."
> The reference host implementation is literally
> `contentMeta?.ui ?? listingMeta?.ui`.

So declare `_meta.ui` in **both** places and let precedence sort it out.
VS Code injects the resulting policy as a `<meta>` tag; Claude Desktop
and ChatGPT enforce it via HTTP headers on a sandboxed origin.

This is the bug that wastes everyone's afternoon, and it is specifically
a **listing-only** CSP. Some hosts (VS Code among them) read only the
content item, so a policy declared solely on the resource listing is
silently dropped and you get a black iframe. Setting it on both is
always safe, since the content item takes precedence anyway.

```ts
const CSP_META = {
  ui: {
    csp: {
      // Origins allowed for <script src>, <link href>, <img>, etc.
      resourceDomains: ['https://cdn.jsdelivr.net'],
      // Origins allowed for fetch / XHR / WebSocket.
      connectDomains: [],
      // Origins allowed in <iframe>.
      frameDomains: [],
      baseUriDomains: [],
    },
  },
};

mcp.registerResource(
  'viewer',
  'ui://your/viewer',
  {
    title: 'My Viewer',
    mimeType: 'text/html;profile=mcp-app',
    _meta: CSP_META,                       // listing-level fallback
    cacheHint: { ttlMs: 86_400_000, cacheScope: 'public' },
  },
  async (uri) => ({
    contents: [{
      uri: uri.toString(),
      mimeType: 'text/html;profile=mcp-app',
      text: rendererHtml(),
      _meta: CSP_META,                     // ← takes precedence; required by VS Code
    }],
    // Required on cacheable results as of protocol revision 2026-07-28
    // (SEP-2549). Omit them and the SDK falls back to { ttlMs: 0,
    // cacheScope: 'private' } — the viewer is re-fetched on every render.
    ttlMs: 86_400_000,
    cacheScope: 'public',
  }),
);
```

Use `registerResource`, not the older `resource()` overload — v1 deprecated it
and `@modelcontextprotocol/server` v2 removed it.

Because the viewer HTML is pinned to an exact package version on the CDN, it
cannot change for a given server build, which is what makes it safe to mark
`public` with a long TTL. Values the handler returns win over the per-resource
`cacheHint`, which in turn wins over the server-level `cacheHints` option.

**Shortcut:** if you're using prefab's TypeScript SDK, `registerViewerResource()` handles all of the above in one call — MIME type, CSP on both locations, the cache fields, and the `io.modelcontextprotocol/apps` extension capability (SEP-2133):

```ts
import { registerViewerResource, PREFAB_RESOURCE_URI } from '@maxhealth.tech/prefab/mcp'

// Registers ui://prefab/viewer with correct MIME, CSP, and HTML
registerViewerResource(server)

// With custom options:
registerViewerResource(server, {
  uri: 'ui://myapp/dashboard',
  title: 'My Dashboard',
  csp: { connectDomains: ['https://api.example.com'] },
  permissions: { clipboardWrite: true },
  scripts: ['https://cdn.example.com/plugin.js'],
  cache: { ttlMs: 3_600_000, cacheScope: 'public' },  // default: 24h / public
})
```

Call it **before** the server connects — capabilities cannot be registered on a
connected server. If it is called later the resource still registers, and prefab
logs a warning instead of throwing.

#### Following the user's VS Code theme

`prefab.css` resolves every token through a chain: the MCP Apps host variable
first, then the VS Code webview variable, then a static default.

```css
--background: var(--color-background-primary, var(--vscode-editor-background, #ffffff));
```

That order is right in general, but a host which defines the MCP Apps `--color-*`
variables shadows the VS Code ones completely, and the viewer stops tracking the
user's editor theme. Opt into the bridge to invert the priority:

```ts
registerViewerResource(server, { themeBridge: 'vscode' })
// or directly:
const html = rendererHtml({ themeBridge: 'vscode' })
```

It emits a `<style>` block after `prefab.css` that re-declares the affected
tokens with the `--vscode-*` variable first and the MCP Apps layer dropped,
keeping prefab's own static fallbacks so nothing changes outside VS Code. Head
order is the contract: `prefab.css`, then the bridge, then your `stylesheets`,
so your overrides still win.

It covers the `:root` default and the `prefers-color-scheme: dark` block. It
deliberately does **not** touch `:root[data-theme="dark"]`, which is prefab's
standalone dark palette: host theming cascades, the manual toggle does not, so an
app that pins `data-theme="dark"` keeps its own choice.

`VSCODE_BRIDGE` is the exported mapping table if you need to inspect or extend
it; `test/theme-bridge.test.ts` cross-checks every entry against `prefab.css` so
the two cannot drift.

The MIME type is exactly `text/html;profile=mcp-app` (with no space
around the semicolon). Plain `text/html` is silently treated as a
non-app resource.

### 3. CSP template (VS Code example)

> All spec-compliant hosts enforce CSP. The exact directives vary by
> host, but the shape of `_meta.ui.csp` is the same everywhere. Below
> is the template VS Code uses; Claude Desktop and ChatGPT apply a
> similar policy via HTTP `Content-Security-Policy` headers.

VS Code merges your `_meta.ui.csp` into this template:

```
default-src 'none';
script-src 'self' 'unsafe-inline' {resourceDomains};
style-src  'self' 'unsafe-inline' {resourceDomains};
connect-src 'self' {connectDomains};
img-src 'self' data: {resourceDomains};
font-src 'self' {resourceDomains};
media-src 'self' data: {resourceDomains};
frame-src {frameDomains || 'none'};
object-src 'none';
base-uri {baseUriDomains || 'self'};
```

Inline `<script>` works (`'unsafe-inline'`), but external
`<script src="https://...">` requires the origin to be listed in
`resourceDomains`.

#### Custom pipes under this policy

Note what is **not** in that template: `'unsafe-eval'`. Custom pipes travel over
the wire as function source (`pipes: { humanName: '(value) => ...' }`) and the
renderer hydrates them with `new Function()`, which the policy above forbids. The
renderer degrades gracefully — values pass through unformatted and one warning is
logged — but the pipes do not run.

To use custom pipes in such a host, pre-register them from a companion script.
Anything already registered wins over the wire source and is never evaluated:

```ts
// companion.js, served from an origin listed in resourceDomains
window.prefab.registerPipe('humanName', (value) => {
  const n = value ?? {}
  return n.text ?? [n.given?.join(' '), n.family].filter(Boolean).join(' ')
})
```

```ts
registerViewerResource(server, {
  scripts: ['https://cdn.example.com/companion.js'],  // origin auto-added to CSP
})
```

Sending the pipes on the wire as well is harmless and keeps the same server
working in hosts that do allow eval.

### 4. Permission Policy — requesting browser capabilities

MCP Apps can request browser permissions (camera, microphone,
geolocation, clipboard) via `_meta.ui.permissions`. This is part of
the **official MCP Apps spec** (not host-specific) — though host
support varies.

```ts
const RESOURCE_META = {
  ui: {
    csp: {
      resourceDomains: ['https://cdn.jsdelivr.net'],
      connectDomains: [],
      frameDomains: [],
      baseUriDomains: [],
    },
    permissions: {
      camera: true,           // Request camera access
      microphone: true,       // Request microphone access
      geolocation: true,      // Request geolocation access
      clipboardWrite: true,   // Request clipboard write access
    },
  },
};
```

| Permission | Permission Policy Feature | Use Case |
|------------|--------------------------|----------|
| `camera` | `camera` | Video capture, QR scanning |
| `microphone` | `microphone` | Audio recording, voice input |
| `geolocation` | `geolocation` | Location-aware apps, maps |
| `clipboardWrite` | `clipboard-write` | Copy-to-clipboard |

All default to `false`. Hosts that support Permission Policy will
set the `allow` attribute on the iframe accordingly. The browser
still prompts the user for consent — permissions are requests, not
guarantees.

**Host support status:**

| Host | Supports `permissions`? |
|------|------------------------|
| **VS Code** | Partial (may ignore unknown permissions) |
| **Claude Desktop** | Yes (reported via `hostCapabilities.sandbox.permissions`) |
| **ChatGPT** | Yes (reported via `hostCapabilities.sandbox.permissions`) |

Hosts report the permissions and CSP they actually applied in the
`ui/initialize` response under `hostCapabilities.sandbox`. Apps
should use JS feature detection as a fallback since hosts MAY ignore
permissions they don't support.

## Client-side: the `ui/*` JSON-RPC protocol

Inside the iframe, communication with the host happens via
`postMessage`. In VS Code, this is `acquireVsCodeApi().postMessage(...)`.
In all other hosts, it's `window.parent.postMessage(...)`. The renderer
detects the environment automatically.

All envelopes are JSON-RPC 2.0:

```jsonc
// Host → client: tool result for the matching tool call
{
  "jsonrpc": "2.0",
  "method":  "ui/notifications/tool-result",
  "params":  {
    "content": [{ "type": "text", "text": "..." }],
    "structuredContent": { /* your UI payload */ }
  }
}

// Host → client: tool input arguments (echoed for context)
{
  "jsonrpc": "2.0",
  "method":  "ui/notifications/tool-input",
  "params":  { "arguments": { /* tool args */ } }
}

// Host → client: initialize request (responds with empty result is fine)
{
  "jsonrpc": "2.0",
  "id":      0,
  "result": {
    "protocolVersion": "2026-01-26",
    "hostInfo":        { "name": "Visual Studio Code", "version": "..." },
    "hostCapabilities": { /* ... */ }
  }
}
```

Methods (per the MCP Apps spec):

| Method                                       | Direction         | Purpose                                |
| -------------------------------------------- | ----------------- | -------------------------------------- |
| `ui/initialize`                              | client → host     | Handshake request                      |
| *(response to `ui/initialize`)*              | host → client     | `McpUiInitializeResult`                |
| `ui/notifications/initialized`               | client → host     | View confirms it is ready              |
| `ui/notifications/sandbox-proxy-ready`       | sandbox → host    | Sandbox proxy is ready                 |
| `ui/notifications/sandbox-resource-ready`    | host → sandbox    | Host sends HTML to the sandbox proxy   |
| `ui/notifications/tool-input`                | host → client     | Forwarded tool arguments               |
| `ui/notifications/tool-input-partial`        | host → client     | Streaming partial input                |
| `ui/notifications/tool-result`               | host → client     | Final tool result                      |
| `ui/notifications/tool-cancelled`            | host → client     | Tool call cancelled                    |
| `ui/notifications/host-context-changed`      | host → client     | Theme / locale / dimensions changed    |
| `ui/notifications/size-changed`              | client → host     | View resize                            |
| `ui/open-link`                               | client → host     | Open URL externally                    |
| `ui/message`                                 | client → host     | Send a message to the chat conversation |
| `ui/request-display-mode`                    | client → host     | Switch display mode                    |
| `ui/update-model-context`                    | client → host     | Update model context                   |
| `ui/resource-teardown`                       | host → client     | Iframe is being destroyed              |

> **Note:** the View (your iframe) never sends `sandbox-resource-ready` —
> that one travels host → sandbox proxy and is internal to VS Code.
> After receiving the response to `ui/initialize`, the View must send
> `ui/notifications/initialized` to signal readiness.

## Working adapter — renderer HTML

Two options for rendering `@maxhealth.tech/prefab` `$prefab` JSON
inside a `ui://` resource. Both work in **every MCP Apps host** — VS Code,
Claude Desktop, ChatGPT, and any other host that speaks the
`ui/*` JSON-RPC protocol.

### Option A: `renderer.auto.min.js` (recommended)

Since **v0.2.8**, the auto-mount bundle handles both bridge
protocols (`prefab:*` and `ui/*` JSON-RPC) with zero inline
script. It races the handshakes in parallel, buffers tool results
that arrive before the handler is wired, and defers boot until the DOM
is interactive.

```html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Prefab</title>
  <link rel="stylesheet" crossorigin
        href="https://cdn.jsdelivr.net/npm/@maxhealth.tech/prefab@0.3/dist/prefab.css">
</head>
<body>
  <div id="root"></div>
  <script crossorigin
          src="https://cdn.jsdelivr.net/npm/@maxhealth.tech/prefab@0.3/dist/renderer.auto.min.js"></script>
</body>
</html>
```

That's the entire file. No inline `<script>`, no adapter code. The
auto bundle:

1. Waits for `DOMContentLoaded` (or microtask if already loaded)
2. Calls `app()` which races `prefab:init` and `ui/initialize` in
   parallel — whichever protocol responds first wins
3. Registers `onToolResult` and `onToolInput` handlers
4. Mounts `$prefab` wire data into `#root` when a tool result arrives

> **Requires `≥ 0.2.8`.** Earlier versions used a sequential waterfall
> that wasted 1.5s on every JSON-RPC host and could miss early tool
> results.

### Option B: `renderer.min.js` + inline adapter

If you need full control over the JSON-RPC handshake, or you're using
a pre-0.2.8 version, load the library-only bundle and wire the
protocol yourself:

```html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Prefab</title>
  <link rel="stylesheet" crossorigin
        href="https://cdn.jsdelivr.net/npm/@maxhealth.tech/prefab@0.3/dist/prefab.css">
</head>
<body>
  <div id="root"></div>
  <script crossorigin
          src="https://cdn.jsdelivr.net/npm/@maxhealth.tech/prefab@0.3/dist/renderer.min.js"></script>
  <script>
    (function () {
      var api = typeof acquireVsCodeApi === 'function' ? acquireVsCodeApi() : null;
      var post = function (msg) {
        if (api) api.postMessage(msg);
        else if (window.parent !== window) window.parent.postMessage(msg, '*');
      };
      var mounted = null;

      function isPrefab(d) { return d && typeof d === 'object' && d.$prefab && d.view; }
      function tryParse(t) { try { return JSON.parse(t); } catch (_) { return null; } }
      function extract(payload) {
        if (!payload) return null;
        if (payload.structuredContent && isPrefab(payload.structuredContent)) {
          return payload.structuredContent;
        }
        if (Array.isArray(payload.content)) {
          for (var i = 0; i < payload.content.length; i++) {
            var c = payload.content[i];
            if (c && c.type === 'text' && typeof c.text === 'string') {
              var parsed = tryParse(c.text);
              if (isPrefab(parsed)) return parsed;
            }
          }
        }
        if (isPrefab(payload)) return payload;
        return null;
      }
      function render(data) {
        var root = document.getElementById('root');
        if (mounted && typeof mounted.destroy === 'function') {
          try { mounted.destroy(); } catch (_) {}
        }
        try { mounted = window.prefab.mount(root, data); }
        catch (e) { root.textContent = 'Render error: ' + (e && e.message || e); }
      }

      var INIT_ID = 1;
      var initialized = false;

      window.addEventListener('message', function (e) {
        var msg = e.data;
        if (!msg || typeof msg !== 'object' || msg.jsonrpc !== '2.0') return;

        if (msg.id === INIT_ID && !msg.method && !initialized) {
          initialized = true;
          post({ jsonrpc: '2.0', method: 'ui/notifications/initialized', params: {} });
          return;
        }

        if (msg.method && typeof msg.id !== 'undefined') {
          post({ jsonrpc: '2.0', id: msg.id, result: {} });
        }

        if (msg.method === 'ui/notifications/tool-result') {
          var data = extract(msg.params);
          if (data) render(data);
        } else if (msg.method === 'ui/notifications/tool-input') {
          var input = msg.params && msg.params.arguments;
          if (input && isPrefab(input)) render(input);
        }
      });

      post({
        jsonrpc: '2.0', id: INIT_ID, method: 'ui/initialize',
        params: {
          protocolVersion: '2026-01-26',
          appInfo: { name: 'prefab-renderer', version: '0.2' },
          appCapabilities: {}
        }
      });
    })();
  </script>
</body>
</html>
```

## Common pitfalls

### "Black iframe" / nothing renders (VS Code)

Cause: CSP is blocking the external script load. You most likely
declared `_meta.ui.csp` only on the resource **listing**. Hosts that
read only the content item (VS Code among them) never see it, so your
`resourceDomains` never reach `script-src`.

Fix: add `_meta` to each entry of the `contents` array returned by
`readResource`, and keep it on the listing too. The content item takes
precedence where both are set, so declaring both is always safe.

### `Cannot read properties of undefined (reading 'startsWith')`

Cause: you're using `renderer.auto.min.js` **before v0.2.8**. Older
versions used a sequential handshake waterfall that races against
VS Code's own initialization.

Fix: upgrade to `@maxhealth.tech/prefab@0.2.8` or later. The auto
bundle now works correctly in VS Code.

### Iframe loads but shows raw JSON (all hosts)

You returned `content` but no `structuredContent`. The host only invokes
the UI rendering path when `structuredContent` is set. Add it to your
tool result.

### Wrong MIME type

It must be exactly `text/html;profile=mcp-app`. Other MIME types are
treated as ordinary `ui://` resources and won't trigger the iframe
loader.

### `appInfo` vs `clientInfo` in `ui/initialize` (Claude Desktop / ChatGPT)

Cause: the `ui/initialize` request uses `appInfo` (per the MCP Apps
spec and the `@modelcontextprotocol/ext-apps` SDK Zod schema), **not**
`clientInfo`. If you send `clientInfo`, the host's schema validation
fails silently — the handshake never completes, the iframe stays blank,
and the only clue is a timeout.

This was the root cause of the Claude Desktop breakage between v0.2.11
and v0.2.12. In v0.2.11 the ext-apps SDK fallback masked the bug
because the SDK sent the correct field. When we removed the SDK in
v0.2.12 to cut bundle size (405 KB → 80 KB), our native JSON-RPC
handshake was exposed — and it was sending `clientInfo`.

Correct:

```js
{
  jsonrpc: '2.0', id: 1, method: 'ui/initialize',
  params: {
    protocolVersion: '2026-01-26',
    appInfo: { name: 'my-app', version: '1.0' },  // ← correct
    appCapabilities: {}
  }
}
```

Wrong (will timeout on Claude Desktop / ChatGPT):

```js
{
  jsonrpc: '2.0', id: 1, method: 'ui/initialize',
  params: {
    protocolVersion: '2026-01-26',
    capabilities: {},                               // ← ignored
    clientInfo: { name: 'my-app', version: '1.0' }, // ← wrong field name
    appCapabilities: {}
  }
}
```

Fixed in **v0.2.15**.

## `@modelcontextprotocol/ext-apps` SDK vs native `ui/*` JSON-RPC

The ext-apps SDK and the `ui/*` JSON-RPC protocol are **the same wire
protocol**. The SDK is a convenience wrapper — under the hood it sends
identical JSON-RPC 2.0 messages over `postMessage`.

| Aspect | ext-apps SDK (`App` class) | Native `ui/*` JSON-RPC |
|--------|---------------------------|------------------------|
| Wire format | JSON-RPC 2.0 over `postMessage` | JSON-RPC 2.0 over `postMessage` |
| Handshake | `App.connect()` → sends `ui/initialize` | Send `ui/initialize` manually |
| Init params | `{ appInfo, appCapabilities, protocolVersion }` | Same |
| Tool input | `addEventListener('toolinput', fn)` | Listen for `ui/notifications/tool-input` |
| Tool result | `addEventListener('toolresult', fn)` | Listen for `ui/notifications/tool-result` |
| Tool calls | `app.callServerTool({ name, arguments })` | Send `tools/call` JSON-RPC request |
| Open link | `app.openLink({ url })` | Send `ui/open-link` JSON-RPC request |
| Size reporting | Auto via `ResizeObserver` (`autoResize: true`) | Send `ui/notifications/size-changed` manually |
| Bundle size | ~325 KB (SDK + `@modelcontextprotocol/sdk` + zod) | 0 KB (native) |
| Dependencies | `@modelcontextprotocol/sdk`, `zod/v4` | None |

**Recommendation:** use `renderer.auto.min.js` which implements the
native `ui/*` JSON-RPC protocol without the SDK dependency. The SDK
adds no capabilities that aren't available via raw JSON-RPC — it just
adds 325 KB of bundle weight.

If you need the SDK for its React hooks (`useHostStyleVariables`,
`useDocumentTheme`) or `App.setupSizeChangedNotifications()`, install
`@modelcontextprotocol/ext-apps` separately.

## Reference

* **MCP Apps spec**: Protocol version `2026-01-26` — `ui/*` JSON-RPC 2.0 over `postMessage`
* **VS Code internals**: `resources/app/out/vs/workbench/workbench.desktop.main.js`
  * `_injectPreamble({ html, csp })` — builds the CSP meta tag and the
    `acquireVsCodeApi()` shim.
  * `loadResource(uri)` — reads the resource, returns
    `{ ...n._meta?.ui, html, mimeType }`.
* **ext-apps SDK source**: `@modelcontextprotocol/ext-apps` on npm
  * `App.connect()` in `dist/src/app.js` — sends `ui/initialize`
    with `{ appInfo, appCapabilities, protocolVersion }`
  * `AppBridge._oninitialize()` in `dist/src/app-bridge.js` — host
    side, validates via Zod schema (requires `appInfo`, not `clientInfo`)
* **Reference implementations**:
  * TypeScript: `@maxhealth.tech/prefab` on npm
  * Python: `prefab_ui` and `fastmcp` on PyPI

---

---
url: /prefab/reference/api/actions.md
---
[@maxhealth.tech/prefab](../index.md) / actions

# actions

## Classes

| Class | Description |
| ------ | ------ |
| [SetState](classes/SetState.md) | Base interface all actions implement |
| [ToggleState](classes/ToggleState.md) | Base interface all actions implement |
| [AppendState](classes/AppendState.md) | Base interface all actions implement |
| [PopState](classes/PopState.md) | Base interface all actions implement |
| [ShowToast](classes/ShowToast.md) | Base interface all actions implement |
| [CloseOverlay](classes/CloseOverlay.md) | Base interface all actions implement |
| [OpenLink](classes/OpenLink.md) | Base interface all actions implement |
| [SetInterval](classes/SetInterval.md) | Base interface all actions implement |
| [Fetch](classes/Fetch.md) | Base interface all actions implement |
| [OpenFilePicker](classes/OpenFilePicker.md) | Base interface all actions implement |
| [CallHandler](classes/CallHandler.md) | Base interface all actions implement |
| [CallTool](classes/CallTool.md) | Invoke an MCP tool from the UI. Used in Form.onSubmit or Button.onClick to call backend tools. |
| [SendMessage](classes/SendMessage.md) | Base interface all actions implement |
| [UpdateContext](classes/UpdateContext.md) | Base interface all actions implement |
| [RequestDisplayMode](classes/RequestDisplayMode.md) | Base interface all actions implement |
| [Subscribe](classes/Subscribe.md) | Subscribe to a resource URI for real-time updates. |
| [Unsubscribe](classes/Unsubscribe.md) | Unsubscribe from a previously subscribed resource URI. |

## Interfaces

| Interface | Description |
| ------ | ------ |
| [SetStateOpts](interfaces/SetStateOpts.md) | - |
| [ShowToastOpts](interfaces/ShowToastOpts.md) | - |
| [FetchOpts](interfaces/FetchOpts.md) | - |
| [OpenFilePickerOpts](interfaces/OpenFilePickerOpts.md) | - |
| [CallHandlerOpts](interfaces/CallHandlerOpts.md) | - |
| [CallToolOpts](interfaces/CallToolOpts.md) | - |
| [SubscribeOpts](interfaces/SubscribeOpts.md) | - |
| [ActionJSON](interfaces/ActionJSON.md) | Serialized action JSON |
| [Action](interfaces/Action.md) | Base interface all actions implement |

## Type Aliases

| Type Alias | Description |
| ------ | ------ |
| [ToastVariant](type-aliases/ToastVariant.md) | - |
| [DisplayMode](type-aliases/DisplayMode.md) | - |
| [StateTarget](type-aliases/StateTarget.md) | Anything that resolves to a state key: Signal, Collection, or raw string. |

## Functions

| Function | Description |
| ------ | ------ |
| [set](functions/set.md) | Set a state value. `set(signal, value)` → `new SetState(signal.key, value)` |
| [toggle](functions/toggle.md) | Toggle a boolean state value. `toggle(signal)` → `new ToggleState(signal.key)` |
| [append](functions/append.md) | Append an item to an array state value. Optionally specify insertion index. |
| [pop](functions/pop.md) | Remove an element from an array by index or value. Defaults to last element (-1). |
| [serializeCallbacks](functions/serializeCallbacks.md) | Serialize one or more actions to their JSON form. |

---

---
url: /prefab/reference/api/actions/classes/SetState.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / SetState

# Class: SetState

Defined in: [actions/client.ts:16](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L16)

Base interface all actions implement

## Implements

* [`Action`](../interfaces/Action.md)

## Constructors

### Constructor

```ts
new SetState(
   key, 
   value, 
   opts?): SetState;
```

Defined in: [actions/client.ts:17](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L17)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `key` | `string` |
| `value` | `unknown` |
| `opts?` | [`SetStateOpts`](../interfaces/SetStateOpts.md) |

#### Returns

`SetState`

## Properties

### key

```ts
readonly key: string;
```

Defined in: [actions/client.ts:18](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L18)

***

### value

```ts
readonly value: unknown;
```

Defined in: [actions/client.ts:19](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L19)

## Methods

### toJSON()

```ts
toJSON(): ActionJSON;
```

Defined in: [actions/client.ts:23](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L23)

#### Returns

[`ActionJSON`](../interfaces/ActionJSON.md)

#### Implementation of

[`Action`](../interfaces/Action.md).[`toJSON`](../interfaces/Action.md#tojson)

---

---
url: /prefab/reference/api/actions/classes/ToggleState.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / ToggleState

# Class: ToggleState

Defined in: [actions/client.ts:37](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L37)

Base interface all actions implement

## Implements

* [`Action`](../interfaces/Action.md)

## Constructors

### Constructor

```ts
new ToggleState(key): ToggleState;
```

Defined in: [actions/client.ts:38](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L38)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `key` | `string` |

#### Returns

`ToggleState`

## Properties

### key

```ts
readonly key: string;
```

Defined in: [actions/client.ts:38](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L38)

## Methods

### toJSON()

```ts
toJSON(): ActionJSON;
```

Defined in: [actions/client.ts:40](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L40)

#### Returns

[`ActionJSON`](../interfaces/ActionJSON.md)

#### Implementation of

[`Action`](../interfaces/Action.md).[`toJSON`](../interfaces/Action.md#tojson)

---

---
url: /prefab/reference/api/actions/classes/AppendState.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / AppendState

# Class: AppendState

Defined in: [actions/client.ts:47](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L47)

Base interface all actions implement

## Implements

* [`Action`](../interfaces/Action.md)

## Constructors

### Constructor

```ts
new AppendState(
   key, 
   value, 
   index?): AppendState;
```

Defined in: [actions/client.ts:48](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L48)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `key` | `string` |
| `value` | `unknown` |
| `index?` | `number` |

#### Returns

`AppendState`

## Properties

### key

```ts
readonly key: string;
```

Defined in: [actions/client.ts:49](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L49)

***

### value

```ts
readonly value: unknown;
```

Defined in: [actions/client.ts:50](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L50)

***

### index?

```ts
readonly optional index?: number;
```

Defined in: [actions/client.ts:51](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L51)

## Methods

### toJSON()

```ts
toJSON(): ActionJSON;
```

Defined in: [actions/client.ts:54](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L54)

#### Returns

[`ActionJSON`](../interfaces/ActionJSON.md)

#### Implementation of

[`Action`](../interfaces/Action.md).[`toJSON`](../interfaces/Action.md#tojson)

---

---
url: /prefab/reference/api/actions/classes/PopState.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / PopState

# Class: PopState

Defined in: [actions/client.ts:67](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L67)

Base interface all actions implement

## Implements

* [`Action`](../interfaces/Action.md)

## Constructors

### Constructor

```ts
new PopState(key, index): PopState;
```

Defined in: [actions/client.ts:68](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L68)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `key` | `string` |
| `index` | `string` | `number` |

#### Returns

`PopState`

## Properties

### key

```ts
readonly key: string;
```

Defined in: [actions/client.ts:69](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L69)

***

### index

```ts
readonly index: string | number;
```

Defined in: [actions/client.ts:70](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L70)

## Methods

### toJSON()

```ts
toJSON(): ActionJSON;
```

Defined in: [actions/client.ts:73](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L73)

#### Returns

[`ActionJSON`](../interfaces/ActionJSON.md)

#### Implementation of

[`Action`](../interfaces/Action.md).[`toJSON`](../interfaces/Action.md#tojson)

---

---
url: /prefab/reference/api/actions/classes/ShowToast.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / ShowToast

# Class: ShowToast

Defined in: [actions/client.ts:88](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L88)

Base interface all actions implement

## Implements

* [`Action`](../interfaces/Action.md)

## Constructors

### Constructor

```ts
new ShowToast(message, opts?): ShowToast;
```

Defined in: [actions/client.ts:89](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L89)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `message` | `string` |
| `opts?` | [`ShowToastOpts`](../interfaces/ShowToastOpts.md) |

#### Returns

`ShowToast`

## Properties

### message

```ts
readonly message: string;
```

Defined in: [actions/client.ts:90](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L90)

## Methods

### toJSON()

```ts
toJSON(): ActionJSON;
```

Defined in: [actions/client.ts:94](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L94)

#### Returns

[`ActionJSON`](../interfaces/ActionJSON.md)

#### Implementation of

[`Action`](../interfaces/Action.md).[`toJSON`](../interfaces/Action.md#tojson)

---

---
url: /prefab/reference/api/actions/classes/CloseOverlay.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / CloseOverlay

# Class: CloseOverlay

Defined in: [actions/client.ts:105](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L105)

Base interface all actions implement

## Implements

* [`Action`](../interfaces/Action.md)

## Constructors

### Constructor

```ts
new CloseOverlay(): CloseOverlay;
```

#### Returns

`CloseOverlay`

## Methods

### toJSON()

```ts
toJSON(): ActionJSON;
```

Defined in: [actions/client.ts:106](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L106)

#### Returns

[`ActionJSON`](../interfaces/ActionJSON.md)

#### Implementation of

[`Action`](../interfaces/Action.md).[`toJSON`](../interfaces/Action.md#tojson)

---

---
url: /prefab/reference/api/actions/classes/OpenLink.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / OpenLink

# Class: OpenLink

Defined in: [actions/client.ts:113](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L113)

Base interface all actions implement

## Implements

* [`Action`](../interfaces/Action.md)

## Constructors

### Constructor

```ts
new OpenLink(url, target?): OpenLink;
```

Defined in: [actions/client.ts:114](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L114)

#### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `url` | `string` | `undefined` |
| `target` | `string` | `'_blank'` |

#### Returns

`OpenLink`

## Properties

### url

```ts
readonly url: string;
```

Defined in: [actions/client.ts:115](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L115)

***

### target

```ts
readonly target: string = '_blank';
```

Defined in: [actions/client.ts:116](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L116)

## Methods

### toJSON()

```ts
toJSON(): ActionJSON;
```

Defined in: [actions/client.ts:119](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L119)

#### Returns

[`ActionJSON`](../interfaces/ActionJSON.md)

#### Implementation of

[`Action`](../interfaces/Action.md).[`toJSON`](../interfaces/Action.md#tojson)

---

---
url: /prefab/reference/api/actions/classes/SetInterval.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / SetInterval

# Class: SetInterval

Defined in: [actions/client.ts:126](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L126)

Base interface all actions implement

## Implements

* [`Action`](../interfaces/Action.md)

## Constructors

### Constructor

```ts
new SetInterval(intervalMs, onTick): SetInterval;
```

Defined in: [actions/client.ts:127](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L127)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `intervalMs` | `number` |
| `onTick` | | [`Action`](../interfaces/Action.md) | [`Action`](../interfaces/Action.md)\[] |

#### Returns

`SetInterval`

## Properties

### intervalMs

```ts
readonly intervalMs: number;
```

Defined in: [actions/client.ts:128](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L128)

***

### onTick

```ts
readonly onTick: 
  | Action
  | Action[];
```

Defined in: [actions/client.ts:129](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L129)

## Methods

### toJSON()

```ts
toJSON(): ActionJSON;
```

Defined in: [actions/client.ts:132](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L132)

#### Returns

[`ActionJSON`](../interfaces/ActionJSON.md)

#### Implementation of

[`Action`](../interfaces/Action.md).[`toJSON`](../interfaces/Action.md#tojson)

---

---
url: /prefab/reference/api/actions/classes/Fetch.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / Fetch

# Class: Fetch

Defined in: [actions/client.ts:152](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L152)

Base interface all actions implement

## Implements

* [`Action`](../interfaces/Action.md)

## Constructors

### Constructor

```ts
new Fetch(url, opts?): Fetch;
```

Defined in: [actions/client.ts:153](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L153)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `url` | `string` |
| `opts?` | [`FetchOpts`](../interfaces/FetchOpts.md) |

#### Returns

`Fetch`

## Properties

### url

```ts
readonly url: string;
```

Defined in: [actions/client.ts:154](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L154)

## Methods

### toJSON()

```ts
toJSON(): ActionJSON;
```

Defined in: [actions/client.ts:158](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L158)

#### Returns

[`ActionJSON`](../interfaces/ActionJSON.md)

#### Implementation of

[`Action`](../interfaces/Action.md).[`toJSON`](../interfaces/Action.md#tojson)

---

---
url: /prefab/reference/api/actions/classes/OpenFilePicker.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / OpenFilePicker

# Class: OpenFilePicker

Defined in: [actions/client.ts:179](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L179)

Base interface all actions implement

## Implements

* [`Action`](../interfaces/Action.md)

## Constructors

### Constructor

```ts
new OpenFilePicker(opts?): OpenFilePicker;
```

Defined in: [actions/client.ts:180](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L180)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `opts?` | [`OpenFilePickerOpts`](../interfaces/OpenFilePickerOpts.md) |

#### Returns

`OpenFilePicker`

## Methods

### toJSON()

```ts
toJSON(): ActionJSON;
```

Defined in: [actions/client.ts:182](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L182)

#### Returns

[`ActionJSON`](../interfaces/ActionJSON.md)

#### Implementation of

[`Action`](../interfaces/Action.md).[`toJSON`](../interfaces/Action.md#tojson)

---

---
url: /prefab/reference/api/actions/classes/CallHandler.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / CallHandler

# Class: CallHandler

Defined in: [actions/client.ts:201](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L201)

Base interface all actions implement

## Implements

* [`Action`](../interfaces/Action.md)

## Constructors

### Constructor

```ts
new CallHandler(handler, opts?): CallHandler;
```

Defined in: [actions/client.ts:202](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L202)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `handler` | `string` |
| `opts?` | [`CallHandlerOpts`](../interfaces/CallHandlerOpts.md) |

#### Returns

`CallHandler`

## Properties

### handler

```ts
readonly handler: string;
```

Defined in: [actions/client.ts:203](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L203)

## Methods

### toJSON()

```ts
toJSON(): ActionJSON;
```

Defined in: [actions/client.ts:207](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L207)

#### Returns

[`ActionJSON`](../interfaces/ActionJSON.md)

#### Implementation of

[`Action`](../interfaces/Action.md).[`toJSON`](../interfaces/Action.md#tojson)

---

---
url: /prefab/reference/api/actions/classes/CallTool.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / CallTool

# Class: CallTool

Defined in: [actions/mcp.ts:22](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/mcp.ts#L22)

Invoke an MCP tool from the UI.
Used in Form.onSubmit or Button.onClick to call backend tools.

## Implements

* [`Action`](../interfaces/Action.md)

## Constructors

### Constructor

```ts
new CallTool(tool, opts?): CallTool;
```

Defined in: [actions/mcp.ts:23](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/mcp.ts#L23)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `tool` | `string` |
| `opts?` | [`CallToolOpts`](../interfaces/CallToolOpts.md) |

#### Returns

`CallTool`

## Properties

### tool

```ts
readonly tool: string;
```

Defined in: [actions/mcp.ts:24](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/mcp.ts#L24)

## Methods

### toJSON()

```ts
toJSON(): ActionJSON;
```

Defined in: [actions/mcp.ts:28](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/mcp.ts#L28)

#### Returns

[`ActionJSON`](../interfaces/ActionJSON.md)

#### Implementation of

[`Action`](../interfaces/Action.md).[`toJSON`](../interfaces/Action.md#tojson)

---

---
url: /prefab/reference/api/actions/classes/SendMessage.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / SendMessage

# Class: SendMessage

Defined in: [actions/mcp.ts:40](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/mcp.ts#L40)

Base interface all actions implement

## Implements

* [`Action`](../interfaces/Action.md)

## Constructors

### Constructor

```ts
new SendMessage(message): SendMessage;
```

Defined in: [actions/mcp.ts:41](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/mcp.ts#L41)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `message` | `string` |

#### Returns

`SendMessage`

## Properties

### message

```ts
readonly message: string;
```

Defined in: [actions/mcp.ts:41](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/mcp.ts#L41)

## Methods

### toJSON()

```ts
toJSON(): ActionJSON;
```

Defined in: [actions/mcp.ts:43](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/mcp.ts#L43)

#### Returns

[`ActionJSON`](../interfaces/ActionJSON.md)

#### Implementation of

[`Action`](../interfaces/Action.md).[`toJSON`](../interfaces/Action.md#tojson)

---

---
url: /prefab/reference/api/actions/classes/UpdateContext.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / UpdateContext

# Class: UpdateContext

Defined in: [actions/mcp.ts:50](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/mcp.ts#L50)

Base interface all actions implement

## Implements

* [`Action`](../interfaces/Action.md)

## Constructors

### Constructor

```ts
new UpdateContext(context): UpdateContext;
```

Defined in: [actions/mcp.ts:51](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/mcp.ts#L51)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `context` | `Record`<`string`, `unknown`> |

#### Returns

`UpdateContext`

## Properties

### context

```ts
readonly context: Record<string, unknown>;
```

Defined in: [actions/mcp.ts:51](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/mcp.ts#L51)

## Methods

### toJSON()

```ts
toJSON(): ActionJSON;
```

Defined in: [actions/mcp.ts:53](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/mcp.ts#L53)

#### Returns

[`ActionJSON`](../interfaces/ActionJSON.md)

#### Implementation of

[`Action`](../interfaces/Action.md).[`toJSON`](../interfaces/Action.md#tojson)

---

---
url: /prefab/reference/api/actions/classes/RequestDisplayMode.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / RequestDisplayMode

# Class: RequestDisplayMode

Defined in: [actions/mcp.ts:62](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/mcp.ts#L62)

Base interface all actions implement

## Implements

* [`Action`](../interfaces/Action.md)

## Constructors

### Constructor

```ts
new RequestDisplayMode(mode): RequestDisplayMode;
```

Defined in: [actions/mcp.ts:63](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/mcp.ts#L63)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `mode` | [`DisplayMode`](../type-aliases/DisplayMode.md) |

#### Returns

`RequestDisplayMode`

## Properties

### mode

```ts
readonly mode: DisplayMode;
```

Defined in: [actions/mcp.ts:63](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/mcp.ts#L63)

## Methods

### toJSON()

```ts
toJSON(): ActionJSON;
```

Defined in: [actions/mcp.ts:65](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/mcp.ts#L65)

#### Returns

[`ActionJSON`](../interfaces/ActionJSON.md)

#### Implementation of

[`Action`](../interfaces/Action.md).[`toJSON`](../interfaces/Action.md#tojson)

---

---
url: /prefab/reference/api/actions/classes/Subscribe.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / Subscribe

# Class: Subscribe

Defined in: [actions/subscribe.ts:45](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/subscribe.ts#L45)

Subscribe to a resource URI for real-time updates.

When the host supports MCP resource subscriptions (`capabilities.subscriptions`),
the renderer uses push notifications via the bridge. Otherwise it falls back to
periodic polling using `SetInterval` + `CallTool`.

## Example

```ts
new Subscribe('chess://game/abc123', {
  stateKey: '$game',
  fallbackInterval: 2000,
  fallbackTool: '_action',
  fallbackArgs: { action: 'refresh' },
  onData: new ShowToast('Game updated', { variant: 'info' }),
})
```

## Implements

* [`Action`](../interfaces/Action.md)

## Constructors

### Constructor

```ts
new Subscribe(uri, opts): Subscribe;
```

Defined in: [actions/subscribe.ts:46](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/subscribe.ts#L46)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `uri` | `string` |
| `opts` | [`SubscribeOpts`](../interfaces/SubscribeOpts.md) |

#### Returns

`Subscribe`

## Properties

### uri

```ts
readonly uri: string;
```

Defined in: [actions/subscribe.ts:47](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/subscribe.ts#L47)

## Methods

### toJSON()

```ts
toJSON(): ActionJSON;
```

Defined in: [actions/subscribe.ts:51](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/subscribe.ts#L51)

#### Returns

[`ActionJSON`](../interfaces/ActionJSON.md)

#### Implementation of

[`Action`](../interfaces/Action.md).[`toJSON`](../interfaces/Action.md#tojson)

---

---
url: /prefab/reference/api/actions/classes/Unsubscribe.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / Unsubscribe

# Class: Unsubscribe

Defined in: [actions/subscribe.ts:72](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/subscribe.ts#L72)

Unsubscribe from a previously subscribed resource URI.

Typically used in cleanup or when navigating away from a view.
The renderer also automatically unsubscribes on destroy.

## Implements

* [`Action`](../interfaces/Action.md)

## Constructors

### Constructor

```ts
new Unsubscribe(uri): Unsubscribe;
```

Defined in: [actions/subscribe.ts:73](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/subscribe.ts#L73)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `uri` | `string` |

#### Returns

`Unsubscribe`

## Properties

### uri

```ts
readonly uri: string;
```

Defined in: [actions/subscribe.ts:73](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/subscribe.ts#L73)

## Methods

### toJSON()

```ts
toJSON(): ActionJSON;
```

Defined in: [actions/subscribe.ts:75](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/subscribe.ts#L75)

#### Returns

[`ActionJSON`](../interfaces/ActionJSON.md)

#### Implementation of

[`Action`](../interfaces/Action.md).[`toJSON`](../interfaces/Action.md#tojson)

---

---
url: /prefab/reference/api/actions/interfaces/SetStateOpts.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / SetStateOpts

# Interface: SetStateOpts

Defined in: [actions/client.ts:11](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L11)

## Properties

### onSuccess?

```ts
optional onSuccess?: Action | Action[];
```

Defined in: [actions/client.ts:12](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L12)

***

### onError?

```ts
optional onError?: Action | Action[];
```

Defined in: [actions/client.ts:13](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L13)

---

---
url: /prefab/reference/api/actions/interfaces/ShowToastOpts.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / ShowToastOpts

# Interface: ShowToastOpts

Defined in: [actions/client.ts:82](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L82)

## Properties

### description?

```ts
optional description?: string;
```

Defined in: [actions/client.ts:83](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L83)

***

### variant?

```ts
optional variant?: ToastVariant;
```

Defined in: [actions/client.ts:84](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L84)

***

### duration?

```ts
optional duration?: number;
```

Defined in: [actions/client.ts:85](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L85)

---

---
url: /prefab/reference/api/actions/interfaces/FetchOpts.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / FetchOpts

# Interface: FetchOpts

Defined in: [actions/client.ts:143](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L143)

## Properties

### method?

```ts
optional method?: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
```

Defined in: [actions/client.ts:144](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L144)

***

### headers?

```ts
optional headers?: Record<string, string>;
```

Defined in: [actions/client.ts:145](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L145)

***

### body?

```ts
optional body?: unknown;
```

Defined in: [actions/client.ts:146](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L146)

***

### resultKey?

```ts
optional resultKey?: string;
```

Defined in: [actions/client.ts:147](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L147)

***

### onSuccess?

```ts
optional onSuccess?: Action | Action[];
```

Defined in: [actions/client.ts:148](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L148)

***

### onError?

```ts
optional onError?: Action | Action[];
```

Defined in: [actions/client.ts:149](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L149)

---

---
url: /prefab/reference/api/actions/interfaces/OpenFilePickerOpts.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / OpenFilePickerOpts

# Interface: OpenFilePickerOpts

Defined in: [actions/client.ts:172](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L172)

## Properties

### accept?

```ts
optional accept?: string;
```

Defined in: [actions/client.ts:173](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L173)

***

### multiple?

```ts
optional multiple?: boolean;
```

Defined in: [actions/client.ts:174](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L174)

***

### resultKey?

```ts
optional resultKey?: string;
```

Defined in: [actions/client.ts:175](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L175)

***

### onSuccess?

```ts
optional onSuccess?: Action | Action[];
```

Defined in: [actions/client.ts:176](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L176)

---

---
url: /prefab/reference/api/actions/interfaces/CallHandlerOpts.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / CallHandlerOpts

# Interface: CallHandlerOpts

Defined in: [actions/client.ts:194](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L194)

## Properties

### arguments?

```ts
optional arguments?: Record<string, unknown>;
```

Defined in: [actions/client.ts:195](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L195)

***

### resultKey?

```ts
optional resultKey?: string;
```

Defined in: [actions/client.ts:196](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L196)

***

### onSuccess?

```ts
optional onSuccess?: Action | Action[];
```

Defined in: [actions/client.ts:197](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L197)

***

### onError?

```ts
optional onError?: Action | Action[];
```

Defined in: [actions/client.ts:198](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L198)

---

---
url: /prefab/reference/api/actions/interfaces/CallToolOpts.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / CallToolOpts

# Interface: CallToolOpts

Defined in: [actions/mcp.ts:11](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/mcp.ts#L11)

## Properties

### arguments?

```ts
optional arguments?: Record<string, unknown>;
```

Defined in: [actions/mcp.ts:12](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/mcp.ts#L12)

***

### resultKey?

```ts
optional resultKey?: string;
```

Defined in: [actions/mcp.ts:13](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/mcp.ts#L13)

***

### onSuccess?

```ts
optional onSuccess?: Action | Action[];
```

Defined in: [actions/mcp.ts:14](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/mcp.ts#L14)

***

### onError?

```ts
optional onError?: Action | Action[];
```

Defined in: [actions/mcp.ts:15](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/mcp.ts#L15)

---

---
url: /prefab/reference/api/actions/interfaces/SubscribeOpts.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / SubscribeOpts

# Interface: SubscribeOpts

Defined in: [actions/subscribe.ts:12](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/subscribe.ts#L12)

## Properties

### stateKey

```ts
stateKey: string;
```

Defined in: [actions/subscribe.ts:14](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/subscribe.ts#L14)

Reactive store key where incoming data is written.

***

### fallbackInterval?

```ts
optional fallbackInterval?: number;
```

Defined in: [actions/subscribe.ts:16](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/subscribe.ts#L16)

Poll interval (ms) when the host does not support push subscriptions. Defaults to 2000.

***

### fallbackTool?

```ts
optional fallbackTool?: string;
```

Defined in: [actions/subscribe.ts:18](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/subscribe.ts#L18)

Tool to call when polling in fallback mode.

***

### fallbackArgs?

```ts
optional fallbackArgs?: Record<string, unknown>;
```

Defined in: [actions/subscribe.ts:20](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/subscribe.ts#L20)

Arguments passed to the fallback tool call.

***

### onData?

```ts
optional onData?: Action | Action[];
```

Defined in: [actions/subscribe.ts:22](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/subscribe.ts#L22)

Action(s) executed whenever new data arrives (push or poll).

***

### onError?

```ts
optional onError?: Action | Action[];
```

Defined in: [actions/subscribe.ts:24](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/subscribe.ts#L24)

Action(s) executed on subscription or poll error.

---

---
url: /prefab/reference/api/actions/interfaces/ActionJSON.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / ActionJSON

# Interface: ActionJSON

Defined in: [actions/types.ts:9](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/types.ts#L9)

Serialized action JSON

## Indexable

```ts
[key: string]: unknown
```

## Properties

### action

```ts
action: string;
```

Defined in: [actions/types.ts:10](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/types.ts#L10)

---

---
url: /prefab/reference/api/actions/interfaces/Action.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / Action

# Interface: Action

Defined in: [actions/types.ts:15](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/types.ts#L15)

Base interface all actions implement

## Methods

### toJSON()

```ts
toJSON(): ActionJSON;
```

Defined in: [actions/types.ts:16](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/types.ts#L16)

#### Returns

[`ActionJSON`](ActionJSON.md)

---

---
url: /prefab/reference/api/actions/type-aliases/ToastVariant.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / ToastVariant

# Type Alias: ToastVariant

```ts
type ToastVariant = "default" | "success" | "error" | "warning" | "info";
```

Defined in: [actions/client.ts:80](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/client.ts#L80)

---

---
url: /prefab/reference/api/actions/type-aliases/DisplayMode.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / DisplayMode

# Type Alias: DisplayMode

```ts
type DisplayMode = "inline" | "fullscreen" | "pip";
```

Defined in: [actions/mcp.ts:60](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/mcp.ts#L60)

---

---
url: /prefab/reference/api/actions/type-aliases/StateTarget.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / StateTarget

# Type Alias: StateTarget

```ts
type StateTarget = 
  | Signal
  | Collection
  | string;
```

Defined in: [actions/sugar.ts:24](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/sugar.ts#L24)

Anything that resolves to a state key: Signal, Collection, or raw string.

---

---
url: /prefab/reference/api/actions/functions/set.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / set

# Function: set()

```ts
function set(
   target, 
   value, 
   opts?): SetState;
```

Defined in: [actions/sugar.ts:33](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/sugar.ts#L33)

Set a state value. `set(signal, value)` → `new SetState(signal.key, value)`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `target` | [`StateTarget`](../type-aliases/StateTarget.md) |
| `value` | `unknown` |
| `opts?` | [`SetStateOpts`](../interfaces/SetStateOpts.md) |

## Returns

[`SetState`](../classes/SetState.md)

---

---
url: /prefab/reference/api/actions/functions/toggle.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / toggle

# Function: toggle()

```ts
function toggle(target): ToggleState;
```

Defined in: [actions/sugar.ts:38](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/sugar.ts#L38)

Toggle a boolean state value. `toggle(signal)` → `new ToggleState(signal.key)`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `target` | [`StateTarget`](../type-aliases/StateTarget.md) |

## Returns

[`ToggleState`](../classes/ToggleState.md)

---

---
url: /prefab/reference/api/actions/functions/append.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / append

# Function: append()

```ts
function append(
   target, 
   item, 
   index?): AppendState;
```

Defined in: [actions/sugar.ts:43](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/sugar.ts#L43)

Append an item to an array state value. Optionally specify insertion index.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `target` | [`StateTarget`](../type-aliases/StateTarget.md) |
| `item` | `unknown` |
| `index?` | `number` |

## Returns

[`AppendState`](../classes/AppendState.md)

---

---
url: /prefab/reference/api/actions/functions/pop.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / pop

# Function: pop()

```ts
function pop(target, indexOrValue?): PopState;
```

Defined in: [actions/sugar.ts:48](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/sugar.ts#L48)

Remove an element from an array by index or value. Defaults to last element (-1).

## Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `target` | [`StateTarget`](../type-aliases/StateTarget.md) | `undefined` |
| `indexOrValue` | `string` | `number` | `-1` |

## Returns

[`PopState`](../classes/PopState.md)

---

---
url: /prefab/reference/api/actions/functions/serializeCallbacks.md
---
[@maxhealth.tech/prefab](../../index.md) / [actions](../index.md) / serializeCallbacks

# Function: serializeCallbacks()

```ts
function serializeCallbacks(actions): 
  | ActionJSON
  | ActionJSON[];
```

Defined in: [actions/types.ts:20](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/actions/types.ts#L20)

Serialize one or more actions to their JSON form.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `actions` | | [`Action`](../interfaces/Action.md) | [`Action`](../interfaces/Action.md)\[] |

## Returns

| [`ActionJSON`](../interfaces/ActionJSON.md)
| [`ActionJSON`](../interfaces/ActionJSON.md)\[]

---

---
url: /prefab/reference/api/auto.md
---
[@maxhealth.tech/prefab](../index.md) / auto

# auto

## Classes

| Class | Description |
| ------ | ------ |
| [QuickFormBuilder](classes/QuickFormBuilder.md) | Chainable form builder for rapid MCP tool UI generation. |

## Interfaces

| Interface | Description |
| ------ | ------ |
| [AutoChartOptions](interfaces/AutoChartOptions.md) | - |
| [AutoComparisonOptions](interfaces/AutoComparisonOptions.md) | - |
| [AutoFormField](interfaces/AutoFormField.md) | One field in an auto-generated form. |
| [AutoFormOptions](interfaces/AutoFormOptions.md) | - |
| [AutoDetailOptions](interfaces/AutoDetailOptions.md) | - |
| [AutoTableOptions](interfaces/AutoTableOptions.md) | - |
| [AutoMetricDef](interfaces/AutoMetricDef.md) | - |
| [AutoMetricsOptions](interfaces/AutoMetricsOptions.md) | - |
| [AutoProgressStep](interfaces/AutoProgressStep.md) | - |
| [AutoProgressOptions](interfaces/AutoProgressOptions.md) | - |
| [JsonSchemaNode](interfaces/JsonSchemaNode.md) | The JSON Schema keywords a form field can express, read structurally. |
| [FieldsFromJsonSchemaOptions](interfaces/FieldsFromJsonSchemaOptions.md) | - |
| [AutoTimelineEvent](interfaces/AutoTimelineEvent.md) | - |
| [AutoTimelineOptions](interfaces/AutoTimelineOptions.md) | - |

## Type Aliases

| Type Alias | Description |
| ------ | ------ |
| [ChartType](type-aliases/ChartType.md) | - |

## Functions

| Function | Description |
| ------ | ------ |
| [autoChart](functions/autoChart.md) | Auto-generate a chart Card from data and series definitions. |
| [autoComparison](functions/autoComparison.md) | Auto-generate a side-by-side comparison of items. |
| [autoForm](functions/autoForm.md) | Auto-generate a Form that calls an MCP tool on submit. |
| [QuickForm](functions/QuickForm.md) | Factory function for the chainable QuickForm builder. |
| [statusVariant](functions/statusVariant.md) | Get a Badge variant for a status string. Falls back to 'outline' for unknown statuses. |
| [registerStatusVariants](functions/registerStatusVariants.md) | Register additional status→variant mappings. |
| [autoDetail](functions/autoDetail.md) | Auto-generate a detail Card from a data object. |
| [autoTable](functions/autoTable.md) | Auto-generate a DataTable from an array of objects. |
| [autoMetrics](functions/autoMetrics.md) | Auto-generate a KPI dashboard grid. |
| [autoProgress](functions/autoProgress.md) | Auto-generate a multi-step progress tracker. |
| [fieldsFromJsonSchema](functions/fieldsFromJsonSchema.md) | Derive `autoForm` fields from a JSON Schema object. |
| [autoTimeline](functions/autoTimeline.md) | Auto-generate a chronological timeline. |

---

---
url: /prefab/reference/api/auto/classes/QuickFormBuilder.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / QuickFormBuilder

# Class: QuickFormBuilder

Defined in: [auto/form.ts:161](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L161)

Chainable form builder for rapid MCP tool UI generation.

## Example

```ts
const ui = QuickForm('create_user')
  .title('Create User')
  .text('name', { required: true })
  .email('email', { required: true })
  .submit('Create')
  .build()
```

## Constructors

### Constructor

```ts
new QuickFormBuilder(toolName): QuickFormBuilder;
```

Defined in: [auto/form.ts:171](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L171)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `toolName` | `string` |

#### Returns

`QuickFormBuilder`

## Methods

### title()

```ts
title(t): this;
```

Defined in: [auto/form.ts:175](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L175)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `t` | `string` |

#### Returns

`this`

***

### subtitle()

```ts
subtitle(s): this;
```

Defined in: [auto/form.ts:176](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L176)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `s` | `string` |

#### Returns

`this`

***

### submit()

```ts
submit(label): this;
```

Defined in: [auto/form.ts:177](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L177)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `label` | `string` |

#### Returns

`this`

***

### onSubmit()

```ts
onSubmit(action): this;
```

Defined in: [auto/form.ts:178](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L178)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `action` | | [`Action`](../../actions/interfaces/Action.md) | [`Action`](../../actions/interfaces/Action.md)\[] |

#### Returns

`this`

***

### successMessage()

```ts
successMessage(msg): this;
```

Defined in: [auto/form.ts:179](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L179)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `msg` | `string` |

#### Returns

`this`

***

### errorMessage()

```ts
errorMessage(msg): this;
```

Defined in: [auto/form.ts:180](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L180)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `msg` | `string` |

#### Returns

`this`

***

### field()

```ts
field(name, opts?): this;
```

Defined in: [auto/form.ts:183](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L183)

Add a field with explicit type.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `name` | `string` |
| `opts?` | `Omit`<[`AutoFormField`](../interfaces/AutoFormField.md), `"name"`> |

#### Returns

`this`

***

### text()

```ts
text(name, opts?): this;
```

Defined in: [auto/form.ts:189](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L189)

Shorthand for type: 'text'.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `name` | `string` |
| `opts?` | `Omit`<[`AutoFormField`](../interfaces/AutoFormField.md), `"type"` | `"name"`> |

#### Returns

`this`

***

### email()

```ts
email(name, opts?): this;
```

Defined in: [auto/form.ts:194](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L194)

Shorthand for type: 'email'.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `name` | `string` |
| `opts?` | `Omit`<[`AutoFormField`](../interfaces/AutoFormField.md), `"type"` | `"name"`> |

#### Returns

`this`

***

### number()

```ts
number(name, opts?): this;
```

Defined in: [auto/form.ts:199](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L199)

Shorthand for type: 'number'.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `name` | `string` |
| `opts?` | `Omit`<[`AutoFormField`](../interfaces/AutoFormField.md), `"type"` | `"name"`> |

#### Returns

`this`

***

### password()

```ts
password(name, opts?): this;
```

Defined in: [auto/form.ts:204](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L204)

Shorthand for type: 'password'.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `name` | `string` |
| `opts?` | `Omit`<[`AutoFormField`](../interfaces/AutoFormField.md), `"type"` | `"name"`> |

#### Returns

`this`

***

### url()

```ts
url(name, opts?): this;
```

Defined in: [auto/form.ts:209](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L209)

Shorthand for type: 'url'.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `name` | `string` |
| `opts?` | `Omit`<[`AutoFormField`](../interfaces/AutoFormField.md), `"type"` | `"name"`> |

#### Returns

`this`

***

### tel()

```ts
tel(name, opts?): this;
```

Defined in: [auto/form.ts:214](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L214)

Shorthand for type: 'tel'.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `name` | `string` |
| `opts?` | `Omit`<[`AutoFormField`](../interfaces/AutoFormField.md), `"type"` | `"name"`> |

#### Returns

`this`

***

### build()

```ts
build(): ContainerComponent;
```

Defined in: [auto/form.ts:219](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L219)

Build the form component tree.

#### Returns

`ContainerComponent`

---

---
url: /prefab/reference/api/auto/interfaces/AutoChartOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / AutoChartOptions

# Interface: AutoChartOptions

Defined in: [auto/chart.ts:16](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/chart.ts#L16)

## Properties

### title?

```ts
optional title?: string;
```

Defined in: [auto/chart.ts:18](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/chart.ts#L18)

Chart heading.

***

### subtitle?

```ts
optional subtitle?: string;
```

Defined in: [auto/chart.ts:20](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/chart.ts#L20)

Optional subtitle.

***

### chartType?

```ts
optional chartType?: ChartType;
```

Defined in: [auto/chart.ts:22](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/chart.ts#L22)

Chart type. Default 'bar'.

***

### xAxis?

```ts
optional xAxis?: string;
```

Defined in: [auto/chart.ts:24](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/chart.ts#L24)

Key in data to use as X axis (e.g. 'month').

***

### height?

```ts
optional height?: number;
```

Defined in: [auto/chart.ts:26](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/chart.ts#L26)

Chart height in pixels.

***

### showLegend?

```ts
optional showLegend?: boolean;
```

Defined in: [auto/chart.ts:28](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/chart.ts#L28)

Show legend. Default true.

---

---
url: /prefab/reference/api/auto/interfaces/AutoComparisonOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / AutoComparisonOptions

# Interface: AutoComparisonOptions

Defined in: [auto/comparison.ts:15](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/comparison.ts#L15)

## Properties

### title?

```ts
optional title?: string;
```

Defined in: [auto/comparison.ts:17](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/comparison.ts#L17)

Heading above the comparison.

***

### subtitle?

```ts
optional subtitle?: string;
```

Defined in: [auto/comparison.ts:19](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/comparison.ts#L19)

Optional subtitle.

***

### highlightKey?

```ts
optional highlightKey?: string;
```

Defined in: [auto/comparison.ts:21](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/comparison.ts#L21)

Key whose value gets a colored Badge for emphasis.

***

### columns?

```ts
optional columns?: number;
```

Defined in: [auto/comparison.ts:23](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/comparison.ts#L23)

Number of grid columns. Defaults to number of items (max 4).

---

---
url: /prefab/reference/api/auto/interfaces/AutoFormField.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / AutoFormField

# Interface: AutoFormField

Defined in: [auto/form.ts:31](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L31)

One field in an auto-generated form.

The same definition drives both delivery paths: [autoForm](../functions/autoForm.md) renders it as
prefab components, and `formSchema` in `src/mcp/input-required.ts` derives the
restricted elicitation JSON Schema from it for hosts with no UI surface. Keep
anything added here expressible in both.

## Properties

### name

```ts
name: string;
```

Defined in: [auto/form.ts:33](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L33)

Field name (used as the key in submitted data).

***

### label?

```ts
optional label?: string;
```

Defined in: [auto/form.ts:35](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L35)

Display label. Defaults to humanized name.

***

### type?

```ts
optional type?: string;
```

Defined in: [auto/form.ts:37](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L37)

Input type: 'text', 'email', 'number', 'password', 'url', etc.

***

### placeholder?

```ts
optional placeholder?: string;
```

Defined in: [auto/form.ts:39](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L39)

Placeholder text.

***

### required?

```ts
optional required?: boolean;
```

Defined in: [auto/form.ts:41](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L41)

Whether the field is required.

***

### description?

```ts
optional description?: string;
```

Defined in: [auto/form.ts:43](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L43)

Longer help text. Becomes the schema `description` on the elicitation path.

***

### options?

```ts
optional options?: AutoFormOption[];
```

Defined in: [auto/form.ts:45](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L45)

Fixed set of choices. Renders as a Select and becomes an enum on the wire.

***

### multiple?

```ts
optional multiple?: boolean;
```

Defined in: [auto/form.ts:47](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L47)

Allow several choices. Only meaningful alongside `options`.

***

### min?

```ts
optional min?: number;
```

Defined in: [auto/form.ts:49](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L49)

Inclusive lower bound for a numeric field, or minimum length for a string.

***

### max?

```ts
optional max?: number;
```

Defined in: [auto/form.ts:51](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L51)

Inclusive upper bound for a numeric field, or maximum length for a string.

***

### default?

```ts
optional default?: string | number | boolean | string[];
```

Defined in: [auto/form.ts:53](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L53)

Pre-filled value.

---

---
url: /prefab/reference/api/auto/interfaces/AutoFormOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / AutoFormOptions

# Interface: AutoFormOptions

Defined in: [auto/form.ts:56](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L56)

## Extended by

* [`DisplayFormOptions`](../../mcp/interfaces/DisplayFormOptions.md)

## Properties

### title?

```ts
optional title?: string;
```

Defined in: [auto/form.ts:58](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L58)

Form heading.

***

### subtitle?

```ts
optional subtitle?: string;
```

Defined in: [auto/form.ts:60](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L60)

Optional subtitle.

***

### submitLabel?

```ts
optional submitLabel?: string;
```

Defined in: [auto/form.ts:62](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L62)

Submit button text. Default 'Submit'.

***

### onSubmit?

```ts
optional onSubmit?: 
  | Action
  | Action[];
```

Defined in: [auto/form.ts:64](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L64)

Custom onSubmit action. Overrides submitTool.

***

### successMessage?

```ts
optional successMessage?: string;
```

Defined in: [auto/form.ts:66](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L66)

Success toast message.

***

### errorMessage?

```ts
optional errorMessage?: string;
```

Defined in: [auto/form.ts:68](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L68)

Error toast message.

---

---
url: /prefab/reference/api/auto/interfaces/AutoDetailOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / AutoDetailOptions

# Interface: AutoDetailOptions

Defined in: [auto/index.ts:113](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/index.ts#L113)

## Properties

### title?

```ts
optional title?: string;
```

Defined in: [auto/index.ts:115](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/index.ts#L115)

Title shown at the top of the card. Defaults to auto-detect from data.

***

### exclude?

```ts
optional exclude?: string[];
```

Defined in: [auto/index.ts:117](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/index.ts#L117)

Fields to exclude from the detail view.

***

### include?

```ts
optional include?: string[];
```

Defined in: [auto/index.ts:119](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/index.ts#L119)

Fields to include (if set, only these are shown).

***

### maxDepth?

```ts
optional maxDepth?: number;
```

Defined in: [auto/index.ts:121](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/index.ts#L121)

Max nested depth to render (default 1).

---

---
url: /prefab/reference/api/auto/interfaces/AutoTableOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / AutoTableOptions

# Interface: AutoTableOptions

Defined in: [auto/index.ts:240](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/index.ts#L240)

## Properties

### title?

```ts
optional title?: string;
```

Defined in: [auto/index.ts:242](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/index.ts#L242)

Title shown above the table.

***

### columns?

```ts
optional columns?: DataTableColumnDef[];
```

Defined in: [auto/index.ts:244](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/index.ts#L244)

Override column definitions. If not set, auto-inferred from first row.

***

### exclude?

```ts
optional exclude?: string[];
```

Defined in: [auto/index.ts:246](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/index.ts#L246)

Fields to exclude from auto-generated columns.

***

### search?

```ts
optional search?: boolean;
```

Defined in: [auto/index.ts:248](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/index.ts#L248)

Enable search. Default true.

***

### sortable?

```ts
optional sortable?: boolean;
```

Defined in: [auto/index.ts:250](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/index.ts#L250)

Make all columns sortable. Default true.

---

---
url: /prefab/reference/api/auto/interfaces/AutoMetricDef.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / AutoMetricDef

# Interface: AutoMetricDef

Defined in: [auto/metrics.ts:14](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/metrics.ts#L14)

## Properties

### label

```ts
label: string;
```

Defined in: [auto/metrics.ts:16](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/metrics.ts#L16)

Metric label (e.g. 'Revenue').

***

### value

```ts
value: string;
```

Defined in: [auto/metrics.ts:18](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/metrics.ts#L18)

Metric value (e.g. '$42K').

***

### delta?

```ts
optional delta?: string;
```

Defined in: [auto/metrics.ts:20](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/metrics.ts#L20)

Delta string (e.g. '+12%').

***

### trend?

```ts
optional trend?: "flat" | "up" | "down";
```

Defined in: [auto/metrics.ts:22](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/metrics.ts#L22)

Trend direction.

***

### trendSentiment?

```ts
optional trendSentiment?: "positive" | "negative" | "neutral";
```

Defined in: [auto/metrics.ts:24](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/metrics.ts#L24)

Trend sentiment (positive = green, negative = red).

***

### description?

```ts
optional description?: string;
```

Defined in: [auto/metrics.ts:26](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/metrics.ts#L26)

Description text below the metric.

***

### sparkline?

```ts
optional sparkline?: number[];
```

Defined in: [auto/metrics.ts:28](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/metrics.ts#L28)

Sparkline data points.

---

---
url: /prefab/reference/api/auto/interfaces/AutoMetricsOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / AutoMetricsOptions

# Interface: AutoMetricsOptions

Defined in: [auto/metrics.ts:31](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/metrics.ts#L31)

## Properties

### title?

```ts
optional title?: string;
```

Defined in: [auto/metrics.ts:33](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/metrics.ts#L33)

Dashboard heading.

***

### subtitle?

```ts
optional subtitle?: string;
```

Defined in: [auto/metrics.ts:35](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/metrics.ts#L35)

Optional subtitle.

***

### columns?

```ts
optional columns?: number;
```

Defined in: [auto/metrics.ts:37](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/metrics.ts#L37)

Number of grid columns. Default 4.

---

---
url: /prefab/reference/api/auto/interfaces/AutoProgressStep.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / AutoProgressStep

# Interface: AutoProgressStep

Defined in: [auto/progress.ts:20](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/progress.ts#L20)

## Properties

### label

```ts
label: string;
```

Defined in: [auto/progress.ts:22](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/progress.ts#L22)

Step label.

***

### status

```ts
status: "completed" | "active" | "pending";
```

Defined in: [auto/progress.ts:24](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/progress.ts#L24)

Step status: 'completed', 'active', or 'pending'.

***

### description?

```ts
optional description?: string;
```

Defined in: [auto/progress.ts:26](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/progress.ts#L26)

Optional description.

---

---
url: /prefab/reference/api/auto/interfaces/AutoProgressOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / AutoProgressOptions

# Interface: AutoProgressOptions

Defined in: [auto/progress.ts:29](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/progress.ts#L29)

## Properties

### title?

```ts
optional title?: string;
```

Defined in: [auto/progress.ts:31](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/progress.ts#L31)

Progress tracker heading.

***

### subtitle?

```ts
optional subtitle?: string;
```

Defined in: [auto/progress.ts:33](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/progress.ts#L33)

Optional subtitle.

---

---
url: /prefab/reference/api/auto/interfaces/JsonSchemaNode.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / JsonSchemaNode

# Interface: JsonSchemaNode

Defined in: [auto/schema.ts:45](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L45)

The JSON Schema keywords a form field can express, read structurally.

Deliberately not a full JSON Schema type: this reads schemas from anywhere
(TypeBox, Zod, a hand-written spec, an OpenAPI document) and only the
keywords below survive the crossing into a control.

## Properties

### type?

```ts
optional type?: string | string[];
```

Defined in: [auto/schema.ts:46](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L46)

***

### format?

```ts
optional format?: string;
```

Defined in: [auto/schema.ts:47](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L47)

***

### title?

```ts
optional title?: string;
```

Defined in: [auto/schema.ts:48](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L48)

***

### description?

```ts
optional description?: string;
```

Defined in: [auto/schema.ts:49](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L49)

***

### enum?

```ts
optional enum?: unknown[];
```

Defined in: [auto/schema.ts:50](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L50)

***

### const?

```ts
optional const?: unknown;
```

Defined in: [auto/schema.ts:51](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L51)

***

### default?

```ts
optional default?: unknown;
```

Defined in: [auto/schema.ts:52](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L52)

***

### properties?

```ts
optional properties?: Record<string, JsonSchemaNode>;
```

Defined in: [auto/schema.ts:53](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L53)

***

### required?

```ts
optional required?: string[];
```

Defined in: [auto/schema.ts:54](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L54)

***

### items?

```ts
optional items?: JsonSchemaNode;
```

Defined in: [auto/schema.ts:55](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L55)

***

### anyOf?

```ts
optional anyOf?: JsonSchemaNode[];
```

Defined in: [auto/schema.ts:56](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L56)

***

### oneOf?

```ts
optional oneOf?: JsonSchemaNode[];
```

Defined in: [auto/schema.ts:57](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L57)

***

### minimum?

```ts
optional minimum?: number;
```

Defined in: [auto/schema.ts:58](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L58)

***

### maximum?

```ts
optional maximum?: number;
```

Defined in: [auto/schema.ts:59](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L59)

***

### minLength?

```ts
optional minLength?: number;
```

Defined in: [auto/schema.ts:60](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L60)

***

### maxLength?

```ts
optional maxLength?: number;
```

Defined in: [auto/schema.ts:61](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L61)

***

### minItems?

```ts
optional minItems?: number;
```

Defined in: [auto/schema.ts:62](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L62)

***

### maxItems?

```ts
optional maxItems?: number;
```

Defined in: [auto/schema.ts:63](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L63)

***

### readOnly?

```ts
optional readOnly?: boolean;
```

Defined in: [auto/schema.ts:64](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L64)

---

---
url: /prefab/reference/api/auto/interfaces/FieldsFromJsonSchemaOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / FieldsFromJsonSchemaOptions

# Interface: FieldsFromJsonSchemaOptions

Defined in: [auto/schema.ts:67](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L67)

## Properties

### exclude?

```ts
optional exclude?: string[];
```

Defined in: [auto/schema.ts:69](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L69)

Property names to leave out (server-managed keys, path params already known).

***

### include?

```ts
optional include?: string[];
```

Defined in: [auto/schema.ts:74](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L74)

Property names to keep, in this order. Anything else is dropped, and a name
the schema does not declare is ignored rather than invented.

***

### includeReadOnly?

```ts
optional includeReadOnly?: boolean;
```

Defined in: [auto/schema.ts:79](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L79)

Emit a field for every property, including ones already marked
`readOnly: true` in the schema.

#### Default

```ts
false
```

---

---
url: /prefab/reference/api/auto/interfaces/AutoTimelineEvent.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / AutoTimelineEvent

# Interface: AutoTimelineEvent

Defined in: [auto/timeline.ts:26](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/timeline.ts#L26)

## Properties

### title

```ts
title: string;
```

Defined in: [auto/timeline.ts:28](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/timeline.ts#L28)

Event title.

***

### timestamp

```ts
timestamp: string;
```

Defined in: [auto/timeline.ts:30](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/timeline.ts#L30)

Timestamp string.

***

### description?

```ts
optional description?: string;
```

Defined in: [auto/timeline.ts:32](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/timeline.ts#L32)

Optional description.

***

### status?

```ts
optional status?: string;
```

Defined in: [auto/timeline.ts:34](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/timeline.ts#L34)

Status string — mapped to dot color.

***

### badge?

```ts
optional badge?: string;
```

Defined in: [auto/timeline.ts:36](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/timeline.ts#L36)

Badge text.

***

### badgeVariant?

```ts
optional badgeVariant?: BadgeVariant;
```

Defined in: [auto/timeline.ts:38](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/timeline.ts#L38)

Badge variant.

---

---
url: /prefab/reference/api/auto/interfaces/AutoTimelineOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / AutoTimelineOptions

# Interface: AutoTimelineOptions

Defined in: [auto/timeline.ts:41](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/timeline.ts#L41)

## Properties

### title?

```ts
optional title?: string;
```

Defined in: [auto/timeline.ts:43](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/timeline.ts#L43)

Timeline heading.

***

### subtitle?

```ts
optional subtitle?: string;
```

Defined in: [auto/timeline.ts:45](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/timeline.ts#L45)

Optional subtitle.

---

---
url: /prefab/reference/api/auto/type-aliases/ChartType.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / ChartType

# Type Alias: ChartType

```ts
type ChartType = "bar" | "line" | "area" | "pie";
```

Defined in: [auto/chart.ts:14](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/chart.ts#L14)

---

---
url: /prefab/reference/api/auto/functions/autoChart.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / autoChart

# Function: autoChart()

```ts
function autoChart(
   data, 
   series, 
   options?): ContainerComponent;
```

Defined in: [auto/chart.ts:43](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/chart.ts#L43)

Auto-generate a chart Card from data and series definitions.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `data` | `Record`<`string`, `unknown`>\[] |
| `series` | `ChartSeries`\[] |
| `options?` | [`AutoChartOptions`](../interfaces/AutoChartOptions.md) |

## Returns

`ContainerComponent`

## Example

```ts
autoChart(
  [{ month: 'Jan', revenue: 42000, cost: 31000 }],
  [{ dataKey: 'revenue', label: 'Revenue' }, { dataKey: 'cost', label: 'Cost' }],
  { title: 'Monthly Revenue', xAxis: 'month', chartType: 'bar' },
)
```

---

---
url: /prefab/reference/api/auto/functions/autoComparison.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / autoComparison

# Function: autoComparison()

```ts
function autoComparison(items, options?): ContainerComponent;
```

Defined in: [auto/comparison.ts:40](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/comparison.ts#L40)

Auto-generate a side-by-side comparison of items.

Uses the first key of each item as the card heading.
Remaining keys are shown as labeled rows.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `items` | `Record`<`string`, `unknown`>\[] |
| `options?` | [`AutoComparisonOptions`](../interfaces/AutoComparisonOptions.md) |

## Returns

`ContainerComponent`

## Example

```ts
autoComparison([
  { name: 'Plan A', price: '$10/mo', storage: '5GB' },
  { name: 'Plan B', price: '$20/mo', storage: '50GB' },
], { title: 'Plan Comparison', highlightKey: 'price' })
```

---

---
url: /prefab/reference/api/auto/functions/autoForm.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / autoForm

# Function: autoForm()

```ts
function autoForm(
   fields, 
   submitTool, 
   options?): ContainerComponent;
```

Defined in: [auto/form.ts:86](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L86)

Auto-generate a Form that calls an MCP tool on submit.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `fields` | [`AutoFormField`](../interfaces/AutoFormField.md)\[] |
| `submitTool` | `string` |
| `options?` | [`AutoFormOptions`](../interfaces/AutoFormOptions.md) |

## Returns

`ContainerComponent`

## Example

```ts
autoForm(
  [
    { name: 'email', label: 'Email', type: 'email', required: true },
    { name: 'name', label: 'Full Name', required: true },
  ],
  'create_user',
  { title: 'Create User', submitLabel: 'Create' },
)
```

---

---
url: /prefab/reference/api/auto/functions/QuickForm.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / QuickForm

# Function: QuickForm()

```ts
function QuickForm(toolName): QuickFormBuilder;
```

Defined in: [auto/form.ts:232](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L232)

Factory function for the chainable QuickForm builder.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `toolName` | `string` |

## Returns

[`QuickFormBuilder`](../classes/QuickFormBuilder.md)

---

---
url: /prefab/reference/api/auto/functions/statusVariant.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / statusVariant

# Function: statusVariant()

```ts
function statusVariant(status): BadgeVariant;
```

Defined in: [auto/index.ts:83](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/index.ts#L83)

Get a Badge variant for a status string.
Falls back to 'outline' for unknown statuses.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `status` | `string` |

## Returns

`BadgeVariant`

---

---
url: /prefab/reference/api/auto/functions/registerStatusVariants.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / registerStatusVariants

# Function: registerStatusVariants()

```ts
function registerStatusVariants(mappings): void;
```

Defined in: [auto/index.ts:91](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/index.ts#L91)

Register additional status→variant mappings.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `mappings` | `Record`<`string`, `BadgeVariant`> |

## Returns

`void`

---

---
url: /prefab/reference/api/auto/functions/autoDetail.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / autoDetail

# Function: autoDetail()

```ts
function autoDetail(data, options?): ContainerComponent;
```

Defined in: [auto/index.ts:139](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/index.ts#L139)

Auto-generate a detail Card from a data object.

Inspects value types and renders:

* Booleans → Badge (Yes/No)
* Status-like strings → Badge with variant
* Dates → Text with tabular-nums class
* Nested objects → sub-section
* Everything else → Text

## Parameters

| Parameter | Type |
| ------ | ------ |
| `data` | `Record`<`string`, `unknown`> |
| `options?` | [`AutoDetailOptions`](../interfaces/AutoDetailOptions.md) |

## Returns

`ContainerComponent`

## Example

```ts
autoDetail({ name: 'John', status: 'active', createdAt: '2024-01-01' })
```

---

---
url: /prefab/reference/api/auto/functions/autoTable.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / autoTable

# Function: autoTable()

```ts
function autoTable(rows, options?): ContainerComponent;
```

Defined in: [auto/index.ts:267](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/index.ts#L267)

Auto-generate a DataTable from an array of objects.

Infers columns from the first row's keys, skipping nested objects/arrays.
Wraps in a Column with a title and record count badge.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `rows` | `Record`<`string`, `unknown`>\[] |
| `options?` | [`AutoTableOptions`](../interfaces/AutoTableOptions.md) |

## Returns

`ContainerComponent`

## Example

```ts
autoTable([
  { name: 'John', email: 'john@example.com', age: 30 },
  { name: 'Jane', email: 'jane@example.com', age: 25 },
], { title: 'Users' })
```

---

---
url: /prefab/reference/api/auto/functions/autoMetrics.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / autoMetrics

# Function: autoMetrics()

```ts
function autoMetrics(metrics, options?): ContainerComponent;
```

Defined in: [auto/metrics.ts:52](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/metrics.ts#L52)

Auto-generate a KPI dashboard grid.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `metrics` | [`AutoMetricDef`](../interfaces/AutoMetricDef.md)\[] |
| `options?` | [`AutoMetricsOptions`](../interfaces/AutoMetricsOptions.md) |

## Returns

`ContainerComponent`

## Example

```ts
autoMetrics([
  { label: 'Revenue', value: '$42K', delta: '+12%', trend: 'up', trendSentiment: 'positive', sparkline: [10, 25, 18, 30, 42] },
  { label: 'Users', value: '1,234', delta: '+5%', trend: 'up', trendSentiment: 'positive' },
  { label: 'Errors', value: '3', delta: '-80%', trend: 'down', trendSentiment: 'positive' },
], { title: 'Dashboard', columns: 3 })
```

---

---
url: /prefab/reference/api/auto/functions/autoProgress.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / autoProgress

# Function: autoProgress()

```ts
function autoProgress(steps, options?): ContainerComponent;
```

Defined in: [auto/progress.ts:52](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/progress.ts#L52)

Auto-generate a multi-step progress tracker.

Calculates overall completion percentage and renders a Progress bar
followed by step cards with status indicators.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `steps` | [`AutoProgressStep`](../interfaces/AutoProgressStep.md)\[] |
| `options?` | [`AutoProgressOptions`](../interfaces/AutoProgressOptions.md) |

## Returns

`ContainerComponent`

## Example

```ts
autoProgress([
  { label: 'Order Placed', status: 'completed' },
  { label: 'Processing', status: 'active', description: 'Preparing shipment' },
  { label: 'Shipped', status: 'pending' },
  { label: 'Delivered', status: 'pending' },
], { title: 'Order Status' })
```

---

---
url: /prefab/reference/api/auto/functions/fieldsFromJsonSchema.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / fieldsFromJsonSchema

# Function: fieldsFromJsonSchema()

```ts
function fieldsFromJsonSchema(schema, options?): AutoFormField[];
```

Defined in: [auto/schema.ts:265](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/schema.ts#L265)

Derive `autoForm` fields from a JSON Schema object.

Returns an empty list for anything that is not an object schema with
properties, so a caller can hand over whatever a route declared and branch on
the result rather than pre-checking the shape.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `schema` | `unknown` |
| `options?` | [`FieldsFromJsonSchemaOptions`](../interfaces/FieldsFromJsonSchemaOptions.md) |

## Returns

[`AutoFormField`](../interfaces/AutoFormField.md)\[]

---

---
url: /prefab/reference/api/auto/functions/autoTimeline.md
---
[@maxhealth.tech/prefab](../../index.md) / [auto](../index.md) / autoTimeline

# Function: autoTimeline()

```ts
function autoTimeline(events, options?): ContainerComponent;
```

Defined in: [auto/timeline.ts:60](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/timeline.ts#L60)

Auto-generate a chronological timeline.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `events` | [`AutoTimelineEvent`](../interfaces/AutoTimelineEvent.md)\[] |
| `options?` | [`AutoTimelineOptions`](../interfaces/AutoTimelineOptions.md) |

## Returns

`ContainerComponent`

## Example

```ts
autoTimeline([
  { title: 'Order placed', timestamp: '2026-04-20 10:30', status: 'completed', badge: 'Done', badgeVariant: 'success' },
  { title: 'Processing', timestamp: '2026-04-20 11:00', status: 'active' },
  { title: 'Shipped', timestamp: '', status: 'pending' },
], { title: 'Order Timeline' })
```

---

---
url: /prefab/reference/api/mcp.md
---
[@maxhealth.tech/prefab](../index.md) / mcp

# mcp

## Interfaces

| Interface | Description |
| ------ | ------ |
| [DisplayA2uiOptions](interfaces/DisplayA2uiOptions.md) | - |
| [A2uiResourceOptions](interfaces/A2uiResourceOptions.md) | - |
| [DisplayOptions](interfaces/DisplayOptions.md) | - |
| [DisplayFormOptions](interfaces/DisplayFormOptions.md) | - |
| [StateUpdate](interfaces/StateUpdate.md) | - |
| [DisplayUpdateOptions](interfaces/DisplayUpdateOptions.md) | - |
| [DisplayErrorOptions](interfaces/DisplayErrorOptions.md) | - |
| [DisplaySuccessOptions](interfaces/DisplaySuccessOptions.md) | - |
| [FormInputRequestOptions](interfaces/FormInputRequestOptions.md) | - |
| [McpAppCsp](interfaces/McpAppCsp.md) | CSP configuration for MCP Apps resources. |
| [McpAppPermissions](interfaces/McpAppPermissions.md) | Permission Policy requests for MCP Apps resources. |
| [ResourceMetaOptions](interfaces/ResourceMetaOptions.md) | - |
| [RendererHtmlOptions](interfaces/RendererHtmlOptions.md) | - |
| [ViewerResourceOptions](interfaces/ViewerResourceOptions.md) | - |
| [ResourceConfig](interfaces/ResourceConfig.md) | Registration config accepted by both SDK generations. |
| [McpServerLike](interfaces/McpServerLike.md) | MCP server interface expected by registerViewerResource. |
| [ToolResultOptions](interfaces/ToolResultOptions.md) | - |
| [VsCodeTokenSource](interfaces/VsCodeTokenSource.md) | How one prefab token is sourced from the VS Code webview. |

## Type Aliases

| Type Alias | Description |
| ------ | ------ |
| [PrefabUpdateWire](type-aliases/PrefabUpdateWire.md) | The `$prefab` state-delta payload, sent as `structuredContent`. |
| [FormValue](type-aliases/FormValue.md) | Values a client may return for one field. |
| [ResourceReadHandler](type-aliases/ResourceReadHandler.md) | `resources/read` handler shape passed to the server — the viewer is always HTML text. |
| [ThemeBridge](type-aliases/ThemeBridge.md) | Supported theme bridges. |
| [McpTextContent](type-aliases/McpTextContent.md) | MCP text content block (compatible with SDK's TextContent) |
| [McpImageContent](type-aliases/McpImageContent.md) | MCP image content block (compatible with SDK's ImageContent) |
| [McpTextResourceContents](type-aliases/McpTextResourceContents.md) | Text resource contents (has `text`, never `blob`). |
| [McpBlobResourceContents](type-aliases/McpBlobResourceContents.md) | Blob resource contents (has `blob`, never `text`). See [McpTextResourceContents](type-aliases/McpTextResourceContents.md) on the alias. |
| [McpResourceContent](type-aliases/McpResourceContent.md) | MCP embedded resource content block (compatible with SDK's EmbeddedResource) |
| [McpContent](type-aliases/McpContent.md) | Any MCP content block |
| [McpToolResult](type-aliases/McpToolResult.md) | MCP tool result — returned from tool handlers. |
| [McpDisplayResult](type-aliases/McpDisplayResult.md) | A tool result whose `structuredContent` is guaranteed present. |
| [McpCacheScope](type-aliases/McpCacheScope.md) | Cache scopes defined for cacheable results. |
| [McpCacheHint](type-aliases/McpCacheHint.md) | Cache fields required on results from the cacheable operations (`tools/list`, `prompts/list`, `resources/list`, `resources/templates/list`, `resources/read`, `server/discover`). |
| [McpResourceReadResult](type-aliases/McpResourceReadResult.md) | A `resources/read` result carrying the required cache fields. |
| [McpStringSchema](type-aliases/McpStringSchema.md) | The restricted JSON Schema an elicitation may request. |
| [McpNumberSchema](type-aliases/McpNumberSchema.md) | - |
| [McpBooleanSchema](type-aliases/McpBooleanSchema.md) | - |
| [McpEnumSchema](type-aliases/McpEnumSchema.md) | Single selection: a string constrained to a fixed set of values. |
| [McpMultiEnumSchema](type-aliases/McpMultiEnumSchema.md) | Multiple selection: an array of values drawn from a fixed set. |
| [McpPrimitiveSchema](type-aliases/McpPrimitiveSchema.md) | - |
| [McpRestrictedSchema](type-aliases/McpRestrictedSchema.md) | The flat object schema an `elicitation/create` request asks the client to fill. |
| [McpElicitFormRequest](type-aliases/McpElicitFormRequest.md) | Form-mode elicitation: the client renders the schema and returns the values. |
| [McpElicitUrlRequest](type-aliases/McpElicitUrlRequest.md) | URL-mode elicitation: the client sends the user out of band and reports back. |
| [McpElicitRequest](type-aliases/McpElicitRequest.md) | - |
| [McpInputRequests](type-aliases/McpInputRequests.md) | Server-issued requests the client must fulfil before retrying the call. |
| [McpElicitResult](type-aliases/McpElicitResult.md) | What the client sends back for one request, keyed the same way. |
| [McpInputResponses](type-aliases/McpInputResponses.md) | - |
| [McpInputRequiredResult](type-aliases/McpInputRequiredResult.md) | A result asking the client for input before the call can complete. |

## Variables

| Variable | Description |
| ------ | ------ |
| [A2UI\_RESOURCE\_URI](variables/A2UI_RESOURCE_URI.md) | Default URI for a server that serves a single A2UI surface. |
| [displayA2ui](variables/displayA2ui.md) | camelCase alias, matching the other display helpers. |
| [displayForm](variables/displayForm.md) | MCP display helpers — return prefab UIs as MCP tool results. |
| [displayUpdate](variables/displayUpdate.md) | MCP display helpers — return prefab UIs as MCP tool results. |
| [displayError](variables/displayError.md) | MCP display helpers — return prefab UIs as MCP tool results. |
| [displaySuccess](variables/displaySuccess.md) | MCP display helpers — return prefab UIs as MCP tool results. |
| [PREFAB\_CDN\_META](variables/PREFAB_CDN_META.md) | Default CSP meta for prefab apps using jsDelivr CDN. |
| [PREFAB\_RESOURCE\_URI](variables/PREFAB_RESOURCE_URI.md) | Default URI for the prefab viewer resource. |
| [MCP\_APP\_MIME](variables/MCP_APP_MIME.md) | MIME type required by MCP Apps hosts. |
| [APPS\_EXTENSION](variables/APPS_EXTENSION.md) | Capability key for the MCP Apps extension (versioned independently of core). |
| [DEFAULT\_VIEWER\_CACHE](variables/DEFAULT_VIEWER_CACHE.md) | Default cache hint for the viewer resource. |
| [VSCODE\_BRIDGE](variables/VSCODE_BRIDGE.md) | prefab tokens that VS Code can supply, with the same variables and static fallbacks `prefab.css` uses. Tokens VS Code has no equivalent for (`--success`, `--warning`, shadows, radii) are deliberately absent: the bridge only overrides what the editor can actually provide. |

## Functions

| Function | Description |
| ------ | ------ |
| [a2uiPayload](functions/a2uiPayload.md) | Wrap messages in the list envelope A2UI defines for non-streaming transports. |
| [display\_a2ui](functions/display_a2ui.md) | Return a view as an A2UI tool result. |
| [registerA2uiResource](functions/registerA2uiResource.md) | Register a static A2UI surface as an `a2ui://` resource. |
| [display](functions/display.md) | MCP display helpers — return prefab UIs as MCP tool results. |
| [display\_form](functions/display_form.md) | MCP display helpers — return prefab UIs as MCP tool results. |
| [display\_update](functions/display_update.md) | MCP display helpers — return prefab UIs as MCP tool results. |
| [display\_error](functions/display_error.md) | MCP display helpers — return prefab UIs as MCP tool results. |
| [display\_success](functions/display_success.md) | MCP display helpers — return prefab UIs as MCP tool results. |
| [formSchema](functions/formSchema.md) | Derive the restricted elicitation schema from form fields. |
| [formInputRequest](functions/formInputRequest.md) | Ask the client to collect these fields, then retry the call. |
| [inputResponse](functions/inputResponse.md) | A client's answer for one key, or `undefined` when it has not arrived yet. |
| [acceptedFormInput](functions/acceptedFormInput.md) | Read and check an accepted form answer. |
| [resourceMeta](functions/resourceMeta.md) | Generate the `_meta` object for MCP Apps `ui://` resource registration. |
| [rendererHtml](functions/rendererHtml.md) | Generate the HTML page for a prefab MCP Apps viewer resource. |
| [resolveCache](functions/resolveCache.md) | Fill in and validate the `CacheableResult` fields, rejecting values the SDK would silently discard in favour of `ttlMs: 0`. |
| [registerViewerResource](functions/registerViewerResource.md) | Register the prefab viewer as a `ui://` resource on an MCP server. |
| [toolResult](functions/toolResult.md) | Wrap a JSON payload as an MCP tool result. |
| [themeBridgeCss](functions/themeBridgeCss.md) | Generate the theme-bridge CSS (the contents of a `<style>` element). |

---

---
url: /prefab/reference/api/mcp/interfaces/DisplayA2uiOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / DisplayA2uiOptions

# Interface: DisplayA2uiOptions

Defined in: [mcp/a2ui.ts:55](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/a2ui.ts#L55)

## Extends

* `A2uiEmitOptions`

## Properties

### surfaceId?

```ts
optional surfaceId?: string;
```

Defined in: [a2ui/emit.ts:45](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/a2ui/emit.ts#L45)

Surface id. Must be unique for the renderer's lifetime.

#### Default

```ts
'prefab'
```

#### Inherited from

```ts
A2uiEmitOptions.surfaceId
```

***

### catalogId?

```ts
optional catalogId?: string;
```

Defined in: [a2ui/emit.ts:50](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/a2ui/emit.ts#L50)

Catalog the surface's components are drawn from.

#### Default

```ts
the A2UI Basic catalog
```

#### Inherited from

```ts
A2uiEmitOptions.catalogId
```

***

### stream?

```ts
optional stream?: boolean;
```

Defined in: [a2ui/emit.ts:57](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/a2ui/emit.ts#L57)

Split the output into `createSurface` + `updateComponents` +
`updateDataModel` instead of inlining everything into `createSurface`.
Streaming transports want the split so the renderer can paint early; a
single stored payload does not.

#### Default

```ts
false
```

#### Inherited from

```ts
A2uiEmitOptions.stream
```

***

### sendDataModel?

```ts
optional sendDataModel?: boolean;
```

Defined in: [a2ui/emit.ts:59](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/a2ui/emit.ts#L59)

Ask the renderer to echo the data model back on every event.

#### Default

```ts
false
```

#### Inherited from

```ts
A2uiEmitOptions.sendDataModel
```

***

### warn?

```ts
optional warn?: boolean;
```

Defined in: [a2ui/emit.ts:61](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/a2ui/emit.ts#L61)

Log degradations and dropped nodes at warn level.

#### Default

```ts
false
```

#### Inherited from

```ts
A2uiEmitOptions.warn
```

***

### uri?

```ts
optional uri?: string;
```

Defined in: [mcp/a2ui.ts:57](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/a2ui.ts#L57)

URI stamped on the embedded resource.

#### Default

```ts
'a2ui://prefab/surface'
```

***

### onDiagnostics?

```ts
optional onDiagnostics?: (diagnostics) => void;
```

Defined in: [mcp/a2ui.ts:63](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/a2ui.ts#L63)

Called with anything lost in translation. Without it, a `degraded` or
`unsupported` diagnostic is logged at warn level, because silently shipping
a lesser UI is the failure mode worth making noisy.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `diagnostics` | `A2uiDiagnostic`\[] |

#### Returns

`void`

---

---
url: /prefab/reference/api/mcp/interfaces/A2uiResourceOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / A2uiResourceOptions

# Interface: A2uiResourceOptions

Defined in: [mcp/a2ui.ts:113](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/a2ui.ts#L113)

## Extends

* `A2uiEmitOptions`

## Properties

### surfaceId?

```ts
optional surfaceId?: string;
```

Defined in: [a2ui/emit.ts:45](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/a2ui/emit.ts#L45)

Surface id. Must be unique for the renderer's lifetime.

#### Default

```ts
'prefab'
```

#### Inherited from

```ts
A2uiEmitOptions.surfaceId
```

***

### catalogId?

```ts
optional catalogId?: string;
```

Defined in: [a2ui/emit.ts:50](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/a2ui/emit.ts#L50)

Catalog the surface's components are drawn from.

#### Default

```ts
the A2UI Basic catalog
```

#### Inherited from

```ts
A2uiEmitOptions.catalogId
```

***

### stream?

```ts
optional stream?: boolean;
```

Defined in: [a2ui/emit.ts:57](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/a2ui/emit.ts#L57)

Split the output into `createSurface` + `updateComponents` +
`updateDataModel` instead of inlining everything into `createSurface`.
Streaming transports want the split so the renderer can paint early; a
single stored payload does not.

#### Default

```ts
false
```

#### Inherited from

```ts
A2uiEmitOptions.stream
```

***

### sendDataModel?

```ts
optional sendDataModel?: boolean;
```

Defined in: [a2ui/emit.ts:59](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/a2ui/emit.ts#L59)

Ask the renderer to echo the data model back on every event.

#### Default

```ts
false
```

#### Inherited from

```ts
A2uiEmitOptions.sendDataModel
```

***

### warn?

```ts
optional warn?: boolean;
```

Defined in: [a2ui/emit.ts:61](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/a2ui/emit.ts#L61)

Log degradations and dropped nodes at warn level.

#### Default

```ts
false
```

#### Inherited from

```ts
A2uiEmitOptions.warn
```

***

### uri?

```ts
optional uri?: string;
```

Defined in: [mcp/a2ui.ts:115](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/a2ui.ts#L115)

Resource URI. Must start with `a2ui://`.

#### Default

```ts
'a2ui://prefab/surface'
```

***

### title?

```ts
optional title?: string;
```

Defined in: [mcp/a2ui.ts:117](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/a2ui.ts#L117)

Resource title shown in listings.

#### Default

```ts
'Prefab Surface'
```

***

### description?

```ts
optional description?: string;
```

Defined in: [mcp/a2ui.ts:119](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/a2ui.ts#L119)

Human-readable description for the listing.

***

### cache?

```ts
optional cache?: McpCacheHint;
```

Defined in: [mcp/a2ui.ts:121](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/a2ui.ts#L121)

Cache fields for the `resources/read` result (SEP-2549).

***

### onDiagnostics?

```ts
optional onDiagnostics?: (diagnostics) => void;
```

Defined in: [mcp/a2ui.ts:123](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/a2ui.ts#L123)

See [DisplayA2uiOptions.onDiagnostics](DisplayA2uiOptions.md#ondiagnostics).

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `diagnostics` | `A2uiDiagnostic`\[] |

#### Returns

`void`

---

---
url: /prefab/reference/api/mcp/interfaces/DisplayOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / DisplayOptions

# Interface: DisplayOptions

Defined in: [mcp/display.ts:37](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L37)

## Extended by

* [`DisplayFormOptions`](DisplayFormOptions.md)

## Properties

### title?

```ts
optional title?: string;
```

Defined in: [mcp/display.ts:39](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L39)

Page / app title.

***

### state?

```ts
optional state?: Record<string, unknown>;
```

Defined in: [mcp/display.ts:41](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L41)

Initial reactive state.

***

### theme?

```ts
optional theme?: Theme;
```

Defined in: [mcp/display.ts:43](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L43)

Light/dark theme overrides.

***

### defs?

```ts
optional defs?: Record<string, Component>;
```

Defined in: [mcp/display.ts:45](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L45)

Reusable component definitions.

***

### onMount?

```ts
optional onMount?: 
  | Action
  | Action[];
```

Defined in: [mcp/display.ts:47](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L47)

Action(s) to run when the UI mounts.

***

### keyBindings?

```ts
optional keyBindings?: Record<string, 
  | Action
| Action[]>;
```

Defined in: [mcp/display.ts:49](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L49)

Keyboard shortcuts.

***

### cssClass?

```ts
optional cssClass?: string;
```

Defined in: [mcp/display.ts:51](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L51)

Extra CSS class on root element.

***

### layout?

```ts
optional layout?: LayoutHints;
```

Defined in: [mcp/display.ts:53](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L53)

Size hints for the host container (iframe, panel, etc.).

***

### css?

```ts
optional css?: string[];
```

Defined in: [mcp/display.ts:55](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L55)

Inline CSS blocks injected as `<style>` (merged after the compiled theme).

***

### stylesheets?

```ts
optional stylesheets?: string[];
```

Defined in: [mcp/display.ts:57](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L57)

External CSS URLs loaded as `<link rel="stylesheet">`.

***

### mode?

```ts
optional mode?: ColorMode;
```

Defined in: [mcp/display.ts:59](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L59)

Force a color scheme regardless of OS preference.

***

### pipes?

```ts
optional pipes?: Record<string, PipeFn>;
```

Defined in: [mcp/display.ts:61](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L61)

Custom pipe functions for reactive expressions.

---

---
url: /prefab/reference/api/mcp/interfaces/DisplayFormOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / DisplayFormOptions

# Interface: DisplayFormOptions

Defined in: [mcp/display.ts:134](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L134)

## Extends

* [`AutoFormOptions`](../../auto/interfaces/AutoFormOptions.md).[`DisplayOptions`](DisplayOptions.md)

## Properties

### title?

```ts
optional title?: string;
```

Defined in: [auto/form.ts:58](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L58)

Form heading.

#### Inherited from

[`AutoFormOptions`](../../auto/interfaces/AutoFormOptions.md).[`title`](../../auto/interfaces/AutoFormOptions.md#title)

***

### subtitle?

```ts
optional subtitle?: string;
```

Defined in: [auto/form.ts:60](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L60)

Optional subtitle.

#### Inherited from

[`AutoFormOptions`](../../auto/interfaces/AutoFormOptions.md).[`subtitle`](../../auto/interfaces/AutoFormOptions.md#subtitle)

***

### submitLabel?

```ts
optional submitLabel?: string;
```

Defined in: [auto/form.ts:62](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L62)

Submit button text. Default 'Submit'.

#### Inherited from

[`AutoFormOptions`](../../auto/interfaces/AutoFormOptions.md).[`submitLabel`](../../auto/interfaces/AutoFormOptions.md#submitlabel)

***

### onSubmit?

```ts
optional onSubmit?: 
  | Action
  | Action[];
```

Defined in: [auto/form.ts:64](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L64)

Custom onSubmit action. Overrides submitTool.

#### Inherited from

[`AutoFormOptions`](../../auto/interfaces/AutoFormOptions.md).[`onSubmit`](../../auto/interfaces/AutoFormOptions.md#onsubmit)

***

### successMessage?

```ts
optional successMessage?: string;
```

Defined in: [auto/form.ts:66](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L66)

Success toast message.

#### Inherited from

[`AutoFormOptions`](../../auto/interfaces/AutoFormOptions.md).[`successMessage`](../../auto/interfaces/AutoFormOptions.md#successmessage)

***

### errorMessage?

```ts
optional errorMessage?: string;
```

Defined in: [auto/form.ts:68](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/auto/form.ts#L68)

Error toast message.

#### Inherited from

[`AutoFormOptions`](../../auto/interfaces/AutoFormOptions.md).[`errorMessage`](../../auto/interfaces/AutoFormOptions.md#errormessage)

***

### state?

```ts
optional state?: Record<string, unknown>;
```

Defined in: [mcp/display.ts:41](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L41)

Initial reactive state.

#### Inherited from

[`DisplayOptions`](DisplayOptions.md).[`state`](DisplayOptions.md#state)

***

### theme?

```ts
optional theme?: Theme;
```

Defined in: [mcp/display.ts:43](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L43)

Light/dark theme overrides.

#### Inherited from

[`DisplayOptions`](DisplayOptions.md).[`theme`](DisplayOptions.md#theme)

***

### defs?

```ts
optional defs?: Record<string, Component>;
```

Defined in: [mcp/display.ts:45](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L45)

Reusable component definitions.

#### Inherited from

[`DisplayOptions`](DisplayOptions.md).[`defs`](DisplayOptions.md#defs)

***

### onMount?

```ts
optional onMount?: 
  | Action
  | Action[];
```

Defined in: [mcp/display.ts:47](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L47)

Action(s) to run when the UI mounts.

#### Inherited from

[`DisplayOptions`](DisplayOptions.md).[`onMount`](DisplayOptions.md#onmount)

***

### keyBindings?

```ts
optional keyBindings?: Record<string, 
  | Action
| Action[]>;
```

Defined in: [mcp/display.ts:49](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L49)

Keyboard shortcuts.

#### Inherited from

[`DisplayOptions`](DisplayOptions.md).[`keyBindings`](DisplayOptions.md#keybindings)

***

### cssClass?

```ts
optional cssClass?: string;
```

Defined in: [mcp/display.ts:51](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L51)

Extra CSS class on root element.

#### Inherited from

[`DisplayOptions`](DisplayOptions.md).[`cssClass`](DisplayOptions.md#cssclass)

***

### layout?

```ts
optional layout?: LayoutHints;
```

Defined in: [mcp/display.ts:53](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L53)

Size hints for the host container (iframe, panel, etc.).

#### Inherited from

[`DisplayOptions`](DisplayOptions.md).[`layout`](DisplayOptions.md#layout)

***

### css?

```ts
optional css?: string[];
```

Defined in: [mcp/display.ts:55](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L55)

Inline CSS blocks injected as `<style>` (merged after the compiled theme).

#### Inherited from

[`DisplayOptions`](DisplayOptions.md).[`css`](DisplayOptions.md#css)

***

### stylesheets?

```ts
optional stylesheets?: string[];
```

Defined in: [mcp/display.ts:57](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L57)

External CSS URLs loaded as `<link rel="stylesheet">`.

#### Inherited from

[`DisplayOptions`](DisplayOptions.md).[`stylesheets`](DisplayOptions.md#stylesheets)

***

### mode?

```ts
optional mode?: ColorMode;
```

Defined in: [mcp/display.ts:59](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L59)

Force a color scheme regardless of OS preference.

#### Inherited from

[`DisplayOptions`](DisplayOptions.md).[`mode`](DisplayOptions.md#mode)

***

### pipes?

```ts
optional pipes?: Record<string, PipeFn>;
```

Defined in: [mcp/display.ts:61](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L61)

Custom pipe functions for reactive expressions.

#### Inherited from

[`DisplayOptions`](DisplayOptions.md).[`pipes`](DisplayOptions.md#pipes)

***

### elicit?

```ts
optional elicit?: boolean | FormInputRequestOptions;
```

Defined in: [mcp/display.ts:147](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L147)

Ask the client to collect the fields instead of rendering them.

A prefab form only exists on a host that renders UI. Protocol revision
2026-07-28 gives every other host a native path: return an
`input_required` result, the client shows its own form and retries the
call. Pass `true` for the defaults, or an options object to set the
response key, the prompt, or a signed `requestState`.

The answer comes back through `acceptedFormInput`, which checks it against
the same field list. See `./input-required.ts` for the full handler shape.

---

---
url: /prefab/reference/api/mcp/interfaces/StateUpdate.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / StateUpdate

# Interface: StateUpdate

Defined in: [mcp/display.ts:209](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L209)

## Properties

### state

```ts
state: Record<string, unknown>;
```

Defined in: [mcp/display.ts:211](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L211)

State key-value pairs to merge into the existing UI state.

***

### actions?

```ts
optional actions?: 
  | ActionJSON
  | ActionJSON[];
```

Defined in: [mcp/display.ts:213](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L213)

Actions to fire after the state delta is applied.

---

---
url: /prefab/reference/api/mcp/interfaces/DisplayUpdateOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / DisplayUpdateOptions

# Interface: DisplayUpdateOptions

Defined in: [mcp/display.ts:231](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L231)

## Properties

### actions?

```ts
optional actions?: 
  | Action
  | Action[];
```

Defined in: [mcp/display.ts:233](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L233)

Actions to fire after the state delta is applied.

---

---
url: /prefab/reference/api/mcp/interfaces/DisplayErrorOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / DisplayErrorOptions

# Interface: DisplayErrorOptions

Defined in: [mcp/display.ts:268](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L268)

## Properties

### detail?

```ts
optional detail?: string;
```

Defined in: [mcp/display.ts:270](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L270)

Error detail / stack trace to show in a code block.

***

### hint?

```ts
optional hint?: string;
```

Defined in: [mcp/display.ts:272](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L272)

Hint for the user on how to fix the issue.

***

### theme?

```ts
optional theme?: Theme;
```

Defined in: [mcp/display.ts:274](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L274)

Theme overrides.

---

---
url: /prefab/reference/api/mcp/interfaces/DisplaySuccessOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / DisplaySuccessOptions

# Interface: DisplaySuccessOptions

Defined in: [mcp/display.ts:322](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L322)

## Properties

### detail?

```ts
optional detail?: string;
```

Defined in: [mcp/display.ts:324](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L324)

Additional detail text below the message.

***

### theme?

```ts
optional theme?: Theme;
```

Defined in: [mcp/display.ts:326](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L326)

Theme overrides.

---

---
url: /prefab/reference/api/mcp/interfaces/FormInputRequestOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / FormInputRequestOptions

# Interface: FormInputRequestOptions

Defined in: [mcp/input-required.ts:156](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/input-required.ts#L156)

## Properties

### key?

```ts
optional key?: string;
```

Defined in: [mcp/input-required.ts:161](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/input-required.ts#L161)

Key the request is filed under, and the key the answer comes back on.

#### Default

```ts
'form'
```

***

### message?

```ts
optional message?: string;
```

Defined in: [mcp/input-required.ts:163](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/input-required.ts#L163)

Prompt shown to the user.

#### Default

```ts
the field list's own title, or a generic ask
```

***

### requestState?

```ts
optional requestState?: string;
```

Defined in: [mcp/input-required.ts:165](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/input-required.ts#L165)

Opaque state echoed back on the retry. Sign it; see the SDK's request-state codec.

---

---
url: /prefab/reference/api/mcp/interfaces/McpAppCsp.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpAppCsp

# Interface: McpAppCsp

Defined in: [mcp/resource.ts:24](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L24)

CSP configuration for MCP Apps resources.

## Properties

### resourceDomains?

```ts
optional resourceDomains?: string[];
```

Defined in: [mcp/resource.ts:26](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L26)

Origins allowed for scripts, styles, images, fonts, media.

***

### connectDomains?

```ts
optional connectDomains?: string[];
```

Defined in: [mcp/resource.ts:28](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L28)

Origins allowed for fetch/XHR/WebSocket.

***

### frameDomains?

```ts
optional frameDomains?: string[];
```

Defined in: [mcp/resource.ts:30](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L30)

Origins allowed for nested iframes.

***

### baseUriDomains?

```ts
optional baseUriDomains?: string[];
```

Defined in: [mcp/resource.ts:32](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L32)

Additional allowed base URIs.

---

---
url: /prefab/reference/api/mcp/interfaces/McpAppPermissions.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpAppPermissions

# Interface: McpAppPermissions

Defined in: [mcp/resource.ts:36](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L36)

Permission Policy requests for MCP Apps resources.

## Properties

### camera?

```ts
optional camera?: boolean;
```

Defined in: [mcp/resource.ts:38](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L38)

Request camera access (video capture, QR scanning).

***

### microphone?

```ts
optional microphone?: boolean;
```

Defined in: [mcp/resource.ts:40](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L40)

Request microphone access (audio recording, voice input).

***

### geolocation?

```ts
optional geolocation?: boolean;
```

Defined in: [mcp/resource.ts:42](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L42)

Request geolocation access (location-aware apps, maps).

***

### clipboardWrite?

```ts
optional clipboardWrite?: boolean;
```

Defined in: [mcp/resource.ts:44](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L44)

Request clipboard write access (copy-to-clipboard).

---

---
url: /prefab/reference/api/mcp/interfaces/ResourceMetaOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / ResourceMetaOptions

# Interface: ResourceMetaOptions

Defined in: [mcp/resource.ts:47](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L47)

## Properties

### csp?

```ts
optional csp?: McpAppCsp;
```

Defined in: [mcp/resource.ts:49](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L49)

CSP domains configuration.

***

### permissions?

```ts
optional permissions?: McpAppPermissions;
```

Defined in: [mcp/resource.ts:51](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L51)

Permission Policy requests (camera, mic, etc.).

---

---
url: /prefab/reference/api/mcp/interfaces/RendererHtmlOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / RendererHtmlOptions

# Interface: RendererHtmlOptions

Defined in: [mcp/resource.ts:180](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L180)

## Properties

### title?

```ts
optional title?: string;
```

Defined in: [mcp/resource.ts:182](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L182)

Page title.

#### Default

```ts
'Prefab'
```

***

### scripts?

```ts
optional scripts?: string[];
```

Defined in: [mcp/resource.ts:184](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L184)

Additional `<script>` URLs to load after the renderer.

***

### stylesheets?

```ts
optional stylesheets?: string[];
```

Defined in: [mcp/resource.ts:186](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L186)

Additional `<link rel="stylesheet">` URLs.

***

### cdnBase?

```ts
optional cdnBase?: string;
```

Defined in: [mcp/resource.ts:188](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L188)

Override CDN base URL (no trailing slash).

#### Default

```ts
jsdelivr CDN
```

***

### themeBridge?

```ts
optional themeBridge?: "vscode";
```

Defined in: [mcp/resource.ts:197](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L197)

Inject a theme bridge stylesheet after `prefab.css`.

`'vscode'` re-declares the tokens VS Code can supply with the
`--vscode-*` variable first, dropping the MCP Apps `--color-*` layer that
would otherwise shadow it, so the viewer follows the user's editor theme.
Emitted before `stylesheets`, which stay the outermost override.

---

---
url: /prefab/reference/api/mcp/interfaces/ViewerResourceOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / ViewerResourceOptions

# Interface: ViewerResourceOptions

Defined in: [mcp/resource.ts:248](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L248)

## Properties

### uri?

```ts
optional uri?: string;
```

Defined in: [mcp/resource.ts:250](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L250)

Resource URI.

#### Default

```ts
PREFAB_RESOURCE_URI
```

***

### title?

```ts
optional title?: string;
```

Defined in: [mcp/resource.ts:252](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L252)

Resource title.

#### Default

```ts
'Prefab Viewer'
```

***

### csp?

```ts
optional csp?: McpAppCsp;
```

Defined in: [mcp/resource.ts:254](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L254)

CSP configuration.

#### Default

```ts
{ resourceDomains: ['https://cdn.jsdelivr.net'] }
```

***

### permissions?

```ts
optional permissions?: McpAppPermissions;
```

Defined in: [mcp/resource.ts:256](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L256)

Permission Policy requests.

***

### scripts?

```ts
optional scripts?: string[];
```

Defined in: [mcp/resource.ts:258](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L258)

Additional `<script>` URLs to load after the renderer.

***

### stylesheets?

```ts
optional stylesheets?: string[];
```

Defined in: [mcp/resource.ts:260](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L260)

Additional `<link rel="stylesheet">` URLs.

***

### cdnBase?

```ts
optional cdnBase?: string;
```

Defined in: [mcp/resource.ts:262](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L262)

Override CDN base URL (no trailing slash).

***

### themeBridge?

```ts
optional themeBridge?: "vscode";
```

Defined in: [mcp/resource.ts:267](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L267)

Inject a theme bridge stylesheet. `'vscode'` makes the viewer follow the
user's editor theme. See [RendererHtmlOptions.themeBridge](RendererHtmlOptions.md#themebridge).

***

### cache?

```ts
optional cache?: McpCacheHint;
```

Defined in: [mcp/resource.ts:272](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L272)

Cache fields for the `resources/read` result (SEP-2549).

#### Default

```ts
{ ttlMs: 86_400_000, cacheScope: 'public' }
```

***

### declareCapability?

```ts
optional declareCapability?: boolean;
```

Defined in: [mcp/resource.ts:279](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L279)

Declare the `io.modelcontextprotocol/ui` extension capability on the
server (SEP-2133). Must happen before the server connects; a server that
is already connected keeps its existing capabilities and a warning is
logged.

#### Default

```ts
true
```

---

---
url: /prefab/reference/api/mcp/interfaces/ResourceConfig.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / ResourceConfig

# Interface: ResourceConfig

Defined in: [mcp/resource.ts:283](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L283)

Registration config accepted by both SDK generations.

## Properties

### title?

```ts
optional title?: string;
```

Defined in: [mcp/resource.ts:284](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L284)

***

### mimeType

```ts
mimeType: string;
```

Defined in: [mcp/resource.ts:285](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L285)

***

### description?

```ts
optional description?: string;
```

Defined in: [mcp/resource.ts:286](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L286)

***

### \_meta?

```ts
optional _meta?: Record<string, unknown>;
```

Defined in: [mcp/resource.ts:287](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L287)

***

### cacheHint?

```ts
optional cacheHint?: McpCacheHint;
```

Defined in: [mcp/resource.ts:289](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L289)

Per-resource cache hint (SDK v2; ignored by servers that do not read it).

---

---
url: /prefab/reference/api/mcp/interfaces/McpServerLike.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpServerLike

# Interface: McpServerLike

Defined in: [mcp/resource.ts:307](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L307)

MCP server interface expected by registerViewerResource.

Structural rather than an SDK import, so fastmcp and hand-rolled servers stay
compatible. `registerResource` is preferred; `resource` is the v1 overload
that v2 retired and is used only as a fallback.

## Properties

### server?

```ts
optional server?: object;
```

Defined in: [mcp/resource.ts:311](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L311)

Low-level server, where both SDK generations expose capability registration.

#### registerCapabilities()?

```ts
optional registerCapabilities(capabilities): void;
```

##### Parameters

| Parameter | Type |
| ------ | ------ |
| `capabilities` | `CapabilityDeclaration` |

##### Returns

`void`

## Methods

### registerResource()?

```ts
optional registerResource(
   name, 
   uri, 
   config, 
   handler): unknown;
```

Defined in: [mcp/resource.ts:308](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L308)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `name` | `string` |
| `uri` | `string` |
| `config` | [`ResourceConfig`](ResourceConfig.md) |
| `handler` | [`ResourceReadHandler`](../type-aliases/ResourceReadHandler.md) |

#### Returns

`unknown`

***

### resource()?

```ts
optional resource(
   name, 
   uri, 
   config, 
   handler): unknown;
```

Defined in: [mcp/resource.ts:309](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L309)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `name` | `string` |
| `uri` | `string` |
| `config` | [`ResourceConfig`](ResourceConfig.md) |
| `handler` | [`ResourceReadHandler`](../type-aliases/ResourceReadHandler.md) |

#### Returns

`unknown`

***

### registerCapabilities()?

```ts
optional registerCapabilities(capabilities): void;
```

Defined in: [mcp/resource.ts:313](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L313)

Some wrappers expose capability registration directly.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `capabilities` | `CapabilityDeclaration` |

#### Returns

`void`

---

---
url: /prefab/reference/api/mcp/interfaces/ToolResultOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / ToolResultOptions

# Interface: ToolResultOptions

Defined in: [mcp/result.ts:26](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/result.ts#L26)

## Properties

### isError?

```ts
optional isError?: boolean;
```

Defined in: [mcp/result.ts:28](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/result.ts#L28)

Flag the result as failed (hosts render it as a tool error).

---

---
url: /prefab/reference/api/mcp/interfaces/VsCodeTokenSource.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / VsCodeTokenSource

# Interface: VsCodeTokenSource

Defined in: [mcp/theme-bridge.ts:21](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/theme-bridge.ts#L21)

How one prefab token is sourced from the VS Code webview.

## Properties

### vscode

```ts
vscode: string;
```

Defined in: [mcp/theme-bridge.ts:23](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/theme-bridge.ts#L23)

VS Code webview variable supplying the value.

***

### light

```ts
light: string;
```

Defined in: [mcp/theme-bridge.ts:25](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/theme-bridge.ts#L25)

Static fallback when VS Code does not define it (light scheme).

***

### dark?

```ts
optional dark?: string;
```

Defined in: [mcp/theme-bridge.ts:27](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/theme-bridge.ts#L27)

Dark-scheme fallback. Omitted for scheme-independent tokens (fonts).

---

---
url: /prefab/reference/api/mcp/type-aliases/PrefabUpdateWire.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / PrefabUpdateWire

# Type Alias: PrefabUpdateWire

```ts
type PrefabUpdateWire = object;
```

Defined in: [mcp/display.ts:226](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L226)

The `$prefab` state-delta payload, sent as `structuredContent`.

A type alias rather than an interface for the same reason as
PrefabWireFormat: interfaces get no implicit index signature, so an
interface here cannot be assigned to the SDK's
`structuredContent?: { [x: string]: unknown }`. Guarded by
`test/mcp-types.test.ts`.

## Properties

### $prefab

```ts
$prefab: object;
```

Defined in: [mcp/display.ts:227](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L227)

#### version

```ts
version: string;
```

***

### update

```ts
update: StateUpdate;
```

Defined in: [mcp/display.ts:228](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L228)

---

---
url: /prefab/reference/api/mcp/type-aliases/FormValue.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / FormValue

# Type Alias: FormValue

```ts
type FormValue = string | number | boolean | string[];
```

Defined in: [mcp/input-required.ts:210](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/input-required.ts#L210)

Values a client may return for one field.

---

---
url: /prefab/reference/api/mcp/type-aliases/ResourceReadHandler.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / ResourceReadHandler

# Type Alias: ResourceReadHandler

```ts
type ResourceReadHandler = (uri) => Promise<McpResourceReadResult<McpTextResourceContents>>;
```

Defined in: [mcp/resource.ts:293](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L293)

`resources/read` handler shape passed to the server — the viewer is always HTML text.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `uri` | `URL` |

## Returns

`Promise`<[`McpResourceReadResult`](McpResourceReadResult.md)<[`McpTextResourceContents`](McpTextResourceContents.md)>>

---

---
url: /prefab/reference/api/mcp/type-aliases/ThemeBridge.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / ThemeBridge

# Type Alias: ThemeBridge

```ts
type ThemeBridge = "vscode";
```

Defined in: [mcp/theme-bridge.ts:66](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/theme-bridge.ts#L66)

Supported theme bridges.

---

---
url: /prefab/reference/api/mcp/type-aliases/McpTextContent.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpTextContent

# Type Alias: McpTextContent

```ts
type McpTextContent = object;
```

Defined in: [mcp/types.ts:27](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L27)

MCP text content block (compatible with SDK's TextContent)

## Properties

### type

```ts
type: "text";
```

Defined in: [mcp/types.ts:28](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L28)

***

### text

```ts
text: string;
```

Defined in: [mcp/types.ts:29](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L29)

***

### annotations?

```ts
optional annotations?: Record<string, unknown>;
```

Defined in: [mcp/types.ts:30](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L30)

***

### \_meta?

```ts
optional _meta?: Record<string, unknown>;
```

Defined in: [mcp/types.ts:31](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L31)

---

---
url: /prefab/reference/api/mcp/type-aliases/McpImageContent.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpImageContent

# Type Alias: McpImageContent

```ts
type McpImageContent = object;
```

Defined in: [mcp/types.ts:35](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L35)

MCP image content block (compatible with SDK's ImageContent)

## Properties

### type

```ts
type: "image";
```

Defined in: [mcp/types.ts:36](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L36)

***

### data

```ts
data: string;
```

Defined in: [mcp/types.ts:37](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L37)

***

### mimeType

```ts
mimeType: string;
```

Defined in: [mcp/types.ts:38](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L38)

***

### annotations?

```ts
optional annotations?: Record<string, unknown>;
```

Defined in: [mcp/types.ts:39](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L39)

***

### \_meta?

```ts
optional _meta?: Record<string, unknown>;
```

Defined in: [mcp/types.ts:40](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L40)

---

---
url: /prefab/reference/api/mcp/type-aliases/McpTextResourceContents.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpTextResourceContents

# Type Alias: McpTextResourceContents

```ts
type McpTextResourceContents = object;
```

Defined in: [mcp/types.ts:54](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L54)

Text resource contents (has `text`, never `blob`).

Declared as a type alias, not an interface, and the difference is load-bearing.
The SDK's resource types are passthrough (`{ [x: string]: unknown }`), and
TypeScript grants an *implicit index signature* only to type aliases of object
types — never to interfaces, since an interface can be reopened by declaration
merging and so its key set is not final. Declaring this as an interface makes
it fail to satisfy the SDK's shape with "Index signature for type 'string' is
missing", which a consumer can only work around by casting.

## Properties

### uri

```ts
uri: string;
```

Defined in: [mcp/types.ts:55](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L55)

***

### mimeType?

```ts
optional mimeType?: string;
```

Defined in: [mcp/types.ts:56](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L56)

***

### text

```ts
text: string;
```

Defined in: [mcp/types.ts:57](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L57)

***

### \_meta?

```ts
optional _meta?: Record<string, unknown>;
```

Defined in: [mcp/types.ts:58](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L58)

---

---
url: /prefab/reference/api/mcp/type-aliases/McpBlobResourceContents.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpBlobResourceContents

# Type Alias: McpBlobResourceContents

```ts
type McpBlobResourceContents = object;
```

Defined in: [mcp/types.ts:62](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L62)

Blob resource contents (has `blob`, never `text`). See [McpTextResourceContents](McpTextResourceContents.md) on the alias.

## Properties

### uri

```ts
uri: string;
```

Defined in: [mcp/types.ts:63](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L63)

***

### mimeType?

```ts
optional mimeType?: string;
```

Defined in: [mcp/types.ts:64](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L64)

***

### blob

```ts
blob: string;
```

Defined in: [mcp/types.ts:65](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L65)

***

### \_meta?

```ts
optional _meta?: Record<string, unknown>;
```

Defined in: [mcp/types.ts:66](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L66)

---

---
url: /prefab/reference/api/mcp/type-aliases/McpResourceContent.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpResourceContent

# Type Alias: McpResourceContent

```ts
type McpResourceContent = object;
```

Defined in: [mcp/types.ts:70](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L70)

MCP embedded resource content block (compatible with SDK's EmbeddedResource)

## Properties

### type

```ts
type: "resource";
```

Defined in: [mcp/types.ts:71](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L71)

***

### resource

```ts
resource: 
  | McpTextResourceContents
  | McpBlobResourceContents;
```

Defined in: [mcp/types.ts:72](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L72)

***

### annotations?

```ts
optional annotations?: Record<string, unknown>;
```

Defined in: [mcp/types.ts:73](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L73)

***

### \_meta?

```ts
optional _meta?: Record<string, unknown>;
```

Defined in: [mcp/types.ts:74](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L74)

---

---
url: /prefab/reference/api/mcp/type-aliases/McpContent.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpContent

# Type Alias: McpContent

```ts
type McpContent = 
  | McpTextContent
  | McpImageContent
  | McpResourceContent;
```

Defined in: [mcp/types.ts:78](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L78)

Any MCP content block

---

---
url: /prefab/reference/api/mcp/type-aliases/McpToolResult.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpToolResult

# Type Alias: McpToolResult\<S>

```ts
type McpToolResult<S> = object;
```

Defined in: [mcp/types.ts:96](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L96)

MCP tool result — returned from tool handlers.

Structurally assignable to the SDK's `CallToolResult`. The index signature
allows the SDK's `Result` base interface to be satisfied without a cast.

`structuredContent` is generic rather than `Record<string, unknown>`: protocol
revision 2026-07-28 loosened it to any JSON value (SEP-2106), and keeping the
payload type lets callers read it back without casting.

The wire discriminator `resultType` (SEP-2322) is intentionally absent. The
SDK's protocol layer stamps it on encode and strips it before results reach
consumers, so handlers do not author it for ordinary complete results. The
index signature still admits `resultType: 'input_required'` for the one case
a handler does own — multi-round-trip interim results.

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `S` | `unknown` |

## Indexable

```ts
[key: string]: unknown
```

## Properties

### content

```ts
content: McpContent[];
```

Defined in: [mcp/types.ts:97](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L97)

***

### structuredContent?

```ts
optional structuredContent?: S;
```

Defined in: [mcp/types.ts:99](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L99)

Structured payload forwarded to MCP Apps iframes via ui/notifications/tool-result.

***

### isError?

```ts
optional isError?: boolean;
```

Defined in: [mcp/types.ts:100](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L100)

***

### \_meta?

```ts
optional _meta?: Record<string, unknown>;
```

Defined in: [mcp/types.ts:101](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L101)

---

---
url: /prefab/reference/api/mcp/type-aliases/McpDisplayResult.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpDisplayResult

# Type Alias: McpDisplayResult\<S>

```ts
type McpDisplayResult<S> = McpToolResult<S> & object;
```

Defined in: [mcp/types.ts:116](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L116)

A tool result whose `structuredContent` is guaranteed present.

`McpToolResult.structuredContent` is optional because a hand-written result
may legitimately omit it. Every prefab display helper populates it, and
saying so in the return type spares callers a null check on a field that is
never absent — reading `result.structuredContent.view` should not need one.

Assignable to `McpToolResult<S>` in every position, so widening a helper's
return type to this breaks nothing.

## Type Declaration

### structuredContent

```ts
structuredContent: S;
```

## Type Parameters

| Type Parameter |
| ------ |
| `S` |

---

---
url: /prefab/reference/api/mcp/type-aliases/McpCacheScope.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpCacheScope

# Type Alias: McpCacheScope

```ts
type McpCacheScope = "public" | "private";
```

Defined in: [mcp/types.ts:126](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L126)

Cache scopes defined for cacheable results.

`public` — the result may be stored by shared caches.
`private` — only the requesting client may cache it.

---

---
url: /prefab/reference/api/mcp/type-aliases/McpCacheHint.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpCacheHint

# Type Alias: McpCacheHint

```ts
type McpCacheHint = object;
```

Defined in: [mcp/types.ts:137](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L137)

Cache fields required on results from the cacheable operations
(`tools/list`, `prompts/list`, `resources/list`, `resources/templates/list`,
`resources/read`, `server/discover`).

Values a handler returns on the result take precedence over any hint
configured on the server; when neither is present the SDK falls back to the
conservative `{ ttlMs: 0, cacheScope: 'private' }` — i.e. no caching.

## Properties

### ttlMs?

```ts
optional ttlMs?: number;
```

Defined in: [mcp/types.ts:139](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L139)

Cache lifetime in milliseconds. Must be a non-negative safe integer.

***

### cacheScope?

```ts
optional cacheScope?: McpCacheScope;
```

Defined in: [mcp/types.ts:141](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L141)

Whether shared caches may store the result.

---

---
url: /prefab/reference/api/mcp/type-aliases/McpResourceReadResult.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpResourceReadResult

# Type Alias: McpResourceReadResult\<C>

```ts
type McpResourceReadResult<C> = object;
```

Defined in: [mcp/types.ts:156](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L156)

A `resources/read` result carrying the required cache fields.

Generic over the contents kind so a handler that only ever returns text (the
prefab viewer, for one) does not force callers to narrow the union.

A type alias rather than an interface, so it satisfies the SDK's passthrough
`ReadResourceResult` (`{ [x: string]: unknown }`) without a cast. See
[McpTextResourceContents](McpTextResourceContents.md) for why the distinction matters — returning
this straight from an SDK read handler is the whole point of the type, and as
an interface it did not typecheck there.

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `C` *extends* | [`McpTextResourceContents`](McpTextResourceContents.md) | [`McpBlobResourceContents`](McpBlobResourceContents.md) | | [`McpTextResourceContents`](McpTextResourceContents.md) | [`McpBlobResourceContents`](McpBlobResourceContents.md) |

## Properties

### contents

```ts
contents: C[];
```

Defined in: [mcp/types.ts:159](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L159)

***

### ttlMs

```ts
ttlMs: number;
```

Defined in: [mcp/types.ts:161](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L161)

Cache lifetime in milliseconds.

***

### cacheScope

```ts
cacheScope: McpCacheScope;
```

Defined in: [mcp/types.ts:163](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L163)

Whether shared caches may store the result.

---

---
url: /prefab/reference/api/mcp/type-aliases/McpStringSchema.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpStringSchema

# Type Alias: McpStringSchema

```ts
type McpStringSchema = object;
```

Defined in: [mcp/types.ts:178](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L178)

The restricted JSON Schema an elicitation may request.

Protocol revision 2026-07-28 replaced server-initiated `elicitation/create`
pushes with Multi Round-Trip Requests: a handler *returns* an
[McpInputRequiredResult](McpInputRequiredResult.md), the client answers the embedded requests and
retries the original call. The schema is deliberately flat — top-level
primitive properties only, no nesting — because it has to render as a form in
hosts that have no UI surface of their own.

## Properties

### type

```ts
type: "string";
```

Defined in: [mcp/types.ts:179](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L179)

***

### title?

```ts
optional title?: string;
```

Defined in: [mcp/types.ts:180](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L180)

***

### description?

```ts
optional description?: string;
```

Defined in: [mcp/types.ts:181](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L181)

***

### minLength?

```ts
optional minLength?: number;
```

Defined in: [mcp/types.ts:182](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L182)

***

### maxLength?

```ts
optional maxLength?: number;
```

Defined in: [mcp/types.ts:183](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L183)

***

### format?

```ts
optional format?: "email" | "uri" | "date" | "date-time";
```

Defined in: [mcp/types.ts:184](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L184)

***

### default?

```ts
optional default?: string;
```

Defined in: [mcp/types.ts:185](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L185)

---

---
url: /prefab/reference/api/mcp/type-aliases/McpNumberSchema.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpNumberSchema

# Type Alias: McpNumberSchema

```ts
type McpNumberSchema = object;
```

Defined in: [mcp/types.ts:188](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L188)

## Properties

### type

```ts
type: "number" | "integer";
```

Defined in: [mcp/types.ts:189](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L189)

***

### title?

```ts
optional title?: string;
```

Defined in: [mcp/types.ts:190](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L190)

***

### description?

```ts
optional description?: string;
```

Defined in: [mcp/types.ts:191](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L191)

***

### minimum?

```ts
optional minimum?: number;
```

Defined in: [mcp/types.ts:192](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L192)

***

### maximum?

```ts
optional maximum?: number;
```

Defined in: [mcp/types.ts:193](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L193)

***

### default?

```ts
optional default?: number;
```

Defined in: [mcp/types.ts:194](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L194)

---

---
url: /prefab/reference/api/mcp/type-aliases/McpBooleanSchema.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpBooleanSchema

# Type Alias: McpBooleanSchema

```ts
type McpBooleanSchema = object;
```

Defined in: [mcp/types.ts:197](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L197)

## Properties

### type

```ts
type: "boolean";
```

Defined in: [mcp/types.ts:198](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L198)

***

### title?

```ts
optional title?: string;
```

Defined in: [mcp/types.ts:199](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L199)

***

### description?

```ts
optional description?: string;
```

Defined in: [mcp/types.ts:200](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L200)

***

### default?

```ts
optional default?: boolean;
```

Defined in: [mcp/types.ts:201](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L201)

---

---
url: /prefab/reference/api/mcp/type-aliases/McpEnumSchema.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpEnumSchema

# Type Alias: McpEnumSchema

```ts
type McpEnumSchema = object;
```

Defined in: [mcp/types.ts:205](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L205)

Single selection: a string constrained to a fixed set of values.

## Properties

### type

```ts
type: "string";
```

Defined in: [mcp/types.ts:206](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L206)

***

### title?

```ts
optional title?: string;
```

Defined in: [mcp/types.ts:207](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L207)

***

### description?

```ts
optional description?: string;
```

Defined in: [mcp/types.ts:208](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L208)

***

### enum

```ts
enum: string[];
```

Defined in: [mcp/types.ts:209](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L209)

***

### default?

```ts
optional default?: string;
```

Defined in: [mcp/types.ts:210](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L210)

---

---
url: /prefab/reference/api/mcp/type-aliases/McpMultiEnumSchema.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpMultiEnumSchema

# Type Alias: McpMultiEnumSchema

```ts
type McpMultiEnumSchema = object;
```

Defined in: [mcp/types.ts:214](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L214)

Multiple selection: an array of values drawn from a fixed set.

## Properties

### type

```ts
type: "array";
```

Defined in: [mcp/types.ts:215](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L215)

***

### title?

```ts
optional title?: string;
```

Defined in: [mcp/types.ts:216](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L216)

***

### description?

```ts
optional description?: string;
```

Defined in: [mcp/types.ts:217](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L217)

***

### minItems?

```ts
optional minItems?: number;
```

Defined in: [mcp/types.ts:218](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L218)

***

### maxItems?

```ts
optional maxItems?: number;
```

Defined in: [mcp/types.ts:219](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L219)

***

### items

```ts
items: object;
```

Defined in: [mcp/types.ts:220](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L220)

#### type

```ts
type: "string";
```

#### enum

```ts
enum: string[];
```

***

### default?

```ts
optional default?: string[];
```

Defined in: [mcp/types.ts:221](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L221)

---

---
url: /prefab/reference/api/mcp/type-aliases/McpPrimitiveSchema.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpPrimitiveSchema

# Type Alias: McpPrimitiveSchema

```ts
type McpPrimitiveSchema = 
  | McpStringSchema
  | McpNumberSchema
  | McpBooleanSchema
  | McpEnumSchema
  | McpMultiEnumSchema;
```

Defined in: [mcp/types.ts:224](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L224)

---

---
url: /prefab/reference/api/mcp/type-aliases/McpRestrictedSchema.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpRestrictedSchema

# Type Alias: McpRestrictedSchema

```ts
type McpRestrictedSchema = object;
```

Defined in: [mcp/types.ts:232](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L232)

The flat object schema an `elicitation/create` request asks the client to fill.

## Properties

### type

```ts
type: "object";
```

Defined in: [mcp/types.ts:233](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L233)

***

### properties

```ts
properties: Record<string, McpPrimitiveSchema>;
```

Defined in: [mcp/types.ts:234](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L234)

***

### required?

```ts
optional required?: string[];
```

Defined in: [mcp/types.ts:235](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L235)

---

---
url: /prefab/reference/api/mcp/type-aliases/McpElicitFormRequest.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpElicitFormRequest

# Type Alias: McpElicitFormRequest

```ts
type McpElicitFormRequest = object;
```

Defined in: [mcp/types.ts:239](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L239)

Form-mode elicitation: the client renders the schema and returns the values.

## Properties

### method

```ts
method: "elicitation/create";
```

Defined in: [mcp/types.ts:240](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L240)

***

### params

```ts
params: object;
```

Defined in: [mcp/types.ts:241](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L241)

#### mode?

```ts
optional mode?: "form";
```

#### message

```ts
message: string;
```

#### requestedSchema

```ts
requestedSchema: McpRestrictedSchema;
```

---

---
url: /prefab/reference/api/mcp/type-aliases/McpElicitUrlRequest.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpElicitUrlRequest

# Type Alias: McpElicitUrlRequest

```ts
type McpElicitUrlRequest = object;
```

Defined in: [mcp/types.ts:249](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L249)

URL-mode elicitation: the client sends the user out of band and reports back.

## Properties

### method

```ts
method: "elicitation/create";
```

Defined in: [mcp/types.ts:250](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L250)

***

### params

```ts
params: object;
```

Defined in: [mcp/types.ts:251](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L251)

#### mode

```ts
mode: "url";
```

#### message

```ts
message: string;
```

#### url

```ts
url: string;
```

---

---
url: /prefab/reference/api/mcp/type-aliases/McpElicitRequest.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpElicitRequest

# Type Alias: McpElicitRequest

```ts
type McpElicitRequest = 
  | McpElicitFormRequest
  | McpElicitUrlRequest;
```

Defined in: [mcp/types.ts:258](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L258)

---

---
url: /prefab/reference/api/mcp/type-aliases/McpInputRequests.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpInputRequests

# Type Alias: McpInputRequests

```ts
type McpInputRequests = Record<string, McpElicitRequest>;
```

Defined in: [mcp/types.ts:261](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L261)

Server-issued requests the client must fulfil before retrying the call.

---

---
url: /prefab/reference/api/mcp/type-aliases/McpElicitResult.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpElicitResult

# Type Alias: McpElicitResult

```ts
type McpElicitResult = object;
```

Defined in: [mcp/types.ts:264](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L264)

What the client sends back for one request, keyed the same way.

## Properties

### action

```ts
action: "accept" | "decline" | "cancel";
```

Defined in: [mcp/types.ts:265](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L265)

***

### content?

```ts
optional content?: Record<string, string | number | boolean | string[]>;
```

Defined in: [mcp/types.ts:266](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L266)

---

---
url: /prefab/reference/api/mcp/type-aliases/McpInputResponses.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpInputResponses

# Type Alias: McpInputResponses

```ts
type McpInputResponses = Record<string, McpElicitResult>;
```

Defined in: [mcp/types.ts:269](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L269)

---

---
url: /prefab/reference/api/mcp/type-aliases/McpInputRequiredResult.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / McpInputRequiredResult

# Type Alias: McpInputRequiredResult

```ts
type McpInputRequiredResult = object;
```

Defined in: [mcp/types.ts:279](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L279)

A result asking the client for input before the call can complete.

At least one of `inputRequests` or `requestState` must be present, and
`resultType` must be `'input_required'`: a server on this revision always
stamps the discriminator, and a client that does not see it treats the result
as `'complete'` and never retries.

## Properties

### resultType

```ts
resultType: "input_required";
```

Defined in: [mcp/types.ts:280](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L280)

***

### inputRequests?

```ts
optional inputRequests?: McpInputRequests;
```

Defined in: [mcp/types.ts:281](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L281)

***

### requestState?

```ts
optional requestState?: string;
```

Defined in: [mcp/types.ts:283](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L283)

Opaque state echoed back byte-for-byte on the retry.

***

### \_meta?

```ts
optional _meta?: Record<string, unknown>;
```

Defined in: [mcp/types.ts:284](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/types.ts#L284)

---

---
url: /prefab/reference/api/mcp/variables/A2UI_RESOURCE_URI.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / A2UI\_RESOURCE\_URI

# Variable: A2UI\_RESOURCE\_URI

```ts
const A2UI_RESOURCE_URI: "a2ui://prefab/surface";
```

Defined in: [mcp/a2ui.ts:46](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/a2ui.ts#L46)

Default URI for a server that serves a single A2UI surface.

---

---
url: /prefab/reference/api/mcp/variables/displayA2ui.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / displayA2ui

# Variable: displayA2ui

```ts
const displayA2ui: (viewOrApp, options?) => McpDisplayResult<A2uiMessageList> = display_a2ui;
```

Defined in: [mcp/a2ui.ts:190](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/a2ui.ts#L190)

camelCase alias, matching the other display helpers.

Return a view as an A2UI tool result.

The messages travel as an `EmbeddedResource` in `content`, which is where a
host looks for a payload it should route to its A2UI renderer, and as
`structuredContent` for hosts that read results structurally.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `viewOrApp` | `Component` | `PrefabApp` |
| `options?` | [`DisplayA2uiOptions`](../interfaces/DisplayA2uiOptions.md) |

## Returns

[`McpDisplayResult`](../type-aliases/McpDisplayResult.md)<`A2uiMessageList`>

## Example

```ts
import { display_a2ui } from '@maxhealth.tech/prefab/mcp'
import { autoTable } from '@maxhealth.tech/prefab'

server.registerTool('list-users', schema, async () =>
  display_a2ui(autoTable(await db.users())))
```

---

---
url: /prefab/reference/api/mcp/variables/displayForm.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / displayForm

# Variable: displayForm

```ts
const displayForm: {
  (fields, submitTool, options?): McpDisplayResult<PrefabWireFormat>;
  (fields, submitTool, options): McpInputRequiredResult;
} = display_form;
```

Defined in: [mcp/display.ts:367](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L367)

MCP display helpers — return prefab UIs as MCP tool results.

## Call Signature

```ts
(
   fields, 
   submitTool, 
options?): McpDisplayResult<PrefabWireFormat>;
```

Return a form UI as an MCP tool result.

Submitting the form calls the specified MCP tool (via CallTool).
Field definitions map to Input components; the submit action
invokes `submitTool` with all field values.

With `elicit`, the same fields are returned as an `input_required` result for
hosts that render no UI of their own.

### Parameters

| Parameter | Type |
| ------ | ------ |
| `fields` | [`AutoFormField`](../../auto/interfaces/AutoFormField.md)\[] |
| `submitTool` | `string` |
| `options?` | [`DisplayFormOptions`](../interfaces/DisplayFormOptions.md) & `object` |

### Returns

[`McpDisplayResult`](../type-aliases/McpDisplayResult.md)<`PrefabWireFormat`>

MCP tool result with form prefab UI.

## Call Signature

```ts
(
   fields, 
   submitTool, 
   options): McpInputRequiredResult;
```

Return a form UI as an MCP tool result.

Submitting the form calls the specified MCP tool (via CallTool).
Field definitions map to Input components; the submit action
invokes `submitTool` with all field values.

With `elicit`, the same fields are returned as an `input_required` result for
hosts that render no UI of their own.

### Parameters

| Parameter | Type |
| ------ | ------ |
| `fields` | [`AutoFormField`](../../auto/interfaces/AutoFormField.md)\[] |
| `submitTool` | `string` |
| `options` | [`DisplayFormOptions`](../interfaces/DisplayFormOptions.md) & `object` |

### Returns

[`McpInputRequiredResult`](../type-aliases/McpInputRequiredResult.md)

MCP tool result with form prefab UI.

---

---
url: /prefab/reference/api/mcp/variables/displayUpdate.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / displayUpdate

# Variable: displayUpdate

```ts
const displayUpdate: (state, options?) => McpDisplayResult<PrefabUpdateWire> = display_update;
```

Defined in: [mcp/display.ts:368](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L368)

MCP display helpers — return prefab UIs as MCP tool results.

Return a partial state update for an existing prefab UI.

Instead of re-rendering the entire UI, this sends a state delta
that the renderer merges into its reactive store. Optionally fires
actions after the state is applied.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `Record`<`string`, `unknown`> |
| `options?` | [`DisplayUpdateOptions`](../interfaces/DisplayUpdateOptions.md) |

## Returns

[`McpDisplayResult`](../type-aliases/McpDisplayResult.md)<[`PrefabUpdateWire`](../type-aliases/PrefabUpdateWire.md)>

MCP tool result with a $prefab update payload.

---

---
url: /prefab/reference/api/mcp/variables/displayError.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / displayError

# Variable: displayError

```ts
const displayError: (title, message, options?) => McpDisplayResult<PrefabWireFormat> = display_error;
```

Defined in: [mcp/display.ts:369](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L369)

MCP display helpers — return prefab UIs as MCP tool results.

Return a standardized error view as an MCP tool result.

Renders a destructive Alert with title + message, optional detail
code block, and optional hint. Sets `isError: true` on the MCP result.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `title` | `string` |
| `message` | `string` |
| `options?` | [`DisplayErrorOptions`](../interfaces/DisplayErrorOptions.md) |

## Returns

[`McpDisplayResult`](../type-aliases/McpDisplayResult.md)<`PrefabWireFormat`>

MCP tool result with error UI and isError flag.

---

---
url: /prefab/reference/api/mcp/variables/displaySuccess.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / displaySuccess

# Variable: displaySuccess

```ts
const displaySuccess: (title, message, options?) => McpDisplayResult<PrefabWireFormat> = display_success;
```

Defined in: [mcp/display.ts:370](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L370)

MCP display helpers — return prefab UIs as MCP tool results.

Return a standardized success view as an MCP tool result.

Renders a success Alert with title + message, optional detail text.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `title` | `string` |
| `message` | `string` |
| `options?` | [`DisplaySuccessOptions`](../interfaces/DisplaySuccessOptions.md) |

## Returns

[`McpDisplayResult`](../type-aliases/McpDisplayResult.md)<`PrefabWireFormat`>

MCP tool result with success UI.

---

---
url: /prefab/reference/api/mcp/variables/PREFAB_CDN_META.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / PREFAB\_CDN\_META

# Variable: PREFAB\_CDN\_META

```ts
const PREFAB_CDN_META: object;
```

Defined in: [mcp/resource.ts:119](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L119)

Default CSP meta for prefab apps using jsDelivr CDN.

## Type Declaration

### ui

```ts
ui: object;
```

#### ui.csp?

```ts
optional csp?: McpAppCsp;
```

#### ui.permissions?

```ts
optional permissions?: McpAppPermissionsWire;
```

---

---
url: /prefab/reference/api/mcp/variables/PREFAB_RESOURCE_URI.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / PREFAB\_RESOURCE\_URI

# Variable: PREFAB\_RESOURCE\_URI

```ts
const PREFAB_RESOURCE_URI: "ui://prefab/viewer" = 'ui://prefab/viewer';
```

Defined in: [mcp/resource.ts:126](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L126)

Default URI for the prefab viewer resource.

---

---
url: /prefab/reference/api/mcp/variables/MCP_APP_MIME.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / MCP\_APP\_MIME

# Variable: MCP\_APP\_MIME

```ts
const MCP_APP_MIME: "text/html;profile=mcp-app" = 'text/html;profile=mcp-app';
```

Defined in: [mcp/resource.ts:129](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L129)

MIME type required by MCP Apps hosts.

---

---
url: /prefab/reference/api/mcp/variables/APPS_EXTENSION.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / APPS\_EXTENSION

# Variable: APPS\_EXTENSION

```ts
const APPS_EXTENSION: "io.modelcontextprotocol/ui" = 'io.modelcontextprotocol/ui';
```

Defined in: [mcp/resource.ts:149](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L149)

Capability key for the MCP Apps extension (versioned independently of core).

The identifier is `…/ui`, and the trap here is that `…/apps` looks right and is
wrong. The normative source is the MCP Apps spec, which states "This extension is
identified as: `io.modelcontextprotocol/ui`" in both the current `2026-01-26`
revision and the draft, and the reference implementation agrees:
`ext-apps/src/server/index.ts` exports `EXTENSION_ID = "io.modelcontextprotocol/ui"`.

`io.modelcontextprotocol/apps` appears only as illustrative "e.g." text in the Rust
and C# SDKs' generic `ServerCapabilities.extensions` doc comments (and their test
fixtures), showing the SHAPE of the extensions map rather than naming this extension.
Copying it from there declares the capability under a key no host looks up, which
fails silently: rendering still works, because hosts fall back to detecting apps via
`_meta.ui` plus the MIME type, so only the SEP-2133 declaration is lost.

Duplicated as a literal rather than imported, because prefab ships zero dependencies.

---

---
url: /prefab/reference/api/mcp/variables/DEFAULT_VIEWER_CACHE.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / DEFAULT\_VIEWER\_CACHE

# Variable: DEFAULT\_VIEWER\_CACHE

```ts
const DEFAULT_VIEWER_CACHE: Required<McpCacheHint>;
```

Defined in: [mcp/resource.ts:159](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L159)

Default cache hint for the viewer resource.

The HTML is a pure function of this package's `VERSION` (the CDN base pins
the exact version), so it cannot change for a given server build — it is
safely shared-cacheable. Without this the SDK falls back to the conservative
`{ ttlMs: 0, cacheScope: 'private' }` and the viewer is re-fetched every time.

---

---
url: /prefab/reference/api/mcp/variables/VSCODE_BRIDGE.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / VSCODE\_BRIDGE

# Variable: VSCODE\_BRIDGE

```ts
const VSCODE_BRIDGE: Readonly<Record<string, VsCodeTokenSource>>;
```

Defined in: [mcp/theme-bridge.ts:36](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/theme-bridge.ts#L36)

prefab tokens that VS Code can supply, with the same variables and static
fallbacks `prefab.css` uses. Tokens VS Code has no equivalent for (`--success`,
`--warning`, shadows, radii) are deliberately absent: the bridge only overrides
what the editor can actually provide.

---

---
url: /prefab/reference/api/mcp/functions/a2uiPayload.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / a2uiPayload

# Function: a2uiPayload()

```ts
function a2uiPayload(messages): A2uiMessageList;
```

Defined in: [mcp/a2ui.ts:49](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/a2ui.ts#L49)

Wrap messages in the list envelope A2UI defines for non-streaming transports.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `messages` | `A2uiMessage`\[] |

## Returns

`A2uiMessageList`

---

---
url: /prefab/reference/api/mcp/functions/display_a2ui.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / display\_a2ui

# Function: display\_a2ui()

```ts
function display_a2ui(viewOrApp, options?): McpDisplayResult<A2uiMessageList>;
```

Defined in: [mcp/a2ui.ts:93](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/a2ui.ts#L93)

Return a view as an A2UI tool result.

The messages travel as an `EmbeddedResource` in `content`, which is where a
host looks for a payload it should route to its A2UI renderer, and as
`structuredContent` for hosts that read results structurally.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `viewOrApp` | `Component` | `PrefabApp` |
| `options?` | [`DisplayA2uiOptions`](../interfaces/DisplayA2uiOptions.md) |

## Returns

[`McpDisplayResult`](../type-aliases/McpDisplayResult.md)<`A2uiMessageList`>

## Example

```ts
import { display_a2ui } from '@maxhealth.tech/prefab/mcp'
import { autoTable } from '@maxhealth.tech/prefab'

server.registerTool('list-users', schema, async () =>
  display_a2ui(autoTable(await db.users())))
```

---

---
url: /prefab/reference/api/mcp/functions/registerA2uiResource.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / registerA2uiResource

# Function: registerA2uiResource()

```ts
function registerA2uiResource(
   server, 
   builder, 
   options?): void;
```

Defined in: [mcp/a2ui.ts:144](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/a2ui.ts#L144)

Register a static A2UI surface as an `a2ui://` resource.

Static is the point: a surface that does not depend on the conversation is
cheaper as a resource than as a tool, because the host can read it once and
cache it. Anything that varies per call belongs in [display\_a2ui](display_a2ui.md).

`builder` runs on every read rather than once at registration, so a surface
that closes over data refreshes without re-registering.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `server` | [`McpServerLike`](../interfaces/McpServerLike.md) |
| `builder` | () => `Component` | `PrefabApp` |
| `options?` | [`A2uiResourceOptions`](../interfaces/A2uiResourceOptions.md) |

## Returns

`void`

## Example

```ts
import { registerA2uiResource } from '@maxhealth.tech/prefab/mcp'
import { Column, H1, Input } from '@maxhealth.tech/prefab'

registerA2uiResource(server, () => Column({ children: [H1('Settings'), Input({ name: 'key', label: 'API key' })] }))
```

---

---
url: /prefab/reference/api/mcp/functions/display.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / display

# Function: display()

```ts
function display(viewOrApp, options?): McpDisplayResult<PrefabWireFormat>;
```

Defined in: [mcp/display.ts:72](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L72)

Wrap a Component (or PrefabApp) as an MCP tool result.

If given a Component, it's wrapped in a PrefabApp automatically.
If given a PrefabApp, it's serialized as-is.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `viewOrApp` | `Component` | `PrefabApp` |
| `options?` | [`DisplayOptions`](../interfaces/DisplayOptions.md) |

## Returns

[`McpDisplayResult`](../type-aliases/McpDisplayResult.md)<`PrefabWireFormat`>

MCP tool result with the prefab wire format JSON as text content.

---

---
url: /prefab/reference/api/mcp/functions/display_form.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / display\_form

# Function: display\_form()

MCP display helpers — return prefab UIs as MCP tool results.

## Call Signature

```ts
function display_form(
   fields, 
   submitTool, 
options?): McpDisplayResult<PrefabWireFormat>;
```

Defined in: [mcp/display.ts:162](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L162)

Return a form UI as an MCP tool result.

Submitting the form calls the specified MCP tool (via CallTool).
Field definitions map to Input components; the submit action
invokes `submitTool` with all field values.

With `elicit`, the same fields are returned as an `input_required` result for
hosts that render no UI of their own.

### Parameters

| Parameter | Type |
| ------ | ------ |
| `fields` | [`AutoFormField`](../../auto/interfaces/AutoFormField.md)\[] |
| `submitTool` | `string` |
| `options?` | [`DisplayFormOptions`](../interfaces/DisplayFormOptions.md) & `object` |

### Returns

[`McpDisplayResult`](../type-aliases/McpDisplayResult.md)<`PrefabWireFormat`>

MCP tool result with form prefab UI.

## Call Signature

```ts
function display_form(
   fields, 
   submitTool, 
   options): McpInputRequiredResult;
```

Defined in: [mcp/display.ts:167](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L167)

Return a form UI as an MCP tool result.

Submitting the form calls the specified MCP tool (via CallTool).
Field definitions map to Input components; the submit action
invokes `submitTool` with all field values.

With `elicit`, the same fields are returned as an `input_required` result for
hosts that render no UI of their own.

### Parameters

| Parameter | Type |
| ------ | ------ |
| `fields` | [`AutoFormField`](../../auto/interfaces/AutoFormField.md)\[] |
| `submitTool` | `string` |
| `options` | [`DisplayFormOptions`](../interfaces/DisplayFormOptions.md) & `object` |

### Returns

[`McpInputRequiredResult`](../type-aliases/McpInputRequiredResult.md)

MCP tool result with form prefab UI.

---

---
url: /prefab/reference/api/mcp/functions/display_update.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / display\_update

# Function: display\_update()

```ts
function display_update(state, options?): McpDisplayResult<PrefabUpdateWire>;
```

Defined in: [mcp/display.ts:245](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L245)

Return a partial state update for an existing prefab UI.

Instead of re-rendering the entire UI, this sends a state delta
that the renderer merges into its reactive store. Optionally fires
actions after the state is applied.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `Record`<`string`, `unknown`> |
| `options?` | [`DisplayUpdateOptions`](../interfaces/DisplayUpdateOptions.md) |

## Returns

[`McpDisplayResult`](../type-aliases/McpDisplayResult.md)<[`PrefabUpdateWire`](../type-aliases/PrefabUpdateWire.md)>

MCP tool result with a $prefab update payload.

---

---
url: /prefab/reference/api/mcp/functions/display_error.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / display\_error

# Function: display\_error()

```ts
function display_error(
   title, 
   message, 
options?): McpDisplayResult<PrefabWireFormat>;
```

Defined in: [mcp/display.ts:285](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L285)

Return a standardized error view as an MCP tool result.

Renders a destructive Alert with title + message, optional detail
code block, and optional hint. Sets `isError: true` on the MCP result.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `title` | `string` |
| `message` | `string` |
| `options?` | [`DisplayErrorOptions`](../interfaces/DisplayErrorOptions.md) |

## Returns

[`McpDisplayResult`](../type-aliases/McpDisplayResult.md)<`PrefabWireFormat`>

MCP tool result with error UI and isError flag.

---

---
url: /prefab/reference/api/mcp/functions/display_success.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / display\_success

# Function: display\_success()

```ts
function display_success(
   title, 
   message, 
options?): McpDisplayResult<PrefabWireFormat>;
```

Defined in: [mcp/display.ts:336](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/display.ts#L336)

Return a standardized success view as an MCP tool result.

Renders a success Alert with title + message, optional detail text.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `title` | `string` |
| `message` | `string` |
| `options?` | [`DisplaySuccessOptions`](../interfaces/DisplaySuccessOptions.md) |

## Returns

[`McpDisplayResult`](../type-aliases/McpDisplayResult.md)<`PrefabWireFormat`>

MCP tool result with success UI.

---

---
url: /prefab/reference/api/mcp/functions/formSchema.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / formSchema

# Function: formSchema()

```ts
function formSchema(fields): McpRestrictedSchema;
```

Defined in: [mcp/input-required.ts:142](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/input-required.ts#L142)

Derive the restricted elicitation schema from form fields.

This is the same field list `autoForm` renders, so the elicitation and the
prefab form always ask for the same thing.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `fields` | [`AutoFormField`](../../auto/interfaces/AutoFormField.md)\[] |

## Returns

[`McpRestrictedSchema`](../type-aliases/McpRestrictedSchema.md)

---

---
url: /prefab/reference/api/mcp/functions/formInputRequest.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / formInputRequest

# Function: formInputRequest()

```ts
function formInputRequest(fields, options?): McpInputRequiredResult;
```

Defined in: [mcp/input-required.ts:173](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/input-required.ts#L173)

Ask the client to collect these fields, then retry the call.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `fields` | [`AutoFormField`](../../auto/interfaces/AutoFormField.md)\[] |
| `options?` | [`FormInputRequestOptions`](../interfaces/FormInputRequestOptions.md) |

## Returns

[`McpInputRequiredResult`](../type-aliases/McpInputRequiredResult.md)

an `input_required` result, ready to return from a tool handler.

---

---
url: /prefab/reference/api/mcp/functions/inputResponse.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / inputResponse

# Function: inputResponse()

```ts
function inputResponse(responses, key): McpElicitResult | undefined;
```

Defined in: [mcp/input-required.ts:202](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/input-required.ts#L202)

A client's answer for one key, or `undefined` when it has not arrived yet.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `responses` | [`McpInputResponses`](../type-aliases/McpInputResponses.md) | `undefined` |
| `key` | `string` |

## Returns

[`McpElicitResult`](../type-aliases/McpElicitResult.md) | `undefined`

---

---
url: /prefab/reference/api/mcp/functions/acceptedFormInput.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / acceptedFormInput

# Function: acceptedFormInput()

```ts
function acceptedFormInput(
   responses, 
   key, 
   fields): 
  | Record<string, FormValue>
  | undefined;
```

Defined in: [mcp/input-required.ts:223](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/input-required.ts#L223)

Read and check an accepted form answer.

`inputResponses` comes from the client and is untrusted, so the content is
checked against the same field list that produced the schema: unknown keys
are dropped, wrong types are rejected, and a missing required field fails the
whole answer. A declined or cancelled elicitation returns `undefined` exactly
like a first entry — re-requesting is only the right move for all three when
the request is idempotent, so read [inputResponse](inputResponse.md) directly when a
refusal has to be told apart from a first pass.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `responses` | [`McpInputResponses`](../type-aliases/McpInputResponses.md) | `undefined` |
| `key` | `string` |
| `fields` | [`AutoFormField`](../../auto/interfaces/AutoFormField.md)\[] |

## Returns

| `Record`<`string`, [`FormValue`](../type-aliases/FormValue.md)>
| `undefined`

---

---
url: /prefab/reference/api/mcp/functions/resourceMeta.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / resourceMeta

# Function: resourceMeta()

```ts
function resourceMeta(options?): object;
```

Defined in: [mcp/resource.ts:95](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L95)

Generate the `_meta` object for MCP Apps `ui://` resource registration.

Includes CSP and Permission Policy configuration per the MCP Apps spec.
Use on both the resource listing AND the content item (VS Code reads
only the content item; other hosts may read either).

## Parameters

| Parameter | Type |
| ------ | ------ |
| `options?` | [`ResourceMetaOptions`](../interfaces/ResourceMetaOptions.md) |

## Returns

`object`

### ui

```ts
ui: object;
```

#### ui.csp?

```ts
optional csp?: McpAppCsp;
```

#### ui.permissions?

```ts
optional permissions?: McpAppPermissionsWire;
```

## Example

```ts
const meta = resourceMeta({
  csp: { resourceDomains: ['https://cdn.jsdelivr.net'] },
  permissions: { camera: true },
})

server.registerResource('viewer', 'ui://my/viewer', {
  mimeType: 'text/html;profile=mcp-app',
  _meta: meta,
  cacheHint: { ttlMs: 86_400_000, cacheScope: 'public' },
}, (uri) => Promise.resolve({
  contents: [{ uri: uri.toString(), mimeType: 'text/html;profile=mcp-app', text: html, _meta: meta }],
  ttlMs: 86_400_000,
  cacheScope: 'public',
}))

// The UI resource is associated with a tool on the tool DEFINITION, not
// on its result:
server.registerTool('browse', {
  title: 'Browse',
  inputSchema: schema,
  _meta: { ui: { resourceUri: 'ui://my/viewer' } },
}, (args) => display(autoTable(rows)))
```

---

---
url: /prefab/reference/api/mcp/functions/rendererHtml.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / rendererHtml

# Function: rendererHtml()

```ts
function rendererHtml(options?): string;
```

Defined in: [mcp/resource.ts:216](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L216)

Generate the HTML page for a prefab MCP Apps viewer resource.

Returns the minimal HTML that loads `prefab.css` and `renderer.auto.min.js`
from the CDN, plus any additional scripts/stylesheets you specify.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `options?` | [`RendererHtmlOptions`](../interfaces/RendererHtmlOptions.md) |

## Returns

`string`

## Example

```ts
import { rendererHtml } from '@maxhealth.tech/prefab/mcp'
const html = rendererHtml()
// or with extra scripts:
const html = rendererHtml({ scripts: ['https://cdn.example.com/plugin.js'] })
// inside VS Code, to follow the user's editor theme:
const html = rendererHtml({ themeBridge: 'vscode' })
```

---

---
url: /prefab/reference/api/mcp/functions/resolveCache.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / resolveCache

# Function: resolveCache()

```ts
function resolveCache(hint?, defaults?): Required<McpCacheHint>;
```

Defined in: [mcp/resource.ts:325](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L325)

Fill in and validate the `CacheableResult` fields, rejecting values the SDK
would silently discard in favour of `ttlMs: 0`.

`defaults` differ per resource kind: the viewer HTML is a pure function of the
package version and is safely shared-cacheable, while an `a2ui://` surface is
rebuilt on every read and defaults to no caching. Exported so `./a2ui.ts`
resolves its hints through the same guard rather than restating it.

## Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `hint?` | [`McpCacheHint`](../type-aliases/McpCacheHint.md) | `undefined` |
| `defaults?` | `Required`<[`McpCacheHint`](../type-aliases/McpCacheHint.md)> | `DEFAULT_VIEWER_CACHE` |

## Returns

`Required`<[`McpCacheHint`](../type-aliases/McpCacheHint.md)>

---

---
url: /prefab/reference/api/mcp/functions/registerViewerResource.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / registerViewerResource

# Function: registerViewerResource()

```ts
function registerViewerResource(server, options?): void;
```

Defined in: [mcp/resource.ts:376](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/resource.ts#L376)

Register the prefab viewer as a `ui://` resource on an MCP server.

Handles the MIME type, CSP on both listing and content item, HTML generation,
the `CacheableResult` fields and the Apps extension capability in one call.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `server` | [`McpServerLike`](../interfaces/McpServerLike.md) |
| `options?` | [`ViewerResourceOptions`](../interfaces/ViewerResourceOptions.md) |

## Returns

`void`

## Example

```ts
import { registerViewerResource, PREFAB_RESOURCE_URI, display } from '@maxhealth.tech/prefab/mcp'

registerViewerResource(server)

// The UI resource is attached to the tool DEFINITION via _meta.ui:
server.registerTool('browse', {
  title: 'Browse patients',
  inputSchema: { query: z.string() },
  _meta: { ui: { resourceUri: PREFAB_RESOURCE_URI } },
}, async (args) => display(autoTable(await search(args.query))))
```

---

---
url: /prefab/reference/api/mcp/functions/toolResult.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / toolResult

# Function: toolResult()

```ts
function toolResult<T>(payload, options?): McpDisplayResult<T>;
```

Defined in: [mcp/result.ts:46](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/result.ts#L46)

Wrap a JSON payload as an MCP tool result.

The payload is serialized into `content[0].text` (for hosts and models that
read text) and passed through as `structuredContent` (for MCP Apps iframes,
which receive it via `ui/notifications/tool-result`).

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `payload` | `T` |
| `options?` | [`ToolResultOptions`](../interfaces/ToolResultOptions.md) |

## Returns

[`McpDisplayResult`](../type-aliases/McpDisplayResult.md)<`T`>

## Example

```ts
import { toolResult } from '@maxhealth.tech/prefab/mcp'

// Returning pre-built wire JSON from your own tool handler:
return toolResult(wireJson)
```

---

---
url: /prefab/reference/api/mcp/functions/themeBridgeCss.md
---
[@maxhealth.tech/prefab](../../index.md) / [mcp](../index.md) / themeBridgeCss

# Function: themeBridgeCss()

```ts
function themeBridgeCss(bridge): string;
```

Defined in: [mcp/theme-bridge.ts:108](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/mcp/theme-bridge.ts#L108)

Generate the theme-bridge CSS (the contents of a `<style>` element).

Mirrors the selectors `prefab.css` uses for *host-driven* tokens, so the
override lands in both schemes rather than only in light mode: the `:root`
default (alongside `[data-theme="light"]`, whose higher specificity would
otherwise win) and the `prefers-color-scheme: dark` media block. Each selector
matches its counterpart's specificity and is emitted after `prefab.css`, so it
wins on document order.

`:root[data-theme="dark"]` is deliberately NOT bridged. That block is
prefab's standalone dark palette with static values and no host chain at all,
the explicit separation of host theming (which cascades) from the manual theme
toggle. Overriding it would make an app that pins `data-theme="dark"` follow
the editor instead of its own choice.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `bridge` | `"vscode"` |

## Returns

`string`

## Example

```ts
const html = rendererHtml({ themeBridge: 'vscode' })
```

---

---
url: /prefab/reference/api/renderer.md
---
[@maxhealth.tech/prefab](../index.md) / renderer

# renderer

## Classes

| Class | Description |
| ------ | ------ |
| [Bridge](classes/Bridge.md) | - |
| [DestroyRegistry](classes/DestroyRegistry.md) | Tracks destroy callbacks for mounted components within a render cycle. |

## Interfaces

| Interface | Description |
| ------ | ------ |
| [Logger](interfaces/Logger.md) | - |
| [AppOptions](interfaces/AppOptions.md) | - |
| [PrefabApp](interfaces/PrefabApp.md) | - |
| [MountHandle](interfaces/MountHandle.md) | - |
| [BridgeMessage](interfaces/BridgeMessage.md) | - |
| [AppCapabilities](interfaces/AppCapabilities.md) | - |
| [HostCapabilities](interfaces/HostCapabilities.md) | - |
| [HostContext](interfaces/HostContext.md) | - |
| [HostTheme](interfaces/HostTheme.md) | - |
| [ComponentNode](interfaces/ComponentNode.md) | - |
| [RenderContext](interfaces/RenderContext.md) | - |
| [RenderResult](interfaces/RenderResult.md) | Result of a render function that includes a cleanup callback. |
| [PrefabWireData](interfaces/PrefabWireData.md) | - |
| [PrefabUpdateData](interfaces/PrefabUpdateData.md) | - |
| [MountOptions](interfaces/MountOptions.md) | - |
| [MountedApp](interfaces/MountedApp.md) | - |
| [ThemeToggleOptions](interfaces/ThemeToggleOptions.md) | - |

## Type Aliases

| Type Alias | Description |
| ------ | ------ |
| [LogLevel](type-aliases/LogLevel.md) | Centralized logger — the single sink for all prefab console output. |
| [DisplayMode](type-aliases/DisplayMode.md) | - |
| [RenderFnReturn](type-aliases/RenderFnReturn.md) | - |
| [RenderFn](type-aliases/RenderFn.md) | - |

## Variables

| Variable | Description |
| ------ | ------ |
| [log](variables/log.md) | Default unscoped logger — `[prefab] …`. |
| [PrefabRenderer](variables/PrefabRenderer.md) | - |

## Functions

| Function | Description |
| ------ | ------ |
| [setLogLevel](functions/setLogLevel.md) | - |
| [getLogLevel](functions/getLogLevel.md) | - |
| [createLogger](functions/createLogger.md) | Create a scoped logger. Output is prefixed `[prefab]` (no scope) or `[prefab:<scope>]`, matching prefab's existing console convention. |
| [validateWireFormat](functions/validateWireFormat.md) | Validate a wire format payload. Returns `{ valid: true, errors: [] }` if OK, or `{ valid: false, errors: [...] }` with details about what's wrong. |
| [isValidWireFormat](functions/isValidWireFormat.md) | Quick boolean check — returns true if data looks like valid $prefab wire format. |
| [app](functions/app.md) | Create a prefab app. Auto-detects iframe vs standalone. |
| [applyHostTheme](functions/applyHostTheme.md) | - |
| [isIframe](functions/isIframe.md) | - |
| [registerComponent](functions/registerComponent.md) | Register a render function for a component type |
| [createThemeToggle](functions/createThemeToggle.md) | Create a theme toggle button inside a prefab root element. |

## References

### registerPipe

Re-exports [registerPipe](../rx/functions/registerPipe.md)

***

### unregisterPipe

Re-exports [unregisterPipe](../rx/functions/unregisterPipe.md)

***

### listPipes

Re-exports [listPipes](../rx/functions/listPipes.md)

***

### PipeFn

Re-exports [PipeFn](../rx/type-aliases/PipeFn.md)

---

---
url: /prefab/reference/api/renderer/classes/Bridge.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / Bridge

# Class: Bridge

Defined in: [renderer/bridge.ts:100](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L100)

## Constructors

### Constructor

```ts
new Bridge(hostOrigin?): Bridge;
```

Defined in: [renderer/bridge.ts:117](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L117)

#### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `hostOrigin` | `string` | `'*'` |

#### Returns

`Bridge`

## Accessors

### supportsSubscriptions

#### Get Signature

```ts
get supportsSubscriptions(): boolean;
```

Defined in: [renderer/bridge.ts:320](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L320)

Whether the host indicated subscription support during handshake.

##### Returns

`boolean`

***

### activeProtocol

#### Get Signature

```ts
get activeProtocol(): "prefab" | "jsonrpc";
```

Defined in: [renderer/bridge.ts:354](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L354)

Which protocol is active after initialize().

##### Returns

`"prefab"` | `"jsonrpc"`

## Methods

### connect()

```ts
connect(): void;
```

Defined in: [renderer/bridge.ts:122](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L122)

Start listening for messages (prefab:\* and JSON-RPC ui/\*).

#### Returns

`void`

***

### initialize()

```ts
initialize(appCapabilities): Promise<HostContext>;
```

Defined in: [renderer/bridge.ts:174](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L174)

Init handshake. Races prefab:init and ui/initialize JSON-RPC in parallel.
Whichever protocol responds first wins.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `appCapabilities` | [`AppCapabilities`](../interfaces/AppCapabilities.md) |

#### Returns

`Promise`<[`HostContext`](../interfaces/HostContext.md)>

***

### createTransport()

```ts
createTransport(): McpTransport;
```

Defined in: [renderer/bridge.ts:190](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L190)

Create an McpTransport that routes through the active protocol.

#### Returns

`McpTransport`

***

### requestMode()

```ts
requestMode(mode): void;
```

Defined in: [renderer/bridge.ts:198](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L198)

Request a display mode change.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `mode` | [`DisplayMode`](../type-aliases/DisplayMode.md) |

#### Returns

`void`

***

### openLink()

```ts
openLink(url, target?): void;
```

Defined in: [renderer/bridge.ts:207](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L207)

Request the host to open a URL.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `url` | `string` |
| `target?` | `string` |

#### Returns

`void`

***

### updateContext()

```ts
updateContext(context): void;
```

Defined in: [renderer/bridge.ts:216](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L216)

Send context updates to the host.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `context` | `Record`<`string`, `unknown`> |

#### Returns

`void`

***

### setupAutoResize()

```ts
setupAutoResize(el): () => void;
```

Defined in: [renderer/bridge.ts:233](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L233)

Observe an element's size and notify the host whenever it changes.
Mirrors the ext-apps SDK's `autoResize: true` behaviour — uses a
`ResizeObserver` on the target element and sends
`ui/notifications/size-changed` (JSON-RPC) or
`prefab:size-changed` (prefab protocol).

Returns a teardown function that disconnects the observer.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `el` | `HTMLElement` |

#### Returns

() => `void`

***

### notifyPreferredSize()

```ts
notifyPreferredSize(layout): void;
```

Defined in: [renderer/bridge.ts:279](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L279)

Notify the host of declarative layout/size hints from the wire format.
Sends once when the UI mounts so the host can pre-allocate space.

Uses `ui/notifications/preferred-size` (JSON-RPC) or
`prefab:preferred-size` (prefab protocol).

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `layout` | { `preferredHeight?`: `number`; `minHeight?`: `number`; `maxHeight?`: `number`; } |
| `layout.preferredHeight?` | `number` |
| `layout.minHeight?` | `number` |
| `layout.maxHeight?` | `number` |

#### Returns

`void`

***

### subscribe()

```ts
subscribe(uri, onData): () => void;
```

Defined in: [renderer/bridge.ts:295](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L295)

Subscribe to a resource URI for real-time push updates.

Sends `ui/resources/subscribe` (JSON-RPC) or `prefab:subscribe` (prefab)
to the host and registers a listener for incoming update notifications.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `uri` | `string` |
| `onData` | (`data`) => `void` |

#### Returns

Cleanup function that unsubscribes from the resource.

() => `void`

***

### on()

```ts
on(type, handler): void;
```

Defined in: [renderer/bridge.ts:325](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L325)

Register a handler for a message type (prefab:\* or internal).

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `type` | `string` |
| `handler` | (`payload`) => `void` |

#### Returns

`void`

***

### off()

```ts
off(type, handler): void;
```

Defined in: [renderer/bridge.ts:334](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L334)

Remove a handler.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `type` | `string` |
| `handler` | (`payload`) => `void` |

#### Returns

`void`

***

### disconnect()

```ts
disconnect(): void;
```

Defined in: [renderer/bridge.ts:339](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L339)

Disconnect and clean up.

#### Returns

`void`

---

---
url: /prefab/reference/api/renderer/classes/DestroyRegistry.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / DestroyRegistry

# Class: DestroyRegistry

Defined in: [renderer/engine.ts:82](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L82)

Tracks destroy callbacks for mounted components within a render cycle.

## Constructors

### Constructor

```ts
new DestroyRegistry(): DestroyRegistry;
```

#### Returns

`DestroyRegistry`

## Accessors

### size

#### Get Signature

```ts
get size(): number;
```

Defined in: [renderer/engine.ts:99](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L99)

Number of registered callbacks (for testing).

##### Returns

`number`

## Methods

### track()

```ts
track(cb): void;
```

Defined in: [renderer/engine.ts:86](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L86)

Register a destroy callback.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `cb` | () => `void` |

#### Returns

`void`

***

### flush()

```ts
flush(): void;
```

Defined in: [renderer/engine.ts:91](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L91)

Call all registered destroy callbacks and clear the list.

#### Returns

`void`

---

---
url: /prefab/reference/api/renderer/interfaces/Logger.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / Logger

# Interface: Logger

Defined in: [core/logger.ts:36](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/core/logger.ts#L36)

## Methods

### error()

```ts
error(message, ...args): void;
```

Defined in: [core/logger.ts:37](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/core/logger.ts#L37)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `message` | `string` |
| ...`args` | `unknown`\[] |

#### Returns

`void`

***

### warn()

```ts
warn(message, ...args): void;
```

Defined in: [core/logger.ts:38](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/core/logger.ts#L38)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `message` | `string` |
| ...`args` | `unknown`\[] |

#### Returns

`void`

***

### info()

```ts
info(message, ...args): void;
```

Defined in: [core/logger.ts:39](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/core/logger.ts#L39)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `message` | `string` |
| ...`args` | `unknown`\[] |

#### Returns

`void`

***

### debug()

```ts
debug(message, ...args): void;
```

Defined in: [core/logger.ts:40](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/core/logger.ts#L40)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `message` | `string` |
| ...`args` | `unknown`\[] |

#### Returns

`void`

---

---
url: /prefab/reference/api/renderer/interfaces/AppOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / AppOptions

# Interface: AppOptions

Defined in: [renderer/app.ts:40](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L40)

## Properties

### mode?

```ts
optional mode?: "auto" | "bridge" | "standalone";
```

Defined in: [renderer/app.ts:42](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L42)

Override environment detection: force bridge or standalone mode.

***

### hostOrigin?

```ts
optional hostOrigin?: string;
```

Defined in: [renderer/app.ts:44](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L44)

Allowed host origin for postMessage (default: '\*'). Set explicitly in production.

***

### transport?

```ts
optional transport?: McpTransportOptions;
```

Defined in: [renderer/app.ts:46](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L46)

HTTP transport options (for standalone mode).

***

### capabilities?

```ts
optional capabilities?: AppCapabilities;
```

Defined in: [renderer/app.ts:48](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L48)

App capabilities to advertise to host.

---

---
url: /prefab/reference/api/renderer/interfaces/PrefabApp.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / PrefabApp

# Interface: PrefabApp

Defined in: [renderer/app.ts:55](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L55)

## Properties

### callTool

```ts
callTool: (name, args?) => Promise<unknown>;
```

Defined in: [renderer/app.ts:57](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L57)

Call an MCP tool through the transport.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `name` | `string` |
| `args?` | `Record`<`string`, `unknown`> |

#### Returns

`Promise`<`unknown`>

***

### sendMessage

```ts
sendMessage: (message) => Promise<void>;
```

Defined in: [renderer/app.ts:59](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L59)

Send a message through the transport.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `message` | `string` |

#### Returns

`Promise`<`void`>

***

### onToolInput

```ts
onToolInput: (handler) => void;
```

Defined in: [renderer/app.ts:61](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L61)

Register a handler for tool input from the host.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `handler` | `ToolInputHandler` |

#### Returns

`void`

***

### onToolResult

```ts
onToolResult: (handler) => void;
```

Defined in: [renderer/app.ts:63](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L63)

Register a handler for tool results from the host.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `handler` | `ToolResultHandler` |

#### Returns

`void`

***

### onToolCancelled

```ts
onToolCancelled: (handler) => void;
```

Defined in: [renderer/app.ts:65](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L65)

Register a handler for tool cancellation.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `handler` | `VoidHandler` |

#### Returns

`void`

***

### onToolInputPartial

```ts
onToolInputPartial: (handler) => void;
```

Defined in: [renderer/app.ts:67](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L67)

Register a handler for partial/streaming tool input.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `handler` | `ToolInputHandler` |

#### Returns

`void`

***

### onHostContextChanged

```ts
onHostContextChanged: (handler) => void;
```

Defined in: [renderer/app.ts:69](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L69)

Register a handler for host context changes (full params from host-context-changed).

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `handler` | (`context`) => `void` |

#### Returns

`void`

***

### render

```ts
render: (target, ...components) => MountHandle;
```

Defined in: [renderer/app.ts:71](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L71)

Render a component tree into a DOM element.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `target` | `string` | `HTMLElement` |
| ...`components` | [`ComponentNode`](ComponentNode.md)\[] |

#### Returns

[`MountHandle`](MountHandle.md)

***

### mount

```ts
mount: (target, data, opts?) => MountedApp;
```

Defined in: [renderer/app.ts:73](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L73)

Mount full wire-format data (legacy API).

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `target` | `string` | `HTMLElement` |
| `data` | [`PrefabWireData`](PrefabWireData.md) |
| `opts?` | [`MountOptions`](MountOptions.md) |

#### Returns

[`MountedApp`](MountedApp.md)

***

### requestMode

```ts
requestMode: (mode) => void;
```

Defined in: [renderer/app.ts:75](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L75)

Request a display mode change.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `mode` | [`DisplayMode`](../type-aliases/DisplayMode.md) |

#### Returns

`void`

***

### openLink

```ts
openLink: (url, target?) => void;
```

Defined in: [renderer/app.ts:77](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L77)

Request the host to open a URL.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `url` | `string` |
| `target?` | `string` |

#### Returns

`void`

***

### updateContext

```ts
updateContext: (context) => void;
```

Defined in: [renderer/app.ts:79](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L79)

Send context updates.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `context` | `Record`<`string`, `unknown`> |

#### Returns

`void`

***

### setupAutoResize

```ts
setupAutoResize: (target) => () => void;
```

Defined in: [renderer/app.ts:85](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L85)

Observe an element and notify the host whenever it resizes.
Mirrors the ext-apps SDK `autoResize: true` behaviour.
Returns a teardown function that disconnects the observer.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `target` | `string` | `HTMLElement` |

#### Returns

() => `void`

***

### notifyPreferredSize

```ts
notifyPreferredSize: (layout) => void;
```

Defined in: [renderer/app.ts:90](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L90)

Notify the host of declarative layout/size preferences from the wire format.
Called automatically when mounting wire data with a `layout` field.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `layout` | { `preferredHeight?`: `number`; `minHeight?`: `number`; `maxHeight?`: `number`; } |
| `layout.preferredHeight?` | `number` |
| `layout.minHeight?` | `number` |
| `layout.maxHeight?` | `number` |

#### Returns

`void`

***

### host

```ts
host: HostContext;
```

Defined in: [renderer/app.ts:92](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L92)

Host context from initialization.

***

### capabilities

```ts
capabilities: HostCapabilities;
```

Defined in: [renderer/app.ts:94](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L94)

Host capabilities.

***

### theme

```ts
theme: HostTheme | undefined;
```

Defined in: [renderer/app.ts:96](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L96)

Host theme (if provided).

***

### transport

```ts
transport: McpTransport;
```

Defined in: [renderer/app.ts:98](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L98)

The underlying MCP transport.

***

### destroy

```ts
destroy: () => void;
```

Defined in: [renderer/app.ts:100](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L100)

Destroy the app and clean up.

#### Returns

`void`

---

---
url: /prefab/reference/api/renderer/interfaces/MountHandle.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / MountHandle

# Interface: MountHandle

Defined in: [renderer/app.ts:103](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L103)

## Properties

### rerender

```ts
rerender: () => void;
```

Defined in: [renderer/app.ts:105](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L105)

Re-render the current component tree.

#### Returns

`void`

***

### store

```ts
store: Store;
```

Defined in: [renderer/app.ts:107](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L107)

Access the reactive store.

***

### destroy

```ts
destroy: () => void;
```

Defined in: [renderer/app.ts:109](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L109)

Unmount.

#### Returns

`void`

---

---
url: /prefab/reference/api/renderer/interfaces/BridgeMessage.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / BridgeMessage

# Interface: BridgeMessage\<T>

Defined in: [renderer/bridge.ts:32](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L32)

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` *extends* `string` | `string` |

## Properties

### type

```ts
type: T;
```

Defined in: [renderer/bridge.ts:33](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L33)

***

### id?

```ts
optional id?: string;
```

Defined in: [renderer/bridge.ts:34](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L34)

***

### payload?

```ts
optional payload?: Record<string, unknown>;
```

Defined in: [renderer/bridge.ts:35](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L35)

---

---
url: /prefab/reference/api/renderer/interfaces/AppCapabilities.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / AppCapabilities

# Interface: AppCapabilities

Defined in: [renderer/bridge.ts:38](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L38)

## Properties

### toolInput?

```ts
optional toolInput?: boolean;
```

Defined in: [renderer/bridge.ts:39](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L39)

***

### partialInput?

```ts
optional partialInput?: boolean;
```

Defined in: [renderer/bridge.ts:40](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L40)

***

### displayModes?

```ts
optional displayModes?: DisplayMode[];
```

Defined in: [renderer/bridge.ts:41](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L41)

***

### version?

```ts
optional version?: string;
```

Defined in: [renderer/bridge.ts:42](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L42)

---

---
url: /prefab/reference/api/renderer/interfaces/HostCapabilities.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / HostCapabilities

# Interface: HostCapabilities

Defined in: [renderer/bridge.ts:45](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L45)

## Properties

### toast?

```ts
optional toast?: boolean;
```

Defined in: [renderer/bridge.ts:46](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L46)

***

### clipboard?

```ts
optional clipboard?: boolean;
```

Defined in: [renderer/bridge.ts:47](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L47)

***

### navigation?

```ts
optional navigation?: boolean;
```

Defined in: [renderer/bridge.ts:48](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L48)

***

### displayModes?

```ts
optional displayModes?: DisplayMode[];
```

Defined in: [renderer/bridge.ts:49](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L49)

***

### messaging?

```ts
optional messaging?: boolean;
```

Defined in: [renderer/bridge.ts:50](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L50)

---

---
url: /prefab/reference/api/renderer/interfaces/HostContext.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / HostContext

# Interface: HostContext

Defined in: [renderer/bridge.ts:55](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L55)

## Properties

### hostName?

```ts
optional hostName?: string;
```

Defined in: [renderer/bridge.ts:56](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L56)

***

### hostVersion?

```ts
optional hostVersion?: string;
```

Defined in: [renderer/bridge.ts:57](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L57)

***

### capabilities

```ts
capabilities: HostCapabilities;
```

Defined in: [renderer/bridge.ts:58](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L58)

***

### theme?

```ts
optional theme?: HostTheme;
```

Defined in: [renderer/bridge.ts:59](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L59)

***

### toolInput?

```ts
optional toolInput?: Record<string, unknown>;
```

Defined in: [renderer/bridge.ts:60](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L60)

***

### meta?

```ts
optional meta?: Record<string, unknown>;
```

Defined in: [renderer/bridge.ts:61](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L61)

---

---
url: /prefab/reference/api/renderer/interfaces/HostTheme.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / HostTheme

# Interface: HostTheme

Defined in: [renderer/bridge.ts:64](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L64)

## Properties

### variables?

```ts
optional variables?: Record<string, string>;
```

Defined in: [renderer/bridge.ts:65](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L65)

***

### colorScheme?

```ts
optional colorScheme?: "light" | "dark" | "auto";
```

Defined in: [renderer/bridge.ts:66](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L66)

***

### fontCss?

```ts
optional fontCss?: string;
```

Defined in: [renderer/bridge.ts:68](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L68)

---

---
url: /prefab/reference/api/renderer/interfaces/ComponentNode.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / ComponentNode

# Interface: ComponentNode

Defined in: [renderer/engine.ts:46](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L46)

## Indexable

```ts
[key: string]: unknown
```

## Properties

### type

```ts
type: string;
```

Defined in: [renderer/engine.ts:47](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L47)

***

### id?

```ts
optional id?: string;
```

Defined in: [renderer/engine.ts:48](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L48)

***

### cssClass?

```ts
optional cssClass?: string;
```

Defined in: [renderer/engine.ts:49](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L49)

***

### onMount?

```ts
optional onMount?: ActionJSON | ActionJSON[];
```

Defined in: [renderer/engine.ts:50](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L50)

***

### children?

```ts
optional children?: ComponentNode[];
```

Defined in: [renderer/engine.ts:51](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L51)

---

---
url: /prefab/reference/api/renderer/interfaces/RenderContext.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / RenderContext

# Interface: RenderContext

Defined in: [renderer/engine.ts:55](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L55)

## Properties

### store

```ts
store: Store;
```

Defined in: [renderer/engine.ts:56](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L56)

***

### scope

```ts
scope: EvalScope;
```

Defined in: [renderer/engine.ts:57](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L57)

***

### transport?

```ts
optional transport?: McpTransport;
```

Defined in: [renderer/engine.ts:58](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L58)

***

### rerender

```ts
rerender: () => void;
```

Defined in: [renderer/engine.ts:59](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L59)

#### Returns

`void`

***

### onToast?

```ts
optional onToast?: (toast) => void;
```

Defined in: [renderer/engine.ts:60](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L60)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `toast` | `ToastEvent` |

#### Returns

`void`

***

### remount?

```ts
optional remount?: (data) => void;
```

Defined in: [renderer/engine.ts:62](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L62)

Replace the current view with a new prefab wire payload (server-rendered pattern).

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `data` | `Record`<`string`, `unknown`> |

#### Returns

`void`

***

### defs?

```ts
optional defs?: Record<string, ComponentNode>;
```

Defined in: [renderer/engine.ts:63](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L63)

***

### templates?

```ts
optional templates?: Record<string, ComponentNode[]>;
```

Defined in: [renderer/engine.ts:64](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L64)

***

### slots?

```ts
optional slots?: Record<string, ComponentNode[]>;
```

Defined in: [renderer/engine.ts:65](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L65)

***

### destroyRegistry?

```ts
optional destroyRegistry?: DestroyRegistry;
```

Defined in: [renderer/engine.ts:66](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L66)

---

---
url: /prefab/reference/api/renderer/interfaces/RenderResult.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / RenderResult

# Interface: RenderResult

Defined in: [renderer/engine.ts:70](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L70)

Result of a render function that includes a cleanup callback.

## Properties

### element

```ts
element: HTMLElement | DocumentFragment;
```

Defined in: [renderer/engine.ts:71](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L71)

***

### destroy

```ts
destroy: () => void;
```

Defined in: [renderer/engine.ts:72](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L72)

#### Returns

`void`

---

---
url: /prefab/reference/api/renderer/interfaces/PrefabWireData.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / PrefabWireData

# Interface: PrefabWireData

Defined in: [renderer/index.ts:74](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L74)

## Properties

### $prefab

```ts
$prefab: object;
```

Defined in: [renderer/index.ts:75](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L75)

#### version

```ts
version: string;
```

***

### view

```ts
view: ComponentNode;
```

Defined in: [renderer/index.ts:76](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L76)

***

### state?

```ts
optional state?: Record<string, unknown>;
```

Defined in: [renderer/index.ts:77](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L77)

***

### theme?

```ts
optional theme?: object;
```

Defined in: [renderer/index.ts:79](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L79)

Legacy structured theme (protocol 0.2). Protocol 0.3 ships the theme in `css`.

#### light?

```ts
optional light?: Record<string, string>;
```

#### dark?

```ts
optional dark?: Record<string, string>;
```

***

### defs?

```ts
optional defs?: Record<string, ComponentNode>;
```

Defined in: [renderer/index.ts:80](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L80)

***

### keyBindings?

```ts
optional keyBindings?: Record<string, ActionJSON | ActionJSON[]>;
```

Defined in: [renderer/index.ts:81](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L81)

***

### css?

```ts
optional css?: string[];
```

Defined in: [renderer/index.ts:83](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L83)

Inline CSS blocks injected as `<style>` (protocol 0.3).

***

### stylesheets?

```ts
optional stylesheets?: string[];
```

Defined in: [renderer/index.ts:85](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L85)

External CSS URLs loaded as `<link rel="stylesheet">` (protocol 0.3).

***

### mode?

```ts
optional mode?: "light" | "dark";
```

Defined in: [renderer/index.ts:87](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L87)

Forced color scheme, independent of OS preference (protocol 0.3).

***

### pipes?

```ts
optional pipes?: Record<string, string>;
```

Defined in: [renderer/index.ts:89](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L89)

Custom pipe source code strings — hydrated by the renderer on mount.

***

### layout?

```ts
optional layout?: object;
```

Defined in: [renderer/index.ts:91](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L91)

Size hints for the host container.

#### preferredHeight?

```ts
optional preferredHeight?: number;
```

#### minHeight?

```ts
optional minHeight?: number;
```

#### maxHeight?

```ts
optional maxHeight?: number;
```

---

---
url: /prefab/reference/api/renderer/interfaces/PrefabUpdateData.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / PrefabUpdateData

# Interface: PrefabUpdateData

Defined in: [renderer/index.ts:94](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L94)

## Properties

### $prefab

```ts
$prefab: object;
```

Defined in: [renderer/index.ts:95](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L95)

#### version

```ts
version: string;
```

***

### update

```ts
update: object;
```

Defined in: [renderer/index.ts:96](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L96)

#### state

```ts
state: Record<string, unknown>;
```

#### actions?

```ts
optional actions?: ActionJSON | ActionJSON[];
```

---

---
url: /prefab/reference/api/renderer/interfaces/MountOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / MountOptions

# Interface: MountOptions

Defined in: [renderer/index.ts:99](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L99)

## Properties

### transport?

```ts
optional transport?: McpTransport | McpTransportOptions;
```

Defined in: [renderer/index.ts:101](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L101)

MCP transport configuration.

***

### onToast?

```ts
optional onToast?: (toast) => void;
```

Defined in: [renderer/index.ts:103](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L103)

Toast notification handler.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `toast` | `ToastEvent` |

#### Returns

`void`

***

### themeToggle?

```ts
optional themeToggle?: boolean | ThemeToggleOptions;
```

Defined in: [renderer/index.ts:105](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L105)

Show a built-in theme toggle. Default: true. Set false to suppress.

***

### validate?

```ts
optional validate?: boolean;
```

Defined in: [renderer/index.ts:107](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L107)

Warn (console) on wire-format problems before rendering. Default: true. Non-fatal.

---

---
url: /prefab/reference/api/renderer/interfaces/MountedApp.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / MountedApp

# Interface: MountedApp

Defined in: [renderer/index.ts:110](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L110)

## Properties

### rerender

```ts
rerender: () => void;
```

Defined in: [renderer/index.ts:112](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L112)

Re-render the entire UI from current state.

#### Returns

`void`

***

### update

```ts
update: (data) => void;
```

Defined in: [renderer/index.ts:114](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L114)

Apply a state update (from display\_update).

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `data` | [`PrefabUpdateData`](PrefabUpdateData.md) |

#### Returns

`void`

***

### store

```ts
store: Store;
```

Defined in: [renderer/index.ts:116](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L116)

Get the reactive store.

***

### destroy

```ts
destroy: () => void;
```

Defined in: [renderer/index.ts:118](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L118)

Unmount and clean up.

#### Returns

`void`

---

---
url: /prefab/reference/api/renderer/interfaces/ThemeToggleOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / ThemeToggleOptions

# Interface: ThemeToggleOptions

Defined in: [renderer/theme.ts:13](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/theme.ts#L13)

## Properties

### position?

```ts
optional position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
```

Defined in: [renderer/theme.ts:15](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/theme.ts#L15)

Position of the toggle inside the prefab root. Default: 'top-right'.

***

### storageKey?

```ts
optional storageKey?: string;
```

Defined in: [renderer/theme.ts:17](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/theme.ts#L17)

localStorage key for persistence. Default: 'prefab-theme'.

***

### syncDocument?

```ts
optional syncDocument?: boolean;
```

Defined in: [renderer/theme.ts:19](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/theme.ts#L19)

Whether to sync with document.documentElement\[data-theme]. Default: true.

---

---
url: /prefab/reference/api/renderer/type-aliases/LogLevel.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / LogLevel

# Type Alias: LogLevel

```ts
type LogLevel = "silent" | "error" | "warn" | "info" | "debug";
```

Defined in: [core/logger.ts:18](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/core/logger.ts#L18)

Centralized logger — the single sink for all prefab console output.

Zero-dependency by design (prefab's renderer bundle ships no runtime deps),
but API-compatible with the org-wide `@maxhealth.tech/utils` `createLogger`
so call sites read the same everywhere and could later swap to the shared
package without churn.

Adds a runtime level (the utils logger gates on NODE\_ENV, which is unreliable
in a browser bundle) so an embedding host can raise or mute prefab's output:

```ts
import { setLogLevel } from '@maxhealth.tech/prefab'
setLogLevel('silent') // quiet inside a production MCP Apps host
```

---

---
url: /prefab/reference/api/renderer/type-aliases/DisplayMode.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / DisplayMode

# Type Alias: DisplayMode

```ts
type DisplayMode = "inline" | "fullscreen" | "pip";
```

Defined in: [renderer/bridge.ts:53](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L53)

---

---
url: /prefab/reference/api/renderer/type-aliases/RenderFnReturn.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / RenderFnReturn

# Type Alias: RenderFnReturn

```ts
type RenderFnReturn = 
  | HTMLElement
  | DocumentFragment
  | RenderResult;
```

Defined in: [renderer/engine.ts:75](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L75)

---

---
url: /prefab/reference/api/renderer/type-aliases/RenderFn.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / RenderFn

# Type Alias: RenderFn

```ts
type RenderFn = (node, ctx) => RenderFnReturn;
```

Defined in: [renderer/engine.ts:77](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L77)

## Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | [`ComponentNode`](../interfaces/ComponentNode.md) |
| `ctx` | [`RenderContext`](../interfaces/RenderContext.md) |

## Returns

[`RenderFnReturn`](RenderFnReturn.md)

---

---
url: /prefab/reference/api/renderer/variables/log.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / log

# Variable: log

```ts
const log: Logger;
```

Defined in: [core/logger.ts:63](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/core/logger.ts#L63)

Default unscoped logger — `[prefab] …`.

---

---
url: /prefab/reference/api/renderer/variables/PrefabRenderer.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / PrefabRenderer

# Variable: PrefabRenderer

```ts
const PrefabRenderer: object;
```

Defined in: [renderer/index.ts:123](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/index.ts#L123)

## Type Declaration

### mount()

```ts
mount(
   root, 
   initialData, 
   options?): MountedApp;
```

Mount a prefab UI into a DOM element.

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `root` | `HTMLElement` | The DOM element to render into. |
| `initialData` | [`PrefabWireData`](../interfaces/PrefabWireData.md) | - |
| `options?` | [`MountOptions`](../interfaces/MountOptions.md) | Optional transport and toast handler. |

#### Returns

[`MountedApp`](../interfaces/MountedApp.md)

A MountedApp handle for updates and cleanup.

### isPrefabData()

```ts
isPrefabData(data): data is PrefabWireData;
```

Check if data is a prefab wire format.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `data` | `unknown` |

#### Returns

`data is PrefabWireData`

### isPrefabUpdate()

```ts
isPrefabUpdate(data): data is PrefabUpdateData;
```

Check if data is a prefab state update.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `data` | `unknown` |

#### Returns

`data is PrefabUpdateData`

---

---
url: /prefab/reference/api/renderer/functions/setLogLevel.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / setLogLevel

# Function: setLogLevel()

```ts
function setLogLevel(level): void;
```

Defined in: [core/logger.ts:26](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/core/logger.ts#L26)

## Parameters

| Parameter | Type |
| ------ | ------ |
| `level` | [`LogLevel`](../type-aliases/LogLevel.md) |

## Returns

`void`

---

---
url: /prefab/reference/api/renderer/functions/getLogLevel.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / getLogLevel

# Function: getLogLevel()

```ts
function getLogLevel(): LogLevel;
```

Defined in: [core/logger.ts:30](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/core/logger.ts#L30)

## Returns

[`LogLevel`](../type-aliases/LogLevel.md)

---

---
url: /prefab/reference/api/renderer/functions/createLogger.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / createLogger

# Function: createLogger()

```ts
function createLogger(scope?): Logger;
```

Defined in: [core/logger.ts:47](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/core/logger.ts#L47)

Create a scoped logger. Output is prefixed `[prefab]` (no scope) or
`[prefab:<scope>]`, matching prefab's existing console convention.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `scope?` | `string` |

## Returns

[`Logger`](../interfaces/Logger.md)

---

---
url: /prefab/reference/api/renderer/functions/validateWireFormat.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / validateWireFormat

# Function: validateWireFormat()

```ts
function validateWireFormat(data, opts?): ValidationResult;
```

Defined in: [core/validate.ts:39](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/core/validate.ts#L39)

Validate a wire format payload. Returns `{ valid: true, errors: [] }` if OK,
or `{ valid: false, errors: [...] }` with details about what's wrong.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data` | `unknown` | The raw parsed JSON to validate |
| `opts` | { `strict?`: `boolean`; } | Optional: `strict` mode warns on unknown component types |
| `opts.strict?` | `boolean` | - |

## Returns

`ValidationResult`

---

---
url: /prefab/reference/api/renderer/functions/isValidWireFormat.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / isValidWireFormat

# Function: isValidWireFormat()

```ts
function isValidWireFormat(data): data is PrefabWireFormat;
```

Defined in: [core/validate.ts:125](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/core/validate.ts#L125)

Quick boolean check — returns true if data looks like valid $prefab wire format.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `data` | `unknown` |

## Returns

`data is PrefabWireFormat`

---

---
url: /prefab/reference/api/renderer/functions/app.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / app

# Function: app()

```ts
function app(options?): Promise<PrefabApp>;
```

Defined in: [renderer/app.ts:120](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/app.ts#L120)

Create a prefab app. Auto-detects iframe vs standalone.

In an iframe: uses postMessage bridge, performs handshake with host.
Standalone: uses HTTP transport (or noop if no config).

## Parameters

| Parameter | Type |
| ------ | ------ |
| `options?` | [`AppOptions`](../interfaces/AppOptions.md) |

## Returns

`Promise`<[`PrefabApp`](../interfaces/PrefabApp.md)>

---

---
url: /prefab/reference/api/renderer/functions/applyHostTheme.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / applyHostTheme

# Function: applyHostTheme()

```ts
function applyHostTheme(root, hostTheme): void;
```

Defined in: [renderer/bridge.ts:654](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L654)

## Parameters

| Parameter | Type |
| ------ | ------ |
| `root` | `HTMLElement` |
| `hostTheme` | [`HostTheme`](../interfaces/HostTheme.md) |

## Returns

`void`

---

---
url: /prefab/reference/api/renderer/functions/isIframe.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / isIframe

# Function: isIframe()

```ts
function isIframe(): boolean;
```

Defined in: [renderer/bridge.ts:682](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/bridge.ts#L682)

## Returns

`boolean`

---

---
url: /prefab/reference/api/renderer/functions/registerComponent.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / registerComponent

# Function: registerComponent()

```ts
function registerComponent(type, fn): void;
```

Defined in: [renderer/engine.ts:114](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/engine.ts#L114)

Register a render function for a component type

## Parameters

| Parameter | Type |
| ------ | ------ |
| `type` | `string` |
| `fn` | [`RenderFn`](../type-aliases/RenderFn.md) |

## Returns

`void`

---

---
url: /prefab/reference/api/renderer/functions/createThemeToggle.md
---
[@maxhealth.tech/prefab](../../index.md) / [renderer](../index.md) / createThemeToggle

# Function: createThemeToggle()

```ts
function createThemeToggle(root, options?): () => void;
```

Defined in: [renderer/theme.ts:139](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/renderer/theme.ts#L139)

Create a theme toggle button inside a prefab root element.

* Persists to localStorage
* Syncs two-way with `document.documentElement[data-theme]` via MutationObserver
* Uses sun/moon SVG icons (no external deps)

## Parameters

| Parameter | Type |
| ------ | ------ |
| `root` | `HTMLElement` |
| `options?` | [`ThemeToggleOptions`](../interfaces/ThemeToggleOptions.md) |

## Returns

A cleanup function that removes the button and observer.

() => `void`

---

---
url: /prefab/reference/api/rx.md
---
[@maxhealth.tech/prefab](../index.md) / rx

# rx

## Classes

| Class | Description |
| ------ | ------ |
| [Ref](classes/Ref.md) | A lazy, serializable reference to a row in a collection. The expression is evaluated at runtime by the renderer's pipe evaluator. |
| [Collection](classes/Collection.md) | A named keyed array. Serializes rows into state and provides typed lookup helpers that compile to pipe expressions. |
| [Rx](classes/Rx.md) | Rx — Reactive expression builder. |
| [Signal](classes/Signal.md) | A named reactive scalar. Carries a state key, an initial value, and produces rx expressions for component props. |

## Interfaces

| Interface | Description |
| ------ | ------ |
| [SignalOptions](interfaces/SignalOptions.md) | - |

## Type Aliases

| Type Alias | Description |
| ------ | ------ |
| [PipeFn](type-aliases/PipeFn.md) | A pipe function receives the current value and optional arguments. |
| [SignalValue](type-aliases/SignalValue.md) | Allowed signal value types — intentionally excludes objects/arrays. |

## Variables

| Variable | Description |
| ------ | ------ |
| [ITEM](variables/ITEM.md) | Current item in a ForEach loop |
| [INDEX](variables/INDEX.md) | Current index in a ForEach loop |
| [EVENT](variables/EVENT.md) | Value from an interaction event (input value, checkbox state, etc.) |
| [ERROR](variables/ERROR.md) | Error message available in on\_error callbacks |
| [RESULT](variables/RESULT.md) | Return value available in on\_success callbacks |
| [STATE](variables/STATE.md) | STATE proxy — convenience for accessing state keys. Usage: STATE.foo → rx('foo'), STATE.user.name → rx('user.name') |

## Functions

| Function | Description |
| ------ | ------ |
| [collection](functions/collection.md) | Create a named keyed collection. |
| [registerPipe](functions/registerPipe.md) | Register a custom pipe filter. Re-registration warns and overwrites (HMR-friendly). Built-in pipes in applyFilter always shadow custom pipes. |
| [unregisterPipe](functions/unregisterPipe.md) | Remove a custom pipe (useful in tests). Returns true if it existed. |
| [listPipes](functions/listPipes.md) | List all registered custom pipe names (useful for debugging). |
| [rx](functions/rx.md) | Create an Rx expression referencing a state key |
| [signal](functions/signal.md) | Create a named reactive signal. |

---

---
url: /prefab/reference/api/rx/classes/Ref.md
---
[@maxhealth.tech/prefab](../../index.md) / [rx](../index.md) / Ref

# Class: Ref\<T>

Defined in: [rx/collection.ts:25](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L25)

A lazy, serializable reference to a row in a collection.
The expression is evaluated at runtime by the renderer's pipe evaluator.

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` | `unknown` |

## Constructors

### Constructor

```ts
new Ref<T>(expr): Ref<T>;
```

Defined in: [rx/collection.ts:32](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L32)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `expr` | `string` |

#### Returns

`Ref`<`T`>

## Properties

### expr

```ts
readonly expr: string;
```

Defined in: [rx/collection.ts:26](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L26)

***

### type

```ts
readonly type: "ref";
```

Defined in: [rx/collection.ts:27](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L27)

## Methods

### toRx()

```ts
toRx(): Rx;
```

Defined in: [rx/collection.ts:37](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L37)

Rx expression for use in component props

#### Returns

[`Rx`](Rx.md)

***

### toString()

```ts
toString(): string;
```

Defined in: [rx/collection.ts:41](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L41)

#### Returns

`string`

***

### toJSON()

```ts
toJSON(): string;
```

Defined in: [rx/collection.ts:45](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L45)

#### Returns

`string`

***

### dot()

#### Call Signature

```ts
dot<K>(field): Ref<T[K]>;
```

Defined in: [rx/collection.ts:55](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L55)

Type-safe property access on the referenced row.
Returns `Ref<T[K]>` so downstream type checking works.

`ref.dot('name')` → `Ref<HumanName[]>` with expr `{{ ... | dot:'name' }}`

##### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `string` |

##### Parameters

| Parameter | Type |
| ------ | ------ |
| `field` | `K` |

##### Returns

`Ref`<`T`\[`K`]>

#### Call Signature

```ts
dot(field): Ref;
```

Defined in: [rx/collection.ts:57](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L57)

Untyped escape hatch for dynamic/computed field names.

##### Parameters

| Parameter | Type |
| ------ | ------ |
| `field` | `string` |

##### Returns

`Ref`

***

### formatted()

```ts
formatted(
   field, 
   pipeName, ...
   args): Rx;
```

Defined in: [rx/collection.ts:69](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L69)

Shorthand for `.dot(field).pipe(pipeName, ...args)`.
Compiles to `{{ expr | dot:'field' | pipeName }}`.

Use to format a nested field with any built-in or registered pipe:
`ref.formatted('total', 'currency')` → `{{ ... | dot:'total' | currency }}`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `field` | `string` | keyof `T` & `string` |
| `pipeName` | `string` |
| ...`args` | `unknown`\[] |

#### Returns

[`Rx`](Rx.md)

***

### pipe()

```ts
pipe(name, ...args): Rx;
```

Defined in: [rx/collection.ts:78](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L78)

Append a pipe filter to the ref expression.
`ref.pipe('upper')` → `{{ expr | upper }}`
`ref.pipe('date', 'long')` → `{{ expr | date:'long' }}`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `name` | `string` |
| ...`args` | `unknown`\[] |

#### Returns

[`Rx`](Rx.md)

---

---
url: /prefab/reference/api/rx/classes/Collection.md
---
[@maxhealth.tech/prefab](../../index.md) / [rx](../index.md) / Collection

# Class: Collection\<T>

Defined in: [rx/collection.ts:87](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L87)

A named keyed array. Serializes rows into state and provides
typed lookup helpers that compile to pipe expressions.

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` *extends* `Record`<`string`, `unknown`> | `Record`<`string`, `unknown`> |

## Constructors

### Constructor

```ts
new Collection<T>(
   stateKey, 
   rows, 
keyField): Collection<T>;
```

Defined in: [rx/collection.ts:92](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L92)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `stateKey` | `string` |
| `rows` | `T`\[] |
| `keyField` | `string` |

#### Returns

`Collection`<`T`>

## Properties

### stateKey

```ts
readonly stateKey: string;
```

Defined in: [rx/collection.ts:88](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L88)

***

### keyField

```ts
readonly keyField: string;
```

Defined in: [rx/collection.ts:89](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L89)

***

### rows

```ts
readonly rows: T[];
```

Defined in: [rx/collection.ts:90](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L90)

## Accessors

### length

#### Get Signature

```ts
get length(): number;
```

Defined in: [rx/collection.ts:113](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L113)

Number of rows.

##### Returns

`number`

## Methods

### firstKey()

```ts
firstKey(): string | null;
```

Defined in: [rx/collection.ts:99](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L99)

Key of the first row, or null if empty.

#### Returns

`string` | `null`

***

### lastKey()

```ts
lastKey(): string | null;
```

Defined in: [rx/collection.ts:106](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L106)

Key of the last row, or null if empty.

#### Returns

`string` | `null`

***

### by()

```ts
by<K>(key): Ref<T>;
```

Defined in: [rx/collection.ts:121](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L121)

Create a Ref that lazily resolves a row by signal key.
Compiles to: `{{ stateKey | find:'keyField',signal.key }}`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* [`SignalValue`](../type-aliases/SignalValue.md) |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `key` | [`Signal`](Signal.md)<`K`> |

#### Returns

[`Ref`](Ref.md)<`T`>

***

### toRx()

```ts
toRx(): Rx;
```

Defined in: [rx/collection.ts:126](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L126)

Rx expression referencing the full array: `{{ stateKey }}`

#### Returns

[`Rx`](Rx.md)

***

### toString()

```ts
toString(): string;
```

Defined in: [rx/collection.ts:130](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L130)

#### Returns

`string`

***

### toJSON()

```ts
toJSON(): string;
```

Defined in: [rx/collection.ts:134](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L134)

#### Returns

`string`

***

### toState()

```ts
toState(): Record<string, T[]>;
```

Defined in: [rx/collection.ts:139](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L139)

State entry for PrefabApp: `{ stateKey: rows }`

#### Returns

`Record`<`string`, `T`\[]>

---

---
url: /prefab/reference/api/rx/classes/Rx.md
---
[@maxhealth.tech/prefab](../../index.md) / [rx](../index.md) / Rx

# Class: Rx

Defined in: [rx/rx.ts:16](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L16)

Rx — Reactive expression builder.

Builds template expressions like "{{ count + 1 }}" or "{{ user.name }}"
that are evaluated client-side by the prefab renderer.

Usage:
rx('count')                    → "{{ count }}"
rx('count').add(1)             → "{{ count + 1 }}"
rx('user').dot('name')         → "{{ user.name }}"
rx('items').length()           → "{{ items | length }}"
rx('price').currency('USD')    → "{{ price | currency:'USD' }}"
rx('active').then('Yes', 'No') → "{{ active ? 'Yes' : 'No' }}"

## Constructors

### Constructor

```ts
new Rx(expression): Rx;
```

Defined in: [rx/rx.ts:19](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L19)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `expression` | `string` |

#### Returns

`Rx`

## Accessors

### expression

#### Get Signature

```ts
get expression(): string;
```

Defined in: [rx/rx.ts:26](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L26)

Raw expression string without {{ }} wrapper

##### Returns

`string`

## Methods

### toString()

```ts
toString(): string;
```

Defined in: [rx/rx.ts:31](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L31)

Serialize to "{{ expression }}" template string

#### Returns

`string`

***

### toJSON()

```ts
toJSON(): string;
```

Defined in: [rx/rx.ts:35](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L35)

#### Returns

`string`

***

### dot()

```ts
dot(key): Rx;
```

Defined in: [rx/rx.ts:42](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L42)

Dot-path access: rx('user').dot('name') → "{{ user.name }}"

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `key` | `string` |

#### Returns

`Rx`

***

### at()

```ts
at(index): Rx;
```

Defined in: [rx/rx.ts:47](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L47)

Index access: rx('items').at(0) → "{{ items.0 }}"

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `index` | `number` | `Rx` |

#### Returns

`Rx`

***

### add()

```ts
add(other): Rx;
```

Defined in: [rx/rx.ts:54](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L54)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `other` | `string` | `number` | `Rx` |

#### Returns

`Rx`

***

### sub()

```ts
sub(other): Rx;
```

Defined in: [rx/rx.ts:58](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L58)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `other` | `string` | `number` | `Rx` |

#### Returns

`Rx`

***

### mul()

```ts
mul(other): Rx;
```

Defined in: [rx/rx.ts:62](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L62)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `other` | `string` | `number` | `Rx` |

#### Returns

`Rx`

***

### div()

```ts
div(other): Rx;
```

Defined in: [rx/rx.ts:66](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L66)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `other` | `string` | `number` | `Rx` |

#### Returns

`Rx`

***

### mod()

```ts
mod(other): Rx;
```

Defined in: [rx/rx.ts:70](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L70)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `other` | `string` | `number` | `Rx` |

#### Returns

`Rx`

***

### eq()

```ts
eq(other): Rx;
```

Defined in: [rx/rx.ts:76](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L76)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `other` | `unknown` |

#### Returns

`Rx`

***

### neq()

```ts
neq(other): Rx;
```

Defined in: [rx/rx.ts:80](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L80)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `other` | `unknown` |

#### Returns

`Rx`

***

### gt()

```ts
gt(other): Rx;
```

Defined in: [rx/rx.ts:84](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L84)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `other` | `number` | `Rx` |

#### Returns

`Rx`

***

### gte()

```ts
gte(other): Rx;
```

Defined in: [rx/rx.ts:88](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L88)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `other` | `number` | `Rx` |

#### Returns

`Rx`

***

### lt()

```ts
lt(other): Rx;
```

Defined in: [rx/rx.ts:92](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L92)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `other` | `number` | `Rx` |

#### Returns

`Rx`

***

### lte()

```ts
lte(other): Rx;
```

Defined in: [rx/rx.ts:96](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L96)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `other` | `number` | `Rx` |

#### Returns

`Rx`

***

### and()

```ts
and(other): Rx;
```

Defined in: [rx/rx.ts:102](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L102)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `other` | `Rx` |

#### Returns

`Rx`

***

### or()

```ts
or(other): Rx;
```

Defined in: [rx/rx.ts:106](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L106)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `other` | `Rx` |

#### Returns

`Rx`

***

### not()

```ts
not(): Rx;
```

Defined in: [rx/rx.ts:110](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L110)

#### Returns

`Rx`

***

### then()

```ts
then(ifTrue, ifFalse): Rx;
```

Defined in: [rx/rx.ts:116](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L116)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `ifTrue` | `unknown` |
| `ifFalse` | `unknown` |

#### Returns

`Rx`

***

### currency()

```ts
currency(code?): Rx;
```

Defined in: [rx/rx.ts:122](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L122)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `code?` | `string` |

#### Returns

`Rx`

***

### percent()

```ts
percent(decimals?): Rx;
```

Defined in: [rx/rx.ts:126](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L126)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `decimals?` | `number` |

#### Returns

`Rx`

***

### number()

```ts
number(decimals?): Rx;
```

Defined in: [rx/rx.ts:130](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L130)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `decimals?` | `number` |

#### Returns

`Rx`

***

### round()

```ts
round(decimals?): Rx;
```

Defined in: [rx/rx.ts:134](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L134)

#### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `decimals` | `number` | `0` |

#### Returns

`Rx`

***

### compact()

```ts
compact(decimals?): Rx;
```

Defined in: [rx/rx.ts:138](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L138)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `decimals?` | `number` |

#### Returns

`Rx`

***

### abs()

```ts
abs(): Rx;
```

Defined in: [rx/rx.ts:142](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L142)

#### Returns

`Rx`

***

### date()

```ts
date(format?): Rx;
```

Defined in: [rx/rx.ts:146](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L146)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `format?` | `string` |

#### Returns

`Rx`

***

### time()

```ts
time(): Rx;
```

Defined in: [rx/rx.ts:150](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L150)

#### Returns

`Rx`

***

### datetime()

```ts
datetime(): Rx;
```

Defined in: [rx/rx.ts:154](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L154)

#### Returns

`Rx`

***

### upper()

```ts
upper(): Rx;
```

Defined in: [rx/rx.ts:158](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L158)

#### Returns

`Rx`

***

### lower()

```ts
lower(): Rx;
```

Defined in: [rx/rx.ts:162](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L162)

#### Returns

`Rx`

***

### truncate()

```ts
truncate(maxLength): Rx;
```

Defined in: [rx/rx.ts:166](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L166)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `maxLength` | `number` |

#### Returns

`Rx`

***

### pluralize()

```ts
pluralize(word?): Rx;
```

Defined in: [rx/rx.ts:170](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L170)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `word?` | `string` |

#### Returns

`Rx`

***

### length()

```ts
length(): Rx;
```

Defined in: [rx/rx.ts:174](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L174)

#### Returns

`Rx`

***

### join()

```ts
join(separator?): Rx;
```

Defined in: [rx/rx.ts:178](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L178)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `separator?` | `string` |

#### Returns

`Rx`

***

### first()

```ts
first(): Rx;
```

Defined in: [rx/rx.ts:182](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L182)

#### Returns

`Rx`

***

### last()

```ts
last(): Rx;
```

Defined in: [rx/rx.ts:186](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L186)

#### Returns

`Rx`

***

### selectattr()

```ts
selectattr(attr): Rx;
```

Defined in: [rx/rx.ts:190](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L190)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `attr` | `string` |

#### Returns

`Rx`

***

### rejectattr()

```ts
rejectattr(attr): Rx;
```

Defined in: [rx/rx.ts:194](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L194)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `attr` | `string` |

#### Returns

`Rx`

***

### default()

```ts
default(value): Rx;
```

Defined in: [rx/rx.ts:198](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L198)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `unknown` |

#### Returns

`Rx`

***

### pipe()

```ts
pipe(name, ...args): Rx;
```

Defined in: [rx/rx.ts:210](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L210)

Append an arbitrary pipe filter: `rx('x').pipe('humanName')` → `{{ x | humanName }}`

Supports variadic args: `.pipe('date', 'long')` → `{{ x | date:'long' }}`
Use this for custom pipes registered via `registerPipe()`.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `name` | `string` |
| ...`args` | `unknown`\[] |

#### Returns

`Rx`

---

---
url: /prefab/reference/api/rx/classes/Signal.md
---
[@maxhealth.tech/prefab](../../index.md) / [rx](../index.md) / Signal

# Class: Signal\<T>

Defined in: [rx/signal.ts:34](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/signal.ts#L34)

A named reactive scalar. Carries a state key, an initial value,
and produces rx expressions for component props.

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` *extends* [`SignalValue`](../type-aliases/SignalValue.md) | [`SignalValue`](../type-aliases/SignalValue.md) |

## Constructors

### Constructor

```ts
new Signal<T>(
   key, 
   initial, 
options?): Signal<T>;
```

Defined in: [rx/signal.ts:39](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/signal.ts#L39)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `key` | `string` |
| `initial` | `T` |
| `options?` | [`SignalOptions`](../interfaces/SignalOptions.md) |

#### Returns

`Signal`<`T`>

## Properties

### key

```ts
readonly key: string;
```

Defined in: [rx/signal.ts:35](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/signal.ts#L35)

***

### initial

```ts
readonly initial: T;
```

Defined in: [rx/signal.ts:36](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/signal.ts#L36)

***

### options?

```ts
readonly optional options?: SignalOptions;
```

Defined in: [rx/signal.ts:37](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/signal.ts#L37)

## Methods

### toRx()

```ts
toRx(): Rx;
```

Defined in: [rx/signal.ts:46](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/signal.ts#L46)

Rx expression referencing this signal's value: `{{ key }}`

#### Returns

[`Rx`](Rx.md)

***

### toString()

```ts
toString(): string;
```

Defined in: [rx/signal.ts:51](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/signal.ts#L51)

Serialize to the rx template string

#### Returns

`string`

***

### toJSON()

```ts
toJSON(): string;
```

Defined in: [rx/signal.ts:55](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/signal.ts#L55)

#### Returns

`string`

***

### toState()

```ts
toState(): Record<string, T>;
```

Defined in: [rx/signal.ts:60](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/signal.ts#L60)

State entry for PrefabApp: `{ key: initial }`

#### Returns

`Record`<`string`, `T`>

---

---
url: /prefab/reference/api/rx/interfaces/SignalOptions.md
---
[@maxhealth.tech/prefab](../../index.md) / [rx](../index.md) / SignalOptions

# Interface: SignalOptions

Defined in: [rx/signal.ts:22](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/signal.ts#L22)

## Properties

### urlSync?

```ts
optional urlSync?: string;
```

Defined in: [rx/signal.ts:27](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/signal.ts#L27)

URL query parameter name. When set, the runtime syncs the signal
value with `?param=value` in the address bar. Opt-in.

---

---
url: /prefab/reference/api/rx/type-aliases/PipeFn.md
---
[@maxhealth.tech/prefab](../../index.md) / [rx](../index.md) / PipeFn

# Type Alias: PipeFn

```ts
type PipeFn = (value, ...args) => unknown;
```

Defined in: [rx/pipes.ts:21](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/pipes.ts#L21)

A pipe function receives the current value and optional arguments.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `unknown` |
| ...`args` | `unknown`\[] |

## Returns

`unknown`

---

---
url: /prefab/reference/api/rx/type-aliases/SignalValue.md
---
[@maxhealth.tech/prefab](../../index.md) / [rx](../index.md) / SignalValue

# Type Alias: SignalValue

```ts
type SignalValue = string | number | boolean | null;
```

Defined in: [rx/signal.ts:20](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/signal.ts#L20)

Allowed signal value types — intentionally excludes objects/arrays.

---

---
url: /prefab/reference/api/rx/variables/ITEM.md
---
[@maxhealth.tech/prefab](../../index.md) / [rx](../index.md) / ITEM

# Variable: ITEM

```ts
const ITEM: Rx;
```

Defined in: [rx/rx.ts:229](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L229)

Current item in a ForEach loop

---

---
url: /prefab/reference/api/rx/variables/INDEX.md
---
[@maxhealth.tech/prefab](../../index.md) / [rx](../index.md) / INDEX

# Variable: INDEX

```ts
const INDEX: Rx;
```

Defined in: [rx/rx.ts:232](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L232)

Current index in a ForEach loop

---

---
url: /prefab/reference/api/rx/variables/EVENT.md
---
[@maxhealth.tech/prefab](../../index.md) / [rx](../index.md) / EVENT

# Variable: EVENT

```ts
const EVENT: Rx;
```

Defined in: [rx/rx.ts:235](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L235)

Value from an interaction event (input value, checkbox state, etc.)

---

---
url: /prefab/reference/api/rx/variables/ERROR.md
---
[@maxhealth.tech/prefab](../../index.md) / [rx](../index.md) / ERROR

# Variable: ERROR

```ts
const ERROR: Rx;
```

Defined in: [rx/rx.ts:238](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L238)

Error message available in on\_error callbacks

---

---
url: /prefab/reference/api/rx/variables/RESULT.md
---
[@maxhealth.tech/prefab](../../index.md) / [rx](../index.md) / RESULT

# Variable: RESULT

```ts
const RESULT: Rx;
```

Defined in: [rx/rx.ts:241](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L241)

Return value available in on\_success callbacks

---

---
url: /prefab/reference/api/rx/variables/STATE.md
---
[@maxhealth.tech/prefab](../../index.md) / [rx](../index.md) / STATE

# Variable: STATE

```ts
const STATE: Record<string, Rx>;
```

Defined in: [rx/rx.ts:247](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L247)

STATE proxy — convenience for accessing state keys.
Usage: STATE.foo → rx('foo'), STATE.user.name → rx('user.name')

---

---
url: /prefab/reference/api/rx/functions/collection.md
---
[@maxhealth.tech/prefab](../../index.md) / [rx](../index.md) / collection

# Function: collection()

```ts
function collection<T>(
   stateKey, 
   rows, 
options): Collection<T>;
```

Defined in: [rx/collection.ts:151](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/collection.ts#L151)

Create a named keyed collection.

## Type Parameters

| Type Parameter |
| ------ |
| `T` *extends* `Record`<`string`, `unknown`> |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `stateKey` | `string` | Stable state path (e.g. 'patients') |
| `rows` | `T`\[] | Source array |
| `options` | { `key`: `string`; } | Must include `key` — the field name used for identity lookup |
| `options.key` | `string` | - |

## Returns

[`Collection`](../classes/Collection.md)<`T`>

---

---
url: /prefab/reference/api/rx/functions/registerPipe.md
---
[@maxhealth.tech/prefab](../../index.md) / [rx](../index.md) / registerPipe

# Function: registerPipe()

```ts
function registerPipe(name, fn): void;
```

Defined in: [rx/pipes.ts:30](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/pipes.ts#L30)

Register a custom pipe filter.
Re-registration warns and overwrites (HMR-friendly).
Built-in pipes in applyFilter always shadow custom pipes.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `name` | `string` |
| `fn` | [`PipeFn`](../type-aliases/PipeFn.md) |

## Returns

`void`

---

---
url: /prefab/reference/api/rx/functions/unregisterPipe.md
---
[@maxhealth.tech/prefab](../../index.md) / [rx](../index.md) / unregisterPipe

# Function: unregisterPipe()

```ts
function unregisterPipe(name): boolean;
```

Defined in: [rx/pipes.ts:38](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/pipes.ts#L38)

Remove a custom pipe (useful in tests). Returns true if it existed.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `name` | `string` |

## Returns

`boolean`

---

---
url: /prefab/reference/api/rx/functions/listPipes.md
---
[@maxhealth.tech/prefab](../../index.md) / [rx](../index.md) / listPipes

# Function: listPipes()

```ts
function listPipes(): string[];
```

Defined in: [rx/pipes.ts:43](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/pipes.ts#L43)

List all registered custom pipe names (useful for debugging).

## Returns

`string`\[]

---

---
url: /prefab/reference/api/rx/functions/rx.md
---
[@maxhealth.tech/prefab](../../index.md) / [rx](../index.md) / rx

# Function: rx()

```ts
function rx(key): Rx;
```

Defined in: [rx/rx.ts:222](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/rx.ts#L222)

Create an Rx expression referencing a state key

## Parameters

| Parameter | Type |
| ------ | ------ |
| `key` | `string` |

## Returns

[`Rx`](../classes/Rx.md)

---

---
url: /prefab/reference/api/rx/functions/signal.md
---
[@maxhealth.tech/prefab](../../index.md) / [rx](../index.md) / signal

# Function: signal()

```ts
function signal<T>(
   key, 
   initial, 
options?): Signal<T>;
```

Defined in: [rx/signal.ts:72](https://github.com/Max-Health-Inc/prefab/blob/aa67e4221b5f555a8968efb11584ea9d113e4659/src/rx/signal.ts#L72)

Create a named reactive signal.

## Type Parameters

| Type Parameter |
| ------ |
| `T` *extends* [`SignalValue`](../type-aliases/SignalValue.md) |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `key` | `string` | Stable state path (e.g. 'selectedPatientId') |
| `initial` | `T` | Initial value |
| `options?` | [`SignalOptions`](../interfaces/SignalOptions.md) | Optional configuration (urlSync, etc.) |

## Returns

[`Signal`](../classes/Signal.md)<`T`>

---

---
url: /prefab/reference/api.md
---
# @maxhealth.tech/prefab

## Modules

| Module | Description |
| ------ | ------ |
| [actions](actions/index.md) | - |
| [auto](auto/index.md) | - |
| [mcp](mcp/index.md) | - |
| [renderer](renderer/index.md) | - |
| [rx](rx/index.md) | - |