State-Driven UI
Every named form control automatically syncs its value to client state, and{{ key }} interpolation makes that state available to any component. There is no manual event wiring — name a control, reference the key, and the UI stays in sync.
Type in the input, and the text updates instantly. The name="name" prop creates a state key called name, and {{ name }} reads it wherever it appears.
Conditional Visibility
UseIf / Else blocks to show or hide content based on state. Pair with ToggleState to toggle visibility on demand.
Clicking the button flips showDetails between True and False. When False, the alert is removed from the rendered output entirely.
Dynamic Data Refresh
ToolCall with result_key fetches data from the server and writes the return value into client state. Other components read that data through interpolation, so the UI updates as soon as the response arrives.
The user types a query, clicks Search, and the find_users tool runs server-side. Its return value lands in results, and the DataTable renders the rows.
Search with ForEach
The same pattern works withForEach for custom result layouts. Each item in the returned list becomes the interpolation context for its iteration.
When search_products returns a list of dicts with name and description keys, ForEach renders one card per result.
Action Chains
Pass a list of actions to compose richer interactions. Actions execute in sequence, so you can update UI state before and after a server call.SetState("processing", True) fires instantly, then ToolCall makes the server request. If the tool succeeds, on_success fires and the chain continues to SetState("processing", False). If the tool fails, on_error fires and the chain stops — processing stays True so you can reflect the error state in the UI.
Error Handling
When aToolCall action fails, the error message is available as $error inside on_error callbacks. This lets you surface server-side validation messages or exceptions directly to the user.
If delete_item raises an exception or returns an error, the message appears in a toast notification. The $error variable is scoped to the on_error callback and does not leak into broader state.