Skip to content
BlazorUI

AI

AiStructuredDataView

Bit.BlazorUI.AI

BitAiStructuredDataView renders a structured output part of a message: the JSON value a model produced instead of prose. A renderer the app registered for the part's schema name draws it when there is one, inside an error boundary; otherwise the view reads the shape of the value - an array of objects becomes a table, an object a list of labelled values, anything else a collapsible tree. The value is re-parsed leniently on every delta, so all of them fill in while the model is still writing, and a part that has received nothing yet shows a thinking indicator.

Notes

To use this component, you need to install the Bit.BlazorUI.AI(opens in a new tab) nuget package, as described in the Optional steps of the Getting started page.

BitAiStructuredDataView reads the renderers registered with AddBitBlazorUIAIServices (ConfigureRenderers), so the app calls it at startup even where it registers none. Inside a BitAiChat it is rendered for every structured part on its own; render it yourself to show a part outside a conversation. A session fills the part from the BitAiStructuredDataDeltaEvents of its transport - see the Structured output and Forms scenarios for the whole chat.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

Give it a Part, a BitAiStructuredDataPart holding the value. An object is shown as a list of labelled values: each key written as a label, a string as its text, a number or a boolean as its JSON, and a missing value as a dash.

Flight Number
BA 117
From
LHR
To
JFK
Departure
2026-11-02 09:40
Seats
2
Refundable
false
Meal
-

Shapes

With no renderer registered for its schema, the view reads the shape of the value: an array of objects becomes a BitAiDataTable, any other value - an array of scalars, a number, a string - a BitAiJsonView, and a nested object or array inside a list of labelled values a tree opened one level deep.

OrderStatusTotal
ord_4821shipped129.5
ord_4822pending42

"blazor""webassembly""streaming"]

Name
Ada Lovelace
Address
"city": "London""zip": "N1 9GU"}
Orders
"ord_4821""ord_4822"]

Streaming

A session gathers the JSON its transport streams into one structured part of the answer, and Value re-parses what has arrived on every delta, repairing the truncated document. The table below fills in row by row and cell by cell while the JSON is still open; Message hands the message the part belongs to on to a registered renderer.



Registered renderers

A part whose SchemaName has a renderer registered with BitAiRendererRegistry.RegisterStructured (see the tables below) is drawn by it instead. The renderer is a BitAiStructuredDataRenderer, handed a BitAiStructuredDataContext: the Part, which may still be streaming, and the Message it belongs to. This site registers one at startup (ConfigureRenderers of AddBitBlazorUIAIServices, the Program.cs tab) for booking_form, which turns the JSON Schema a model streams into a BitAiForm for the user to check - so the transport proposing a booking below gets a form rather than raw JSON. The renderer runs inside a BitAiRendererBoundary: one that throws is replaced by a notice, and the answer around it stays. A region that wants renderers of its own cascades a registry of its own; the whole registry is described on the AiMessagePartView page.



Cascading parameters

BitParams with a BitAiStructuredDataViewParams sets the Classes and Styles of the parts - and the parameters every component shares, such as Dir - of every view inside it, rather than the part and the message a single view shows. A view keeps what it sets itself: the second one gives Styles of its own, so the cascaded ones do not reach it.

Flight Number
BA 117
From
LHR
To
JFK
Departure
2026-11-02 09:40
Seats
2
Refundable
false
Meal
-

Flight Number
BA 117
From
LHR
To
JFK
Departure
2026-11-02 09:40
Seats
2
Refundable
false
Meal
-

Style & Class

Style and Class reach the root, Styles and Classes each part of the list of labelled values. The public --bit-AiStructuredDataView-* variables (see the CSS variables table) inherit, so set on :root, a container or a view's Style they re-skin every view below; a table and a tree are restyled through the variables of BitAiDataTable and BitAiJsonView, which inherit the same way.

Flight Number
BA 117
From
LHR
To
JFK
Departure
2026-11-02 09:40
Seats
2
Refundable
false
Meal
-

