@alexkroman1/aai 0.7.11 → 0.8.0

package/templates/pizza-ordering/agent.ts

@@ -0,0 +1,214 @@
+import { defineAgent, tool } from "@alexkroman1/aai";
+import { z } from "zod";
+
+interface Pizza {
+  id: number;
+  size: "small" | "medium" | "large";
+  crust: "thin" | "regular" | "thick" | "stuffed";
+  toppings: string[];
+  quantity: number;
+}
+
+interface OrderState {
+  pizzas: Pizza[];
+  nextId: number;
+  customerName: string;
+  orderPlaced: boolean;
+}
+
+const MENU = {
+  sizes: { small: 8.99, medium: 11.99, large: 14.99 },
+  crusts: { thin: 0, regular: 0, thick: 1.0, stuffed: 2.0 },
+  toppings: {
+    pepperoni: 1.5,
+    sausage: 1.5,
+    mushrooms: 1.0,
+    onions: 1.0,
+    green_peppers: 1.0,
+    black_olives: 1.0,
+    bacon: 2.0,
+    ham: 1.5,
+    pineapple: 1.0,
+    jalapenos: 1.0,
+    extra_cheese: 1.5,
+    spinach: 1.0,
+    tomatoes: 1.0,
+    anchovies: 1.5,
+    chicken: 2.0,
+  },
+} as const;
+
+function calculateTotal(pizzas: Pizza[]): number {
+  return pizzas.reduce((total, pizza) => {
+    const base = MENU.sizes[pizza.size];
+    const crust = MENU.crusts[pizza.crust];
+    const toppingsPrice = pizza.toppings.reduce(
+      (sum, t) =>
+        sum + (MENU.toppings[t as keyof typeof MENU.toppings] ?? 1.0),
+      0,
+    );
+    return total + (base + crust + toppingsPrice) * pizza.quantity;
+  }, 0);
+}
+
+export default defineAgent({
+  name: "Pizza Palace",
+  greeting:
+    "Welcome to Pizza Palace. I can help you build your perfect pizza. What would you like to order?",
+  instructions: `You are a friendly pizza order-taker at Pizza Palace. Keep responses short and conversational, optimized for voice.
+
+Your job is to help customers build their pizza order step by step. Guide them through size, crust, and toppings.
+
+Menu info:
+- Sizes: small ($8.99), medium ($11.99), large ($14.99)
+- Crusts: thin (free), regular (free), thick (+$1), stuffed (+$2)
+- Toppings: pepperoni ($1.50), sausage ($1.50), mushrooms ($1), onions ($1), green peppers ($1), black olives ($1), bacon ($2), ham ($1.50), pineapple ($1), jalapenos ($1), extra cheese ($1.50), spinach ($1), tomatoes ($1), anchovies ($1.50), chicken ($2)
+
+Behavior:
+- When a customer wants a pizza, collect size, crust, and toppings, then use add_pizza to add it.
+- If they just say something like "pepperoni pizza", assume medium, regular crust, and confirm before adding.
+- Always confirm what you added after using add_pizza.
+- Use view_order when the customer asks to review their order.
+- Use update_pizza if they want to change an existing pizza.
+- Use remove_pizza if they want to remove one.
+- When they say they are done ordering, use place_order.
+- Suggest popular combos if they seem unsure. For example, "Our most popular is a large pepperoni with extra cheese."
+- Always mention the running total after changes.
+- Be warm but efficient. No long monologues.`,
+
+  state: (): OrderState => ({
+    pizzas: [],
+    nextId: 1,
+    customerName: "",
+    orderPlaced: false,
+  }),
+
+  tools: {
+    add_pizza: tool({
+      description:
+        "Add a pizza to the order. Use when the customer has decided on a pizza.",
+      parameters: z.object({
+        size: z.enum(["small", "medium", "large"]),
+        crust: z.enum(["thin", "regular", "thick", "stuffed"]),
+        toppings: z
+          .array(z.string())
+          .describe("List of topping names, e.g. ['pepperoni', 'mushrooms']"),
+        quantity: z.number().default(1),
+      }),
+      execute: (args, ctx) => {
+        const state = ctx.state as OrderState;
+        const pizza: Pizza = {
+          id: state.nextId++,
+          size: args.size,
+          crust: args.crust,
+          toppings: args.toppings,
+          quantity: args.quantity,
+        };
+        state.pizzas.push(pizza);
+        const total = calculateTotal(state.pizzas);
+        return {
+          added: pizza,
+          orderTotal: `$${total.toFixed(2)}`,
+          itemCount: state.pizzas.length,
+        };
+      },
+    }),
+
+    remove_pizza: tool({
+      description: "Remove a pizza from the order by its ID.",
+      parameters: z.object({
+        pizza_id: z.number().describe("The pizza ID to remove"),
+      }),
+      execute: (args, ctx) => {
+        const state = ctx.state as OrderState;
+        const idx = state.pizzas.findIndex((p) => p.id === args.pizza_id);
+        if (idx === -1) return { error: "Pizza not found in the order." };
+        const removed = state.pizzas.splice(idx, 1)[0];
+        const total = calculateTotal(state.pizzas);
+        return {
+          removed,
+          orderTotal: `$${total.toFixed(2)}`,
+          itemCount: state.pizzas.length,
+        };
+      },
+    }),
+
+    update_pizza: tool({
+      description:
+        "Update an existing pizza in the order. Only provided fields are changed.",
+      parameters: z.object({
+        pizza_id: z.number(),
+        size: z.enum(["small", "medium", "large"]).optional(),
+        crust: z.enum(["thin", "regular", "thick", "stuffed"]).optional(),
+        toppings: z.array(z.string()).optional(),
+        quantity: z.number().optional(),
+      }),
+      execute: (args, ctx) => {
+        const state = ctx.state as OrderState;
+        const pizza = state.pizzas.find((p) => p.id === args.pizza_id);
+        if (!pizza) return { error: "Pizza not found in the order." };
+        if (args.size) pizza.size = args.size;
+        if (args.crust) pizza.crust = args.crust;
+        if (args.toppings) pizza.toppings = args.toppings;
+        if (args.quantity) pizza.quantity = args.quantity;
+        const total = calculateTotal(state.pizzas);
+        return {
+          updated: pizza,
+          orderTotal: `$${total.toFixed(2)}`,
+        };
+      },
+    }),
+
+    view_order: {
+      description:
+        "View the current order summary with all pizzas and total price.",
+      execute: (_args, ctx) => {
+        const state = ctx.state as OrderState;
+        if (state.pizzas.length === 0)
+          return { message: "The order is empty." };
+        const total = calculateTotal(state.pizzas);
+        return {
+          pizzas: state.pizzas.map((p) => ({
+            id: p.id,
+            description: `${p.quantity}x ${p.size} ${p.crust} crust with ${p.toppings.length > 0 ? p.toppings.join(", ") : "cheese only"}`,
+            size: p.size,
+            crust: p.crust,
+            toppings: p.toppings,
+            quantity: p.quantity,
+          })),
+          orderTotal: `$${total.toFixed(2)}`,
+        };
+      },
+    },
+
+    set_customer_name: tool({
+      description: "Set the customer name for the order.",
+      parameters: z.object({ name: z.string() }),
+      execute: ({ name }, ctx) => {
+        const state = ctx.state as OrderState;
+        state.customerName = name;
+        return { name };
+      },
+    }),
+
+    place_order: {
+      description:
+        "Place the final order. Use when the customer confirms they are done and ready to order.",
+      execute: (_args, ctx) => {
+        const state = ctx.state as OrderState;
+        if (state.pizzas.length === 0)
+          return { error: "Cannot place an empty order." };
+        state.orderPlaced = true;
+        const total = calculateTotal(state.pizzas);
+        const orderNumber = Math.floor(1000 + Math.random() * 9000);
+        return {
+          orderNumber,
+          customerName: state.customerName || "Guest",
+          pizzas: state.pizzas.length,
+          total: `$${total.toFixed(2)}`,
+          estimatedMinutes: 15 + state.pizzas.length * 5,
+        };
+      },
+    },
+  },
+});

