Loading…

AI Structured Output

An object arriving field by field from the model, without the layout jumping.

AI
1 file
No extra npm packages
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add ai-structured-output

No npm packages are needed beyond what Dowel already requires.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { StructuredOutput } from "@/components/ui/ai-structured-output";

Examples

Every example the tests run, live and operable, side by side.

Default
Empty
Streaming
Streaming Live
With Confidence
Field Error
Crm Enrichment

API

Generated from the component's own types, so a prop cannot appear here without existing.

<StructuredOutput>

Prop	Type	Default
`fields` (required) Declared up front, so layout is reserved before anything arrives.	`OutputField[]`	—
`value` (required) The latest partial snapshot.	`Record<string, unknown>`	—
`errors` Fields that failed to extract, with the reason shown in place.	`Record<string, string>`	—
`formatValue`	`(value: unknown, name: string) => string`	`defaultFormat`
`settled` Fields the caller knows are finished. Supply this when the API gives a real signal; otherwise the default rule applies.	`string[]`	—
`streaming` True while more of the object is still expected. When false every present field is settled, which is the only completion signal that is ever certain.	`boolean`	`false`
`children`	`ReactNode`	—

Plus every attribute of <dl> except children.

<StructuredField>

Prop	Type	Default
`name` (required)	`string`	—
`children`	`ReactNode`	—

Plus every attribute of <div> except children.

<StructuredConfidence>

Prop	Type	Default
`value` (required)	`number`	—
`lowBelow`	`number`	`0.7`

Plus every attribute of <p>.

<StructuredFieldError>

Plus every attribute of <p>.

Accessibility

A description list, so each value is associated with its label rather than floating beside it. The region is aria-live="polite" with aria-busy while streaming, so fields are announced as they settle instead of re-reading the whole object on every token. Height is reserved from the declared field list, which keeps focus and reading position stable as values arrive. Confidence is stated as a number in words, never as a colour alone.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.

AI workspace

Prop

Type

Default

fields

Declared up front, so layout is reserved before anything arrives.

OutputField[]

—

value

The latest partial snapshot.

Record<string, unknown>

—

errors

Fields that failed to extract, with the reason shown in place.

Record<string, string>

—

formatValue

(value: unknown, name: string) => string

defaultFormat

settled

Fields the caller knows are finished. Supply this when the API gives a real signal; otherwise the default rule applies.

string[]

—

streaming

True while more of the object is still expected. When false every present field is settled, which is the only completion signal that is ever certain.

boolean

false

children

ReactNode

—

Prop

Type

Default

name

string

—

children

ReactNode

—

Prop

Type

Default

value

number

—

lowBelow

number

0.7