Flight Number
BA 117
From
LHR
To
JFK
Departure
2026-11-02 09:40
Seats
2
Refundable
false
Meal
-

Flight Number
BA 117
From
LHR
To
JFK
Departure
2026-11-02 09:40
Seats
2
Refundable
false
Meal
-

RTL

In right-to-left text the list of labelled values reads from the right - its labels and its values start there - whether the direction comes from Dir or from a dir attribute around the view. A table or a tree it renders instead follows the same direction.

شماره پرواز
IR 721
مبدا
تهران
مقصد
لندن
صندلی
2
قابل استرداد
true
غذا
-

شماره پرواز
IR 721
مبدا
تهران
مقصد
لندن
صندلی
2
قابل استرداد
true
غذا
-

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone, as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component falls back to the theme token beside it.

BitAiStructuredDataView CSS variables

Name Default value Description
--bit-AiStructuredDataView-gap spacing(1) Room between two entries of the list of labelled values.
--bit-AiStructuredDataView-padding spacing(2) Inset of the list.
--bit-AiStructuredDataView-background var(--bit-clr-bg-sec) Background of the list.
--bit-AiStructuredDataView-border-color var(--bit-clr-brd-pri) Color of the frame around the list.
--bit-AiStructuredDataView-radius var(--bit-shp-radius-surface) Corner of the frame.
--bit-AiStructuredDataView-label-color var(--bit-clr-fg-pri) Color of the labels.
--bit-AiStructuredDataView-label-font-size var(--bit-tpg-fs-sm) Size of the labels.
--bit-AiStructuredDataView-label-font-weight var(--bit-tpg-fw-medium) Weight of the labels.
--bit-AiStructuredDataView-value-color var(--bit-clr-fg-pri) Color of the values.
--bit-AiStructuredDataView-empty-color var(--bit-clr-fg-ter) Color of the dash a missing value is shown as.

API

Every parameter, public member, sub-class and enum this component exposes.

BitAiStructuredDataView parameters

Name Type Default value Description
Classes BitAiStructuredDataViewClassStyles? null Custom CSS classes for different parts of the structured data view.
Message BitAiMessage? null The message the part belongs to, handed to a renderer registered for the part's schema (in its BitAiStructuredDataContext) so it can read the rest of the answer. A new, empty assistant message stands in while it is null. The default rendering does not read it.
Part BitAiStructuredDataPart null The structured part to render (required). Its SchemaName picks a renderer registered with RegisterStructured; without one, its Value is drawn by its shape - an array of objects as a BitAiDataTable, an object as a list of labelled values, anything else as a BitAiJsonView. While nothing parseable has arrived, a streaming part shows a BitAiThinkingIndicator and a finished one nothing.
Styles BitAiStructuredDataViewClassStyles? null Custom CSS styles for different parts of the structured data view.

BitComponentBase parameters

Name Type Default value Description
AriaLabel string? null Gets or sets the accessible label for the component, used by assistive technologies.
Class string? null Gets or sets the CSS class name(s) to apply to the rendered element.
Dir BitDir? null Gets or sets the text directionality for the component's content.
Disabled bool false Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction.
ForceAnimation bool false Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name.
Id string? null Gets or sets the unique identifier for the component's root element.
Style string? null Gets or sets the CSS style string to apply to the rendered element.
TabIndex string? null Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility BitVisibility BitVisibility.Visible Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name Type Default value Description
UniqueId Guid Guid.NewGuid() Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement ElementReference Gets the reference to the root HTML element associated with this component.

BitAiStructuredDataViewClassStyles properties

Name Type Default value Description
Root string? null Custom CSS classes/styles for the root element of the BitAiStructuredDataView.
List string? null Custom CSS classes/styles for the list of labelled values an object is shown as by the BitAiStructuredDataView.
Entry string? null Custom CSS classes/styles for each entry - a label and its value - of the list of the BitAiStructuredDataView.
Label string? null Custom CSS classes/styles for the label of each entry of the list of the BitAiStructuredDataView.
Value string? null Custom CSS classes/styles for the value of each entry of the list of the BitAiStructuredDataView.
Empty string? null Custom CSS classes/styles for the dash a missing value is shown as in the list of the BitAiStructuredDataView.