package/templates/pizza-ordering/client.tsx

@@ -0,0 +1,264 @@
+import "@alexkroman1/aai/ui/styles.css";
+import { useState } from "preact/hooks";
+import { ChatView, SidebarLayout, StartScreen, mount, useSession, useToolResult } from "@alexkroman1/aai/ui";
+
+interface Pizza {
+  id: number;
+  size: string;
+  crust: string;
+  toppings: string[];
+  quantity: number;
+}
+
+interface OrderInfo {
+  pizzas: Pizza[];
+  total: string;
+  orderPlaced: boolean;
+  orderNumber?: number;
+  estimatedMinutes?: number;
+}
+
+const SIZE_PRICES: Record<string, number> = {
+  small: 8.99,
+  medium: 11.99,
+  large: 14.99,
+};
+const CRUST_PRICES: Record<string, number> = {
+  thin: 0,
+  regular: 0,
+  thick: 1.0,
+  stuffed: 2.0,
+};
+const TOPPING_PRICES: Record<string, number> = {
+  pepperoni: 1.5,
+  sausage: 1.5,
+  mushrooms: 1.0,
+  onions: 1.0,
+  green_peppers: 1.0,
+  black_olives: 1.0,
+  bacon: 2.0,
+  ham: 1.5,
+  pineapple: 1.0,
+  jalapenos: 1.0,
+  extra_cheese: 1.5,
+  spinach: 1.0,
+  tomatoes: 1.0,
+  anchovies: 1.5,
+  chicken: 2.0,
+};
+
+function pizzaPrice(p: Pizza): number {
+  const base = SIZE_PRICES[p.size] ?? 11.99;
+  const crust = CRUST_PRICES[p.crust] ?? 0;
+  const toppings = p.toppings.reduce(
+    (s, t) => s + (TOPPING_PRICES[t] ?? 1.0),
+    0,
+  );
+  return (base + crust + toppings) * p.quantity;
+}
+
+function PizzaIcon({ size }: { size: string }) {
+  const dim = size === "small" ? 36 : size === "large" ? 52 : 44;
+  return (
+    <svg
+      width={dim}
+      height={dim}
+      viewBox="0 0 100 100"
+      class="shrink-0"
+    >
+      <circle cx="50" cy="50" r="48" fill="#F4C542" stroke="#D4A017" stroke-width="3" />
+      <circle cx="50" cy="50" r="42" fill="#E8A025" />
+      <circle cx="35" cy="35" r="7" fill="#C0392B" opacity="0.9" />
+      <circle cx="60" cy="30" r="6" fill="#C0392B" opacity="0.9" />
+      <circle cx="55" cy="55" r="7" fill="#C0392B" opacity="0.9" />
+      <circle cx="30" cy="58" r="6" fill="#C0392B" opacity="0.9" />
+      <circle cx="65" cy="65" r="5" fill="#C0392B" opacity="0.9" />
+      <circle cx="45" cy="68" r="4" fill="#27AE60" opacity="0.7" />
+      <circle cx="70" cy="42" r="4" fill="#27AE60" opacity="0.7" />
+    </svg>
+  );
+}
+
+function OrderPanel({ order }: { order: OrderInfo }) {
+  if (order.orderPlaced) {
+    return (
+      <div class="flex flex-col items-center gap-4 p-6 text-center">
+        <div class="text-5xl">&#10003;</div>
+        <h2 class="text-lg font-bold text-aai-text">Order Placed</h2>
+        {order.orderNumber && (
+          <p class="text-aai-text opacity-70">
+            Order #{order.orderNumber}
+          </p>
+        )}
+        <p class="text-aai-primary font-bold text-xl">{order.total}</p>
+        {order.estimatedMinutes && (
+          <p class="text-aai-text opacity-60 text-sm">
+            Ready in ~{order.estimatedMinutes} minutes
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  if (order.pizzas.length === 0) {
+    return (
+      <div class="flex flex-col items-center gap-3 p-6 text-center opacity-50">
+        <PizzaIcon size="large" />
+        <p class="text-aai-text text-sm">
+          Your order is empty. Tell me what you'd like.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div class="flex flex-col gap-3 p-4">
+      <h3 class="text-sm font-bold text-aai-text opacity-60 uppercase tracking-wide">
+        Your Order
+      </h3>
+      {order.pizzas.map((p) => (
+        <div
+          key={p.id}
+          class="flex items-center gap-3 p-3 rounded-lg bg-aai-surface"
+        >
+          <PizzaIcon size={p.size} />
+          <div class="flex-1 min-w-0">
+            <p class="text-aai-text text-sm font-medium">
+              {p.quantity > 1 ? `${p.quantity}x ` : ""}
+              {p.size.charAt(0).toUpperCase() + p.size.slice(1)}{" "}
+              {p.crust} crust
+            </p>
+            <p class="text-aai-text opacity-60 text-xs truncate">
+              {p.toppings.length > 0
+                ? p.toppings.map((t) => t.replace("_", " ")).join(", ")
+                : "cheese only"}
+            </p>
+          </div>
+          <p class="text-aai-primary text-sm font-bold whitespace-nowrap">
+            ${pizzaPrice(p).toFixed(2)}
+          </p>
+        </div>
+      ))}
+      <div class="flex justify-between items-center pt-3 mt-1 border-t border-aai-border">
+        <span class="text-aai-text font-bold">Total</span>
+        <span class="text-aai-primary font-bold text-lg">{order.total}</span>
+      </div>
+    </div>
+  );
+}
+
+function PizzaAgent() {
+  const { running, toggle, reset } = useSession();
+  const [order, setOrder] = useState<OrderInfo>({
+    pizzas: [],
+    total: "$0.00",
+    orderPlaced: false,
+  });
+
+  useToolResult((toolName, result: any) => {
+    switch (toolName) {
+      case "add_pizza":
+        if (result.added) {
+          setOrder((prev) => ({
+            ...prev,
+            pizzas: [...prev.pizzas, result.added],
+            total: result.orderTotal,
+          }));
+        }
+        break;
+      case "remove_pizza":
+        if (result.removed) {
+          setOrder((prev) => ({
+            ...prev,
+            pizzas: prev.pizzas.filter(
+              (p: Pizza) => p.id !== result.removed.id,
+            ),
+            total: result.orderTotal,
+          }));
+        }
+        break;
+      case "update_pizza":
+        if (result.updated) {
+          setOrder((prev) => ({
+            ...prev,
+            pizzas: prev.pizzas.map((p: Pizza) =>
+              p.id === result.updated.id ? result.updated : p,
+            ),
+            total: result.orderTotal,
+          }));
+        }
+        break;
+      case "view_order":
+        if (result.pizzas) {
+          const total =
+            result.orderTotal ||
+            `$${result.pizzas.reduce((s: number, p: Pizza) => s + pizzaPrice(p), 0).toFixed(2)}`;
+          setOrder((prev) => ({ ...prev, total }));
+        }
+        break;
+      case "place_order":
+        if (result.orderNumber) {
+          setOrder((prev) => ({
+            ...prev,
+            orderPlaced: true,
+            orderNumber: result.orderNumber,
+            total: result.total,
+            estimatedMinutes: result.estimatedMinutes,
+          }));
+        }
+        break;
+    }
+  });
+
+  const sidebar = (
+    <>
+      <div class="p-4 flex items-center gap-3 border-b border-aai-border">
+        <PizzaIcon size="small" />
+        <h2 class="text-base font-bold text-aai-text">Pizza Palace</h2>
+      </div>
+      <div class="flex-1">
+        <OrderPanel order={order} />
+      </div>
+      <div class="p-3 flex gap-2 border-t border-aai-border">
+        <button
+          class={`flex-1 py-2 rounded-lg text-sm border-none cursor-pointer text-white ${running.value ? "bg-aai-error" : "bg-aai-primary"}`}
+          onClick={toggle}
+        >
+          {running.value ? "Pause" : "Resume"}
+        </button>
+        <button
+          class="py-2 px-4 rounded-lg text-sm cursor-pointer text-aai-text bg-aai-surface border border-aai-border"
+          onClick={() => {
+            reset();
+            setOrder({
+              pizzas: [],
+              total: "$0.00",
+              orderPlaced: false,
+            });
+          }}
+        >
+          New Order
+        </button>
+      </div>
+    </>
+  );
+
+  return (
+    <StartScreen icon={<PizzaIcon size="large" />} title="Pizza Palace" subtitle="Voice-powered pizza ordering" buttonText="Start Ordering">
+      <SidebarLayout sidebar={sidebar}>
+        <ChatView />
+      </SidebarLayout>
+    </StartScreen>
+  );
+}
+
+mount(PizzaAgent, {
+  title: "Pizza Palace",
+  theme: {
+    bg: "#1a1008",
+    primary: "#E8A025",
+    text: "#f5f0e8",
+    surface: "#2a1f10",
+    border: "#3d2e18",
+  },
+});

package/templates/smart-research/agent.ts

@@ -1,6 +1,6 @@
-import { defineAgent } from "@alexkroman1/aai";
+import { defineAgent, tool } from "@alexkroman1/aai";
+import type { HookContext, StepInfo } from "@alexkroman1/aai";
 import { z } from "zod";
-import type { HookContext, StepInfo } from "@alexkroman1/aai/types";
 
 /**
  * Smart Research Agent — demonstrates all 5 advanced features:
@@ -88,18 +88,18 @@ Always search first, then analyze, then answer. Be thorough but concise.`,
   },
 
   tools: {
-    save_source: {
+    save_source: tool({
       description: "Save a source URL found during research for later analysis",
       parameters: z.object({
         url: z.string().describe("The source URL"),
         title: z.string().describe("Brief title or description"),
       }),
-      execute: (args: { url: string; title: string }, ctx) => {
+      execute: ({ url, title }, ctx) => {
         const state = ctx.state;
-        state.sources.push(`${args.title}: ${args.url}`);
+        state.sources.push(`${title}: ${url}`);
         return { saved: true, totalSources: state.sources.length };
       },
-    },
+    }),
 
     mark_complex: {
       description:
@@ -126,25 +126,25 @@ Always search first, then analyze, then answer. Be thorough but concise.`,
     },
 
     // Feature 2: ctx.messages — access conversation history in tools
-    analyze: {
+    analyze: tool({
       description:
         "Analyze all gathered sources and conversation context to form a conclusion",
       parameters: z.object({
         focus: z.string().describe("What aspect to focus the analysis on"),
       }),
-      execute: (args: { focus: string }, ctx) => {
+      execute: ({ focus }, ctx) => {
         const state = ctx.state;
         // Use ctx.messages to see what's been discussed
         const userMessages = ctx.messages.filter((m) => m.role === "user");
         return {
-          focus: args.focus,
+          focus,
           sources: state.sources,
           conversationTurns: userMessages.length,
           totalMessages: ctx.messages.length,
           phase: state.phase,
         };
       },
-    },
+    }),
 
     conversation_summary: {
       description: "Get a summary of the conversation so far",