Order Summary

Display purchases with itemized pricing.

Order Summary

Premium Coffee Beans$48.00

Single origin, medium roast · Qty: 2

Ceramic Pour-Over Set$45.00

Includes dripper and carafe

Subtotal: $93.00
Shipping: $5.99
Tax: $7.44
Total: $106.43

<OrderSummary  id="order-summary-default"  items={[      {          "id": "item-1",          "name": "Premium Coffee Beans",          "description": "Single origin, medium roast",          "imageUrl": "https://images.unsplash.com/photo-1559056199-641a0ac8b55e?w=100&h=100&fit=crop",          "quantity": 2,          "unitPrice": 24      },      {          "id": "item-2",          "name": "Ceramic Pour-Over Set",          "description": "Includes dripper and carafe",          "imageUrl": "https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=100&h=100&fit=crop",          "quantity": 1,          "unitPrice": 45      }  ]}  pricing={{      "subtotal": 93,      "tax": 7.44,      "shipping": 5.99,      "total": 106.43,      "currency": "USD"  }}/>

Nobody clicks "Buy" without seeing what they're buying. OrderSummary renders line items with images, quantities, and an itemized price breakdown, everything the user needs to review before committing. Use OrderSummary.Display during confirmation and OrderSummary.Receipt after the purchase is confirmed.

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 shadcn@latest add @tool-ui/order-summary

Render OrderSummary in your UI with tool-compatible props.

import { OrderSummary } from "@/components/tool-ui/order-summary";export function Example() {  return (    <OrderSummary.Display      id="order-summary-example"      items={[        {          id: "item-1",          name: "Wireless Earbuds Pro",          description: "Active noise cancellation",          imageUrl: "https://example.com/earbuds.jpg",          quantity: 1,          unitPrice: 149.99,        },        {          id: "item-2",          name: "USB-C Charging Cable",          description: "2m braided",          quantity: 2,          unitPrice: 19.99,        },      ]}      pricing={{        subtotal: 189.97,        tax: 16.62,        shipping: 0,        total: 206.59,        currency: "USD",      }}    />  );}

"use client";import { type Toolkit } from "@assistant-ui/react";import { OrderSummary } from "@/components/tool-ui/order-summary";import {  safeParseSerializableOrderSummary,  SerializableOrderSummarySchema,} from "@/components/tool-ui/order-summary/schema";import {  ToolUI,  createArgsToolRenderer,  createDecisionResult,} from "@/components/tool-ui/shared";export const toolkit: Toolkit = {  createOrder: {    description: "Display a purchase order for user confirmation",    parameters: SerializableOrderSummarySchema,    render: createArgsToolRenderer({      safeParse: safeParseSerializableOrderSummary,      idPrefix: "order",      render: (parsedArgs, { result, addResult }) =>        result ? <OrderSummary.Receipt {...parsedArgs} choice={result} /> : (          <ToolUI id={parsedArgs.id}>            <ToolUI.Surface>              <OrderSummary.Display {...parsedArgs} />            </ToolUI.Surface>            <ToolUI.Actions>              <ToolUI.DecisionActions                actions={[                  { id: "cancel", label: "Cancel", variant: "outline" },                  { id: "confirm", label: "Purchase", variant: "default" },                ]}                onAction={(action) =>                  createDecisionResult({                    decisionId: `${parsedArgs.id}-decision`,                    action,                    payload:                      action.id === "confirm"                        ? {                            orderId: `ORD-${Date.now()}`,                            confirmedAt: new Date().toISOString(),                          }                        : undefined,                  })                }                onCommit={async (decision) => {                  if (decision.actionId !== "confirm") return;                  const orderId =                    typeof decision.payload?.orderId === "string"                      ? decision.payload.orderId                      : `ORD-${Date.now()}`;                  const confirmedAt =                    typeof decision.payload?.confirmedAt === "string"                      ? decision.payload.confirmedAt                      : new Date().toISOString();                  await addResult?.({                    action: "confirm",                    orderId,                    confirmedAt,                  });                }}              />            </ToolUI.Actions>          </ToolUI>        ),    }),  },};