BitAiStructuredDataPart properties

A part of a message holding the structured output of a model: raw JSON that streams in and a lenient parse of it. A session creates and fills one from the BitAiStructuredDataDeltaEvent and BitAiStructuredDataEvent of its transport; an app creates one to show a value it has itself. Safe to read on the renderer's thread while it is appended to on the transport's.

Name Type Default value Description
new(schemaName?, partId?) constructor Creates an empty part that is streaming: Append the JSON as it arrives, then Complete it.
new(value, schemaName?, partId?) constructor Creates a finished part holding a value.
SchemaName string? null A name identifying the shape of the value, which picks the renderer registered for it with BitAiRendererRegistry.RegisterStructured.
Value JsonElement? null The parsed value once complete; until then a lenient parse of the JSON received so far (BitAiPartialJson.TryParse, described on the AiJsonView page, /components/ai/jsonview#partial-json), null while nothing parseable has arrived.
RawJson string "" The raw JSON text received so far.
IsStreaming bool true Whether more JSON may still arrive: true for a part created empty until Complete is called, false for one created with a value.
Append(delta) void Appends raw JSON text; Value is re-parsed the next time it is read.
Complete(value?) void Marks the part complete, with the value given or the accumulated text parsed strictly (falling back to the lenient parse when it is not valid JSON).
As<T>(typeInfo) T? Deserializes the current value - partial or not - into a typed model with the metadata of the app's own JsonSerializerContext, safe to trim. Give the model nullable members: the fields not written yet are absent. Null when nothing parseable has arrived or the value does not fit the type.
As<T>(options?) T? The same with the reflection-based serializer (the web defaults when no options are given), marked as unsafe to trim and for native AOT.

BitAiRendererRegistry properties

Where an app registers its own renderers, which the components resolve before their built-in views. A singleton: register at startup (AddBitBlazorUIAIServices(ai => ai.ConfigureRenderers(renderers => ...))) and treat the entries as fixed afterwards - every entry is app-wide. A region with renderers of its own cascades a registry of its own (new BitAiRendererRegistry(), in a CascadingValue), which every AI component inside it uses in place of the registered one. These are its structured-data members; the whole registry is on the AiMessagePartView page (/components/ai/messagepartview#renderer-registry).

Name Type Default value Description
RegisterStructured(schemaName, renderer) void Registers a BitAiStructuredDataRenderer for a schema name (case does not matter): every BitAiStructuredDataView of a part with that SchemaName renders it in place of the table, list or tree it would draw, inside a BitAiRendererBoundary; a later registration replaces an earlier one. A part with no SchemaName is never drawn by one.
FindStructured(schemaName) BitAiStructuredDataRenderer? The renderer registered for a schema name, or null (also for a null name) when the view reads the shape of the value itself.

BitAiStructuredDataRenderer properties

The delegate a custom structured-data renderer is: public delegate RenderFragment BitAiStructuredDataRenderer(BitAiStructuredDataContext context). It is called each time the view's parameters are set - on every render of a streaming answer - so it reads what it draws off the part as it renders; a part still streaming holds a partial Value (or none yet).

Name Type Default value Description
context BitAiStructuredDataContext The part and the message it belongs to.
(return value) RenderFragment The markup drawn in place of the built-in table, list or tree.

BitAiStructuredDataContext properties

What a renderer registered with BitAiRendererRegistry.RegisterStructured(schemaName, context => ...) is handed (a sealed record), through ConfigureRenderers of AddBitBlazorUIAIServices.

Name Type Default value Description
Part BitAiStructuredDataPart The part being rendered.
Message BitAiMessage The message the part belongs to: the Message parameter of the view, or a new assistant message when it is not set.

BitVisibility enum

Name Value Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).

BitDir enum

Name Value Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.