Preferences Panel

Compact settings panel with staged changes.

npx tool-agent "integrate the preferences panel component for compact user settings"

npx shadcn@latest add @tool-ui/preferences-panel

Asking the user to type "turn off notifications and set theme to dark" is fragile. PreferencesPanel renders switches, toggles, and selects in a compact card with explicit Save/Cancel actions. Changes are staged locally until the user commits, and the result shows as a receipt.

Role: Decision. For choices that return to the assistant. See Design Guidelines for how component roles work.

Getting Started

Run this once from your project root.

npx tool-agent "integrate the preferences panel component for compact user settings"

npx shadcn@latest add @tool-ui/preferences-panel

Render PreferencesPanel in your UI with tool-compatible props.

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,            },          ],        },      ]}    />  );}

"use client";import { type Toolkit } from "@assistant-ui/react";import { PreferencesPanel } from "@/components/tool-ui/preferences-panel";import {  safeParseSerializablePreferencesPanel,  SerializablePreferencesPanelSchema,} from "@/components/tool-ui/preferences-panel/schema";export const toolkit: Toolkit = {  show_preferences_panel: {    description: "Display user preference settings with staged changes",    parameters: SerializablePreferencesPanelSchema,    render: ({ args, toolCallId, addResult }) => {      const parsedArgs = safeParseSerializablePreferencesPanel({        ...args,        id: args?.id ?? `preferences-panel-${toolCallId}`,      });      if (!parsedArgs) {        return null;      }      return (        <PreferencesPanel          {...parsedArgs}          onAction={async (actionId, values) => {            if (actionId === "save") {              await addResult({ choice: values });              return;            }            if (actionId === "cancel") {              await addResult({ choice: values });            }          }}        />      );    },  },};

Key Features

Three control types

Switch (on/off), toggle (2-4 options), or select (5+ options)

Staged changes

Save/Cancel buttons prevent accidental changes

Receipt state

PreferencesPanel.Receipt shows confirmed values with per-field error badges

Organized sections

Group related settings under optional section headings

Receipt State

Pass a choice prop to render this component in its receipt state. See Receipts for the pattern.

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",  }}/>;