Preferences Panel

Compact settings panel with staged changes.

Notifications

Receive push notifications

Theme

Choose your appearance

Analytics

Help improve the product

import { PreferencesPanel } from "@/components/tool-ui/preferences-panel";export function Example() {  return (    <PreferencesPanel      id="preferences-panel-example"      sections={[        {          items: [            {              id: "notifications",              label: "Notifications",              description: "Receive push notifications",              type: "switch",              defaultChecked: true,            },            {              id: "theme",              label: "Theme",              description: "Choose your appearance",              type: "toggle",              options: [                { value: "light", label: "Light" },                { value: "dark", label: "Dark" },                { value: "auto", label: "Auto" },              ],              defaultValue: "auto",            },            {              id: "analytics",              label: "Analytics",              description: "Help improve the product",              type: "switch",              defaultChecked: false,            },          ],        },      ]}    />  );}

Key Features

Three control types

Switch for binary choices, toggle for 2-4 options, select for 5+ options

Staged changes

Explicit Save/Cancel actions prevent accidental changes

Receipt state

Use PreferencesPanel.Receipt for confirmed selections with success indicators

Organized sections

Group related settings with optional section headings

Copy components/tool-ui/preferences-panel and the shared directory into your project. The shared folder contains utilities used by all Tool UI components. The tool-ui directory should sit alongside your shadcn ui directory.

Prerequisites

This component requires the following shadcn/ui components:

pnpm dlx shadcn@latest add button label select separator switch toggle-group

Directory Structure

action-buttons.tsx

schema.ts

index.ts

preferences-panel.tsx

schema.ts

index.tsx

_adapter.tsx

error-boundary.tsx

Download

Usage

"use client";import { makeAssistantTool } from "@assistant-ui/react";import {  PreferencesPanel,  PreferencesPanelErrorBoundary,  parseSerializablePreferencesPanel,  SerializablePreferencesPanelSchema,  type SerializablePreferencesPanel,} from "@/components/tool-ui/preferences-panel";export const PreferencesPanelTool = makeAssistantTool<SerializablePreferencesPanel>({  toolName: "show_preferences_panel",  description: "Display user preference settings with staged changes",  parameters: SerializablePreferencesPanelSchema,  render: ({ args, addResult, toolCallId }) => {    if (!args.sections) return null;    const data = parseSerializablePreferencesPanel({      ...args,      id: (args as any)?.id ?? `preferences-panel-${toolCallId}`,    });    return (      <PreferencesPanelErrorBoundary>        <PreferencesPanel          {...data}          onSave={async (values) => {            await addResult({ status: "saved", values });          }}          onCancel={() => {            addResult({ status: "cancelled" });          }}        />      </PreferencesPanelErrorBoundary>    );  },});

Receipt Example

import { PreferencesPanel } from "@/components/tool-ui/preferences-panel";<PreferencesPanel.Receipt  id="preferences-panel-receipt"  title="Privacy Settings"  sections={sections}  choice={{    "profile-visibility": "private",    "activity-status": false,  }}  error={{    "activity-status": "Requires premium plan",  }}/>;