pnpm dlx shadcn@latest add button card

// Backend tool
import { tool } from "ai";
import { z } from "zod";
import { SerializableItemCarouselSchema } from "@/components/tool-ui/item-carousel";

const searchItems = tool({
  description: "Search for items matching criteria",
  inputSchema: z.object({
    query: z.string(),
    maxPrice: z.number().optional(),
  }),
  outputSchema: SerializableItemCarouselSchema,
  async execute({ query, maxPrice }) {
    const items = await fetchItems(query, maxPrice);
    return {
      id: `item-search-${query}`,
      items: items.map((item) => ({
        id: item.id,
        name: item.name,
        subtitle: `$${item.price.toFixed(2)}`,
        image: item.imageUrl,
        actions: [
          { id: "view", label: "View Details" },
          { id: "select", label: "Select", variant: "default" },
        ],
      })),
    };
  },
});

// Frontend with assistant-ui
import { makeAssistantToolUI } from "@assistant-ui/react";
import { ItemCarousel } from "@/components/tool-ui/item-carousel";

export const SearchItemsUI = makeAssistantToolUI({
  toolName: "searchItems",
  render: ({ result }) => (
    <ItemCarousel
      {...result}
      onItemClick={(id) => router.push(`/items/${id}`)}
      onItemAction={(itemId, actionId) => {
        if (actionId === "select") {
          selectItem(itemId);
        }
      }}
    />
  ),
});

<ItemCarousel
  id="item-carousel-recommendations"
  items={[
      {
          "id": "rec-1",
          "name": "Deadwood",
          "subtitle": "HBO · 2004",
          "color": "#8b6f47",
          "actions": [
              {
                  "id": "info",
                  "label": "Details",
                  "variant": "secondary"
              },
              {
                  "id": "watch",
                  "label": "Watch"
              }
          ]
      },
      {
          "id": "rec-2",
          "name": "The Wire",
          "subtitle": "HBO · 2002",
          "color": "#1e293b",
          "actions": [
              {
                  "id": "info",
                  "label": "Details",
                  "variant": "secondary"
              },
              {
                  "id": "watch",
                  "label": "Watch"
              }
          ]
      },
      {
          "id": "rec-3",
          "name": "Twin Peaks",
          "subtitle": "ABC · 1990",
          "color": "#7f1d1d",
          "actions": [
              {
                  "id": "info",
                  "label": "Details",
                  "variant": "secondary"
              },
              {
                  "id": "watch",
                  "label": "Watch"
              }
          ]
      },
      {
          "id": "rec-4",
          "name": "The Simpsons",
          "subtitle": "Fox · 1989",
          "color": "#fbbf24",
          "actions": [
              {
                  "id": "add",
                  "label": "Add to List"
              }
          ]
      },
      {
          "id": "rec-5",
          "name": "Mad Men",
          "subtitle": "AMC · 2007",
          "color": "#c2410c",
          "actions": [
              {
                  "id": "info",
                  "label": "Details",
                  "variant": "secondary"
              },
              {
                  "id": "watch",
                  "label": "Watch"
              }
          ]
      },
      {
          "id": "rec-6",
          "name": "Peep Show",
          "subtitle": "Channel 4 · 2003",
          "color": "#1e40af",
          "actions": [
              {
                  "id": "info",
                  "label": "Details",
                  "variant": "secondary"
              },
              {
                  "id": "watch",
                  "label": "Watch"
              }
          ]
      },
      {
          "id": "rec-7",
          "name": "The Sopranos",
          "subtitle": "HBO · 1999",
          "color": "#991b1b",
          "actions": [
              {
                  "id": "info",
                  "label": "Details",
                  "variant": "secondary"
              },
              {
                  "id": "watch",
                  "label": "Watch"
              }
          ]
      }
  ]}
  onItemClick={(itemId) => console.log("Clicked:", itemId)}
  onItemAction={(itemId, actionId) => console.log("Action:", itemId, actionId)}
/>