ACME Outdoors — Commerce Agent Demo

⛰️

\n ACME Outdoors — Ridge\n Claude commerce agent demo · modeled on anthropics/commerce-agents\n

\n \n \n view source\n

\n \n

\n \n \n \n \n

\n \n

\n \n \n\n\n",[],[209],"81a66c2f-c1cf-483a-8d5b-1301107656e1","frontend.ts","4548112e-a7d4-11f1-9f87-1607ee4eb77e",["D",1788467253259],2,"// frontend.ts\n// Vanilla client for the chat demo — no framework needed for a single chat\n// page. Talks to /api/chat, /api/reset, /api/forget. Renders the assistant's\n// text plus any \"events\" (present_products / view_cart / checkout) as cards,\n// in the order the agent produced them during the turn.\n\ninterface ProductCard {\n id: string;\n name: string;\n category: string;\n price: number;\n stock: number;\n attributes: Record;\n}\n\ninterface CartItem {\n product_id: string;\n name: string;\n category: string;\n price: number;\n quantity: number;\n line_total: number;\n}\n\ntype UiEvent =\n | { type: \"products\"; layout: \"carousel\" | \"list\"; message?: string; products: ProductCard[] }\n | { type: \"cart\"; items: CartItem[]; subtotal: number }\n | { type: \"checkout\"; items: CartItem[]; subtotal: number; note: string };\n\nconst SESSION_KEY = \"commerce-demo-session-id\";\n\n// Category → { icon, gradient } for the card art. Purely cosmetic — the\n// catalog has no real photography, so each category gets a distinct\n// gradient swatch and emoji instead of a broken .\nconst CATEGORY_STYLE: Record = {\n tent: { icon: \"⛺\", gradient: \"linear-gradient(135deg, #2f6fed, #1a3f8f)\" },\n backpack: { icon: \"🎒\", gradient: \"linear-gradient(135deg, #e8792a, #b6501a)\" },\n \"sleeping-bag\": { icon: \"🛏️\", gradient: \"linear-gradient(135deg, #7c53d6, #4a2a99)\" },\n footwear: { icon: \"🥾\", gradient: \"linear-gradient(135deg, #4a5568, #1f2733)\" },\n jacket: { icon: \"🧥\", gradient: \"linear-gradient(135deg, #0bb8a2, #067a6c)\" },\n cook: { icon: \"🔥\", gradient: \"linear-gradient(135deg, #e2483d, #a02318)\" },\n light: { icon: \"🔦\", gradient: \"linear-gradient(135deg, #f2b705, #c98a02)\" },\n water: { icon: \"💧\", gradient: \"linear-gradient(135deg, #1a9dff, #0b5fb0)\" },\n};\n\nfunction categoryStyle(cat: string) {\n return CATEGORY_STYLE[cat] ?? { icon: \"🏔️\", gradient: \"linear-gradient(135deg, #1a7fff, #005ebe)\" };\n}\n\nfunction getSessionId(): string {\n let id = localStorage.getItem(SESSION_KEY);\n if (!id) {\n id = crypto.randomUUID();\n localStorage.setItem(SESSION_KEY, id);\n }\n return id;\n}\n\nconst messagesEl = document.getElementById(\"messages\")!;\nconst inputEl = document.getElementById(\"input\") as HTMLInputElement;\nconst sendBtn = document.getElementById(\"send-btn\") as HTMLButtonElement;\nconst resetBtn = document.getElementById(\"reset-btn\") as HTMLButtonElement;\nconst forgetBtn = document.getElementById(\"forget-btn\") as HTMLButtonElement;\nconst debugEl = document.getElementById(\"debug\")!;\nconst suggestionsEl = document.getElementById(\"suggestions\")!;\n\nconst sessionId = getSessionId();\n\nfunction el(tag: string, className?: string): HTMLElement {\n const e = document.createElement(tag);\n if (className) e.className = className;\n return e;\n}\n\nfunction addBubble(role: \"user\" | \"assistant\" | \"system\", text: string): HTMLElement {\n const b = el(\"div\", `bubble ${role}`);\n b.textContent = text;\n messagesEl.appendChild(b);\n scrollToBottom();\n return b;\n}\n\nfunction addTyping(): HTMLElement {\n const b = el(\"div\", \"bubble assistant\");\n const dots = el(\"span\", \"typing-dots\");\n dots.innerHTML = \"\";\n b.appendChild(dots);\n messagesEl.appendChild(b);\n scrollToBottom();\n return b;\n}\n\nfunction fmtAttrKey(k: string): string {\n return k.replace(/_/g, \" \");\n}\n\nfunction fmtAttrValue(k: string, v: unknown): string {\n if (typeof v === \"boolean\") return v ? \"yes\" : \"no\";\n if (k.includes(\"weight_oz\")) return `${v} oz`;\n if (k.includes(\"waterproof_rating_mm\")) return `${v}mm`;\n if (k === \"capacity_people\") return `${v}p`;\n if (k === \"volume_l\") return `${v}L`;\n if (k === \"rating_f\") return `${v}°F`;\n return String(v);\n}\n\nfunction productCardEl(p: ProductCard): HTMLElement {\n const style = categoryStyle(p.category);\n const card = el(\"div\", \"card\") as HTMLDivElement;\n card.style.setProperty(\"--art-gradient\", style.gradient);\n\n const art = el(\"div\", \"card-art\");\n art.textContent = style.icon;\n const catChip = el(\"span\", \"cat-chip\");\n catChip.textContent = p.category.replace(/-/g, \" \");\n art.appendChild(catChip);\n\n const body = el(\"div\", \"card-body\");\n const h = el(\"h4\");\n h.textContent = p.name;\n\n const priceRow = el(\"div\", \"card-price-row\");\n const price = el(\"span\", \"price\");\n price.textContent = `$${p.price.toFixed(2)}`;\n const stock = el(\"span\", `stock-dot${p.stock > 0 ? \"\" : \" out\"}`);\n stock.textContent = p.stock > 0 ? `${p.stock} in stock` : \"out of stock\";\n priceRow.append(price, stock);\n\n const chipRow = el(\"div\", \"chip-row\");\n const attrs = Object.entries(p.attributes || {}).slice(0, 4);\n for (const [k, v] of attrs) {\n const chip = el(\"span\", \"chip\");\n chip.textContent = `${fmtAttrKey(k)}: ${fmtAttrValue(k, v)}`;\n chipRow.appendChild(chip);\n }\n\n const addBtn = el(\"button\", \"card-add\") as HTMLButtonElement;\n addBtn.textContent = p.stock > 0 ? \"+ Add to cart\" : \"Out of stock\";\n addBtn.disabled = p.stock <= 0;\n addBtn.addEventListener(\"click\", () => {\n addBtn.disabled = true;\n addBtn.textContent = \"Adding…\";\n sendMessage(`Add the ${p.name} to my cart`);\n });\n\n body.append(h, priceRow, chipRow, addBtn);\n card.append(art, body);\n return card;\n}\n\nfunction renderEvent(evt: UiEvent) {\n const wrap = el(\"div\", \"bubble event\");\n const head = el(\"div\", \"event-head\");\n\n if (evt.type === \"products\") {\n const chip = el(\"span\", \"tool-chip\");\n chip.textContent = \"present_products\";\n head.appendChild(chip);\n if (evt.message) {\n const cap = el(\"span\", \"caption\");\n cap.textContent = evt.message;\n head.appendChild(cap);\n }\n wrap.appendChild(head);\n const grid = el(\"div\", evt.layout === \"list\" ? \"list-layout\" : \"carousel\");\n for (const p of evt.products) grid.appendChild(productCardEl(p));\n wrap.appendChild(grid);\n } else if (evt.type === \"cart\") {\n const chip = el(\"span\", \"tool-chip\");\n chip.textContent = \"view_cart\";\n head.appendChild(chip);\n wrap.appendChild(head);\n wrap.appendChild(cartCard(evt.items, evt.subtotal));\n } else if (evt.type === \"checkout\") {\n const chip = el(\"span\", \"tool-chip\");\n chip.textContent = \"checkout\";\n head.appendChild(chip);\n wrap.appendChild(head);\n wrap.appendChild(cartCard(evt.items, evt.subtotal));\n const note = el(\"div\", \"checkout-note\");\n const tick = el(\"span\", \"tick\");\n tick.textContent = \"✓\";\n const text = document.createElement(\"span\");\n text.textContent = evt.note;\n note.append(tick, text);\n wrap.appendChild(note);\n }\n\n messagesEl.appendChild(wrap);\n scrollToBottom();\n}\n\nfunction cartCard(items: CartItem[], subtotal: number): HTMLElement {\n const wrap = el(\"div\", \"cart-card\");\n if (items.length === 0) {\n const empty = el(\"div\", \"empty-cart\");\n empty.textContent = \"Cart is empty.\";\n wrap.appendChild(empty);\n return wrap;\n }\n const table = document.createElement(\"table\");\n const thead = document.createElement(\"thead\");\n thead.innerHTML = \"ItemQtyPriceLine total\";\n table.appendChild(thead);\n const tbody = document.createElement(\"tbody\");\n for (const i of items) {\n const style = categoryStyle(i.category);\n const tr = document.createElement(\"tr\");\n const itemTd = document.createElement(\"td\");\n const lineItem = el(\"div\", \"line-item\");\n const icon = el(\"div\", \"line-icon\") as HTMLDivElement;\n icon.style.setProperty(\"--art-gradient\", style.gradient);\n icon.textContent = style.icon;\n const label = document.createElement(\"span\");\n label.textContent = i.name;\n lineItem.append(icon, label);\n itemTd.appendChild(lineItem);\n tr.appendChild(itemTd);\n tr.innerHTML += `${i.quantity}$${i.price.toFixed(2)}$${i.line_total.toFixed(2)}`;\n tbody.appendChild(tr);\n }\n table.appendChild(tbody);\n const tfoot = document.createElement(\"tfoot\");\n tfoot.innerHTML = `Subtotal$${subtotal.toFixed(2)}`;\n table.appendChild(tfoot);\n wrap.appendChild(table);\n return wrap;\n}\n\nfunction scrollToBottom() {\n messagesEl.scrollTop = messagesEl.scrollHeight;\n}\n\nfunction setBusy(busy: boolean) {\n inputEl.disabled = busy;\n sendBtn.disabled = busy;\n sendBtn.textContent = busy ? \"…\" : \"Send\";\n}\n\nasync function sendMessage(text: string) {\n if (!text.trim()) return;\n suggestionsEl.style.display = \"none\";\n addBubble(\"user\", text);\n setBusy(true);\n const typingEl = addTyping();\n try {\n const res = await fetch(\"/api/chat\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ session_id: sessionId, message: text }),\n });\n typingEl.remove();\n if (!res.ok) {\n const errText = await res.text().catch(() => res.statusText);\n addBubble(\"system\", `Error: ${errText}`);\n return;\n }\n const data = await res.json();\n for (const evt of data.events ?? []) renderEvent(evt);\n if (data.reply) addBubble(\"assistant\", data.reply);\n if (data.usage) {\n debugEl.textContent = `model calls: ${data.usage.model_calls} · input: ${data.usage.input_tokens} · output: ${data.usage.output_tokens} · cache read: ${data.usage.cache_read_input_tokens} · cache write: ${data.usage.cache_creation_input_tokens}`;\n }\n } catch (err) {\n typingEl.remove();\n addBubble(\"system\", `Request failed: ${(err as Error).message}`);\n } finally {\n setBusy(false);\n inputEl.focus();\n }\n}\n\nsendBtn.addEventListener(\"click\", () => {\n const text = inputEl.value;\n inputEl.value = \"\";\n sendMessage(text);\n});\n\ninputEl.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Enter\") {\n const text = inputEl.value;\n inputEl.value = \"\";\n sendMessage(text);\n }\n});\n\nsuggestionsEl.addEventListener(\"click\", (e) => {\n const target = e.target as HTMLElement;\n const q = target.getAttribute(\"data-q\");\n if (q) sendMessage(q);\n});\n\nresetBtn.addEventListener(\"click\", async () => {\n await fetch(\"/api/reset\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ session_id: sessionId }),\n });\n messagesEl.innerHTML = \"\";\n suggestionsEl.style.display = \"flex\";\n debugEl.textContent = \"\";\n addBubble(\"system\", \"Started a new chat. Cart and conversation history were cleared; remembered preferences were kept.\");\n});\n\nforgetBtn.addEventListener(\"click\", async () => {\n await fetch(\"/api/forget\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ session_id: sessionId }),\n });\n addBubble(\"system\", \"Forgot all remembered preferences for this session.\");\n});\n\naddBubble(\n \"system\",\n \"Try: “I need a 2-person tent under $250”, “outfit me for a weekend backpacking trip”, or “what's your return policy?”\"\n);\n",[],[217],"bd965a82-339b-4e0a-8e68-bdd5cbd44894","db.ts","c58ea8e4-a7d3-11f1-895f-1607ee4eb77e",3,["D",1788466341931],"// db.ts\n// Session state for the demo: conversation history, the set of product IDs\n// the server has actually issued to a session (the provenance allow-list the\n// blog describes), the cart, and long-term memory facts. All per session_id,\n// which the client generates and keeps in localStorage.\n\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nlet initialized = false;\n\nexport async function initDb() {\n if (initialized) return;\n await sqlite.batch([\n `CREATE TABLE IF NOT EXISTS commerce_messages (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n session_id TEXT NOT NULL,\n turn INTEGER NOT NULL,\n role TEXT NOT NULL,\n content TEXT NOT NULL,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n `CREATE TABLE IF NOT EXISTS commerce_known_ids (\n session_id TEXT NOT NULL,\n product_id TEXT NOT NULL,\n created_at TEXT NOT NULL DEFAULT (datetime('now')),\n PRIMARY KEY (session_id, product_id)\n )`,\n `CREATE TABLE IF NOT EXISTS commerce_cart (\n session_id TEXT NOT NULL,\n product_id TEXT NOT NULL,\n quantity INTEGER NOT NULL,\n PRIMARY KEY (session_id, product_id)\n )`,\n `CREATE TABLE IF NOT EXISTS commerce_memory (\n session_id TEXT NOT NULL,\n key TEXT NOT NULL,\n value TEXT NOT NULL,\n category TEXT,\n updated_at TEXT NOT NULL DEFAULT (datetime('now')),\n PRIMARY KEY (session_id, key)\n )`,\n ]);\n initialized = true;\n}\n\n// ---------- messages (conversation history, Anthropic content-block JSON) ----------\n\nexport interface StoredMessage {\n role: \"user\" | \"assistant\";\n content: unknown; // Anthropic content block array\n}\n\nexport async function loadMessages(sessionId: string): Promise {\n const res = await sqlite.execute(\n `SELECT role, content FROM commerce_messages WHERE session_id = ? ORDER BY id ASC`,\n [sessionId]\n );\n return res.rows.map((r: any) => ({ role: r.role, content: JSON.parse(r.content) }));\n}\n\nexport async function appendMessage(sessionId: string, turn: number, msg: StoredMessage) {\n await sqlite.execute(\n `INSERT INTO commerce_messages (session_id, turn, role, content) VALUES (?, ?, ?, ?)`,\n [sessionId, turn, msg.role, JSON.stringify(msg.content)]\n );\n}\n\nexport async function nextTurnNumber(sessionId: string): Promise {\n const res = await sqlite.execute(\n `SELECT COALESCE(MAX(turn), -1) AS maxTurn FROM commerce_messages WHERE session_id = ?`,\n [sessionId]\n );\n const maxTurn = Number((res.rows[0] as any)?.maxTurn ?? -1);\n return maxTurn + 1;\n}\n\nexport async function clearSession(sessionId: string) {\n await sqlite.batch([\n { sql: `DELETE FROM commerce_messages WHERE session_id = ?`, args: [sessionId] },\n { sql: `DELETE FROM commerce_known_ids WHERE session_id = ?`, args: [sessionId] },\n { sql: `DELETE FROM commerce_cart WHERE session_id = ?`, args: [sessionId] },\n // memory intentionally survives a \"new chat\" so personalization can be\n // demoed across sessions with the same session_id kept, or wiped\n // explicitly by the client using /api/forget.\n ]);\n}\n\nexport async function forgetMemory(sessionId: string) {\n await sqlite.execute(`DELETE FROM commerce_memory WHERE session_id = ?`, [sessionId]);\n}\n\n// ---------- known/server-issued product IDs ----------\n\nexport async function markKnownIds(sessionId: string, productIds: string[]) {\n if (productIds.length === 0) return;\n const stmts = productIds.map((id) => ({\n sql: `INSERT OR IGNORE INTO commerce_known_ids (session_id, product_id) VALUES (?, ?)`,\n args: [sessionId, id],\n }));\n await sqlite.batch(stmts);\n}\n\nexport async function isKnownId(sessionId: string, productId: string): Promise {\n const res = await sqlite.execute(\n `SELECT 1 FROM commerce_known_ids WHERE session_id = ? AND product_id = ?`,\n [sessionId, productId]\n );\n return res.rows.length > 0;\n}\n\n// ---------- cart ----------\n\nexport interface CartLine {\n product_id: string;\n quantity: number;\n}\n\nexport async function getCart(sessionId: string): Promise {\n const res = await sqlite.execute(\n `SELECT product_id, quantity FROM commerce_cart WHERE session_id = ? ORDER BY product_id`,\n [sessionId]\n );\n return res.rows.map((r: any) => ({ product_id: r.product_id, quantity: Number(r.quantity) }));\n}\n\nexport async function setCartLine(sessionId: string, productId: string, quantity: number) {\n if (quantity <= 0) {\n await sqlite.execute(`DELETE FROM commerce_cart WHERE session_id = ? AND product_id = ?`, [\n sessionId,\n productId,\n ]);\n return;\n }\n await sqlite.execute(\n `INSERT INTO commerce_cart (session_id, product_id, quantity) VALUES (?, ?, ?)\n ON CONFLICT (session_id, product_id) DO UPDATE SET quantity = excluded.quantity`,\n [sessionId, productId, quantity]\n );\n}\n\nexport async function getCartQuantity(sessionId: string, productId: string): Promise {\n const res = await sqlite.execute(\n `SELECT quantity FROM commerce_cart WHERE session_id = ? AND product_id = ?`,\n [sessionId, productId]\n );\n return res.rows.length ? Number((res.rows[0] as any).quantity) : 0;\n}\n\nexport async function clearCart(sessionId: string) {\n await sqlite.execute(`DELETE FROM commerce_cart WHERE session_id = ?`, [sessionId]);\n}\n\n// ---------- long-term memory (per-session facts, extracted asynchronously) ----------\n\nexport interface MemoryFact {\n key: string;\n value: string;\n category: string | null;\n}\n\nexport async function getMemory(sessionId: string): Promise {\n const res = await sqlite.execute(\n `SELECT key, value, category FROM commerce_memory WHERE session_id = ? ORDER BY updated_at DESC`,\n [sessionId]\n );\n return res.rows.map((r: any) => ({ key: r.key, value: r.value, category: r.category }));\n}\n\nexport async function upsertMemory(sessionId: string, fact: MemoryFact) {\n await sqlite.execute(\n `INSERT INTO commerce_memory (session_id, key, value, category, updated_at)\n VALUES (?, ?, ?, ?, datetime('now'))\n ON CONFLICT (session_id, key) DO UPDATE SET value = excluded.value, category = excluded.category, updated_at = datetime('now')`,\n [sessionId, fact.key, fact.value, fact.category]\n );\n}\n\nexport async function deleteMemoryKey(sessionId: string, key: string) {\n await sqlite.execute(`DELETE FROM commerce_memory WHERE session_id = ? AND key = ?`, [sessionId, key]);\n}\n",[],[225],"bb179e6f-5253-4c7c-8205-ffccc59f7544","catalog.ts","b858f350-a7d3-11f1-a9ea-1607ee4eb77e",["D",1788466319768],"// catalog.ts\n// Fictional catalog for \"ACME Outdoors\" — modeled on the retail vertical in\n// anthropics/commerce-agents. All products, prices, and stock are made up\n// for this demo; nothing here calls a real inventory system.\n\nexport interface Product {\n id: string;\n name: string;\n category: \"tent\" | \"backpack\" | \"sleeping-bag\" | \"footwear\" | \"jacket\" | \"cook\" | \"light\" | \"water\";\n price: number; // USD\n stock: number;\n attributes: Record;\n tags: string[];\n description: string;\n}\n\nexport const CATALOG: Product[] = [\n {\n id: \"tent-clearwater-2p\",\n name: \"Clearwater 2P Tent\",\n category: \"tent\",\n price: 229,\n stock: 14,\n attributes: { capacity_people: 2, weight_oz: 96, waterproof_rating_mm: 1500, seasons: 3 },\n tags: [\"tent\", \"2-person\", \"backpacking\", \"3-season\", \"lightweight\"],\n description: \"A freestanding 2-person, 3-season tent with a 1500mm waterproof rating and a single vestibule. Popular for weekend backpacking trips.\",\n },\n {\n id: \"tent-summit-4p\",\n name: \"Summit 4P Basecamp Tent\",\n category: \"tent\",\n price: 389,\n stock: 6,\n attributes: { capacity_people: 4, weight_oz: 210, waterproof_rating_mm: 2000, seasons: 4 },\n tags: [\"tent\", \"4-person\", \"family\", \"4-season\", \"basecamp\"],\n description: \"A roomy 4-season basecamp tent built for wind and snow load, with two doors and a gear loft.\",\n },\n {\n id: \"tent-solo-ultralight\",\n name: \"Solo Ultralight Tent\",\n category: \"tent\",\n price: 319,\n stock: 9,\n attributes: { capacity_people: 1, weight_oz: 38, waterproof_rating_mm: 1200, seasons: 3 },\n tags: [\"tent\", \"1-person\", \"ultralight\", \"thru-hiking\", \"solo\"],\n description: \"A trekking-pole ultralight shelter for one, built for thru-hikers counting ounces.\",\n },\n {\n id: \"pack-trailhead-45\",\n name: \"Trailhead 45L Backpack\",\n category: \"backpack\",\n price: 159,\n stock: 20,\n attributes: { volume_l: 45, weight_oz: 52, frame: \"internal\", torso_fit: \"adjustable\" },\n tags: [\"backpack\", \"45l\", \"weekend\", \"internal-frame\"],\n description: \"A 45-liter internal-frame pack sized for 2-3 night trips, with an adjustable torso and a hydration sleeve.\",\n },\n {\n id: \"pack-ridgeline-65\",\n name: \"Ridgeline 65L Backpack\",\n category: \"backpack\",\n price: 219,\n stock: 11,\n attributes: { volume_l: 65, weight_oz: 74, frame: \"internal\", torso_fit: \"adjustable\" },\n tags: [\"backpack\", \"65l\", \"multi-day\", \"internal-frame\"],\n description: \"A 65-liter pack for 4-7 night trips, with a load-bearing hip belt and a removable top lid.\",\n },\n {\n id: \"pack-daytripper-22\",\n name: \"Daytripper 22L Backpack\",\n category: \"backpack\",\n price: 89,\n stock: 30,\n attributes: { volume_l: 22, weight_oz: 24, frame: \"frameless\", torso_fit: \"fixed\" },\n tags: [\"backpack\", \"22l\", \"day-hike\", \"frameless\"],\n description: \"A light frameless daypack for short hikes, with a hip belt and two water bottle pockets.\",\n },\n {\n id: \"bag-lowpoint-20\",\n name: \"Low Point 20°F Sleeping Bag\",\n category: \"sleeping-bag\",\n price: 149,\n stock: 18,\n attributes: { rating_f: 20, weight_oz: 44, fill: \"synthetic\", shape: \"mummy\" },\n tags: [\"sleeping-bag\", \"20f\", \"3-season\", \"synthetic\"],\n description: \"A synthetic-fill mummy bag rated to 20°F, a solid 3-season choice that stays warm when damp.\",\n },\n {\n id: \"bag-frostline-0\",\n name: \"Frostline 0°F Sleeping Bag\",\n category: \"sleeping-bag\",\n price: 279,\n stock: 8,\n attributes: { rating_f: 0, weight_oz: 38, fill: \"down\", shape: \"mummy\" },\n tags: [\"sleeping-bag\", \"0f\", \"winter\", \"down\", \"ultralight\"],\n description: \"A 650-fill-power down mummy bag rated to 0°F for shoulder-season and winter trips.\",\n },\n {\n id: \"boot-traverse-mid\",\n name: \"Traverse Mid Hiking Boot\",\n category: \"footwear\",\n price: 139,\n stock: 40,\n attributes: { height: \"mid\", waterproof: true, sizes: \"M6-M13, W5-W11\" },\n tags: [\"boots\", \"hiking\", \"waterproof\", \"mid-height\"],\n description: \"A waterproof mid-height hiking boot with a lugged rubber outsole, sized in half sizes.\",\n },\n {\n id: \"shoe-fasttrail-runner\",\n name: \"Fast Trail Runner\",\n category: \"footwear\",\n price: 129,\n stock: 35,\n attributes: { height: \"low\", waterproof: false, sizes: \"M6-M13, W5-W11\" },\n tags: [\"shoes\", \"trail-running\", \"lightweight\", \"fast-hiking\"],\n description: \"A low-cut trail running shoe with an aggressive tread, favored for fast, light hiking.\",\n },\n {\n id: \"jacket-stormline-shell\",\n name: \"Stormline Rain Shell\",\n category: \"jacket\",\n price: 179,\n stock: 25,\n attributes: { waterproof_rating_mm: 20000, breathable: true, packable: true },\n tags: [\"jacket\", \"rain-shell\", \"waterproof\", \"packable\"],\n description: \"A fully seam-taped, packable rain shell with pit zips, rated to 20,000mm.\",\n },\n {\n id: \"jacket-downpeak-puffer\",\n name: \"Downpeak Puffer Jacket\",\n category: \"jacket\",\n price: 249,\n stock: 15,\n attributes: { fill: \"down\", fill_power: 700, packable: true },\n tags: [\"jacket\", \"puffer\", \"down\", \"insulation\", \"cold-weather\"],\n description: \"A 700-fill-power down jacket that packs into its own pocket, for camp warmth in cold weather.\",\n },\n {\n id: \"stove-emberlite-canister\",\n name: \"Emberlite Canister Stove\",\n category: \"cook\",\n price: 49,\n stock: 50,\n attributes: { fuel: \"canister\", weight_oz: 3, boil_time_min: 3.5 },\n tags: [\"stove\", \"canister\", \"ultralight\", \"backpacking\"],\n description: \"A 3-ounce canister stove that boils a liter of water in about 3.5 minutes.\",\n },\n {\n id: \"light-northbeam-headlamp\",\n name: \"Northbeam 400 Headlamp\",\n category: \"light\",\n price: 39,\n stock: 60,\n attributes: { lumens: 400, battery: \"rechargeable\", water_resistant: true },\n tags: [\"headlamp\", \"rechargeable\", \"night-hiking\"],\n description: \"A 400-lumen rechargeable headlamp with a red night-vision mode.\",\n },\n {\n id: \"filter-clearflow-squeeze\",\n name: \"Clearflow Squeeze Filter\",\n category: \"water\",\n price: 35,\n stock: 45,\n attributes: { filter_type: \"hollow-fiber\", flow_rate_l_min: 1.5, weight_oz: 2.3 },\n tags: [\"water-filter\", \"squeeze\", \"lightweight\", \"backpacking\"],\n description: \"A squeeze-style hollow-fiber water filter, light enough for fast-and-light trips.\",\n },\n];\n\nexport function getProduct(id: string): Product | undefined {\n return CATALOG.find((p) => p.id === id);\n}\n\n/**\n * Very small ranking function standing in for a real search/ranking backend.\n * The blog's guidance: \"the tool boundary is where [the retailer's] logic\n * ends and the model's judgment takes over\" — so this returns already-ranked\n * results; the model only decides which ones to present and how.\n */\nexport function searchProducts(opts: {\n query?: string;\n category?: string;\n max_price?: number;\n min_capacity?: number;\n}): Product[] {\n const q = (opts.query ?? \"\").toLowerCase().trim();\n const terms = q.length ? q.split(/\\s+/).filter(Boolean) : [];\n\n const scored = CATALOG.map((p) => {\n let score = 0;\n const haystack = [p.name, p.category, p.description, ...p.tags].join(\" \").toLowerCase();\n for (const t of terms) {\n if (haystack.includes(t)) score += 1;\n if (p.name.toLowerCase().includes(t)) score += 2;\n if (p.tags.some((tag) => tag.includes(t))) score += 1;\n }\n if (opts.category && p.category === opts.category) score += 3;\n return { p, score };\n });\n\n let results = scored\n .filter(({ p, score }) => (terms.length === 0 && !opts.category ? true : score > 0))\n .filter(({ p }) => (opts.category ? p.category === opts.category : true))\n .filter(({ p }) => (opts.max_price ? p.price <= opts.max_price : true))\n .filter(({ p }) =>\n opts.min_capacity\n ? Number(p.attributes.capacity_people ?? p.attributes.volume_l ?? 0) >= opts.min_capacity\n : true\n )\n .sort((a, b) => b.score - a.score || a.p.price - b.p.price)\n .map(({ p }) => p);\n\n // If a totally unfiltered/unqueried search comes in, return a small\n // top-sellers style default slice rather than the whole catalog.\n if (terms.length === 0 && !opts.category && !opts.max_price && !opts.min_capacity) {\n results = CATALOG.slice(0, 6);\n }\n\n return results.slice(0, 8);\n}\n",[],[233],["D",1788466463046],[],[18],"29214ee9-3235-44f9-9bf5-297c32008822","README.md","a35df770-a7d3-11f1-ac82-1607ee4eb77e",11,["D",1788466619763],"# Commerce Agent Demo — ACME Outdoors\n\nA small, runnable demo of the architecture in Anthropic's blog post\n[\"A guide to the anatomy of effective commerce agents\"](https://claude.com/blog/the-anatomy-of-effective-commerce-agents),\nbuilt on Val Town instead of the post's own Python/Node reference repo,\n[anthropics/commerce-agents](https://github.com/anthropics/commerce-agents).\n\nIt's a single Claude model in a standard agent loop, equipped with tools and\non-demand skills, shopping a small fictional outdoor-gear catalog. **Nothing\nhere is real** — no real products, no real payment, no real customer data.\n\n## Try it\n\n1. Add your key: open this val's environment variables page and add\n `ANTHROPIC_API_KEY`:\n `https://www.val.town/x/amotivv/commerce-agent-demo/environment-variables?key=ANTHROPIC_API_KEY`\n2. Open the val's HTTP endpoint (the `main.tsx` link) and chat with **Ridge**,\n the ACME Outdoors shopping assistant. Try:\n - \"I need a 2-person tent under $250\"\n - \"Outfit me for a 3-day backpacking trip for 2 people\"\n - \"Compare the Traverse Mid boot and the Fast Trail Runner\"\n - \"What's your return policy?\"\n - Tell it a preference (\"I'm usually a size 10\"), then click **New chat**\n and ask something size-related again — it remembers across chats,\n forgets nothing until you click **Forget me**.\n\nOptional env vars (both have working defaults):\n- `ANTHROPIC_MODEL` — defaults to `claude-sonnet-5` (the blog's own pick for\n latency-sensitive consumer agents; a merchant/analysis agent would default\n to Opus instead).\n- `ANTHROPIC_MEMORY_MODEL` — defaults to `claude-haiku-4-5-20251001`, a small\n fast model for the post-turn memory extraction pass.\n\n## What maps to what\n\n| Blog concept | This demo |\n|---|---|\n| One agent loop, not a router + subagents | `agent.ts` — a single `runTurn()` loop that calls the Messages API, executes any `tool_use` blocks, and loops until a final answer. No intent router, no domain subagents. |\n| Skills, not subagents | `skills.ts` has five skill bodies (`search-discovery`, `purchase-research`, `planning-goals`, `customer-care`, `memory-personalization`), loaded on demand via a `load_skill` tool — same five names the blog's own shopping agent uses. |\n| System prompt vs. skill, decided by frequency | `prompt.ts` holds only grounding, cart/checkout semantics, and presentation rules — the stuff nearly every turn touches. Everything else is a skill. |\n| Tools call systems you already run; results are shaped for the model | `tools.ts` / `catalog.ts` — `search_products` returns already-ranked, trimmed results; there's no reasoning logic duplicated inside a tool. |\n| The UI components are tools | `present_products` is a real tool call with typed args (`product_ids`, `layout`, `message`); the server validates and renders it as an event, never parsed from prose. Same for `view_cart` / `checkout`. |\n| Prompt caching layout (global → session → volatile) | `agent.ts` sends `system` as two blocks: the byte-identical prompt with an `ephemeral` cache breakpoint, then per-session memory facts appended after it (uncached, since they change). Tools carry their own trailing cache breakpoint. The chat UI's debug line shows `cache_read_input_tokens` / `cache_creation_input_tokens` per turn so you can watch the cache warm up on a repeat visit. |\n| Parallel tool calls | `agent.ts` executes all `tool_use` blocks in one model response with `Promise.all`, and returns their results as a single user message — matching the blog's \"fewer turns\" guidance. |\n| Writes and renders accept only server-issued IDs | `db.ts`'s `commerce_known_ids` table + `tools.ts`'s checks: `present_products`/`add_to_cart`/`update_cart_item` refuse any product ID the session hasn't actually seen from `search_products`/`get_product`. |\n| Caps enforced on resulting state | `add_to_cart` computes `min(current_qty + requested, stock)` — a repeated \"add 5 more\" can't stack past stock, the way the blog describes for ticket/promo caps. |\n| The model stages, a person/policy applies | `checkout` renders a summary only; there is no charge tool, no payment backend, matching the reference repo's own note that nothing in it \"places an order, charges a card, or changes a live listing.\" |\n| Third-party content is fenced | `prompt.ts#catalogFence` wraps every product description in `` tags with an instruction to treat it as data, never instructions — the blog's sanitizer pattern, simplified to fit a demo catalog with no real third-party text. |\n| Memory: store / write / read | `db.ts`'s `commerce_memory` table (typed key/value/category facts, not a markdown blob) + `agent.ts#extractMemory` (a separate, smaller-model pass that reads only the user's and assistant's text, never tool results) + a small always-in-context block injected into the system prompt each turn. |\n| Evals: snapshots, not conversations | Not implemented here — this is a single runnable demo, not a test suite. See \"What's different\" below. |\n\n## What's different from the reference repo (be aware of this)\n\nThis is a from-scratch reimplementation on Val Town's Deno/serverless\nruntime, not a port of the Python/Node repo. Some things the blog covers are\ndeliberately out of scope for a single demo val:\n\n- **No streaming / eager tool dispatch.** The Messages API call here is\n request/response, not streamed, so there's no token-level UI streaming or\n eager-dispatch-on-first-argument. The blog's biggest perceived-latency\n techniques (`eager_input_streaming`, progressive rendering) aren't\n represented.\n- **Memory extraction isn't truly asynchronous.** It runs after the reply is\n computed but inside the same HTTP request/response cycle, because a Val\n Town HTTP isolate doesn't outlive its response for a true background\n process. The blog's \"separate thread, zero latency added to the\n conversation\" claim doesn't fully hold here — this demo's memory pass adds\n a second small model call to each turn's total time.\n- **No eval suite, no CI, no multi-team ownership model.** Part 3's\n production-readiness material (SME-authored eval cases, CI gating,\n canary rollout) has no equivalent in a single demo val.\n- **One vertical, one skill body each.** The reference repo ships four\n verticals (retail, travel, telecom, entertainment) and both a shopping\n and a merchant agent. This demo is retail/shopping only, with fictional\n data invented for this val (ACME Outdoors), not copied from the repo.\n- **Memory has no deletion/retention UI beyond \"Forget me.\"** The blog's\n data-handling checklist (types of memory allowed, retention period,\n per-deployment on/off switch) isn't fully built out; \"Forget me\" covers\n the \"give users a way to delete\" requirement only.\n\n## Files\n\n- `catalog.ts` — fictional ACME Outdoors product data + a small ranking\n function standing in for a real search backend.\n- `db.ts` — sqlite-backed session state: conversation history, known/\n server-issued product IDs, cart, and long-term memory facts.\n- `skills.ts` — the five skill bodies, loaded on demand.\n- `prompt.ts` — the always-loaded system prompt + the ``\n fencing helper.\n- `tools.ts` — tool schemas (Anthropic tool-use format) and the executor\n that enforces every safety rule in one place.\n- `agent.ts` — the turn loop: calls the Messages API, executes tools,\n loops on `tool_use`, builds the cached system-prompt layout, and runs\n memory extraction after the reply.\n- `main.tsx` — the Hono HTTP app: serves the chat UI and the\n `/api/chat` / `/api/reset` / `/api/forget` / `/api/catalog` routes.\n- `index.html` / `frontend.ts` — the static chat UI (vanilla TS, no\n framework): message bubbles plus rendered cards for\n `present_products` / `view_cart` / `checkout` events, and a debug line\n showing per-turn token/cache usage.\n",[],[243],["D",1788466284516],["D",1789514495229],{"_11":12,"_124":70},{"_11":12,"_120":-5,"_69":70,"_30":68,"_121":122,"_123":24},{"_38":111,"_13":16,"_32":35,"_112":72,"_113":-5,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":14,"_119":12},"ctx",{"_53":-5,"_143":288,"_289":290,"_291":292,"_293":24,"_294":24,"_295":24,"_296":85,"_297":-5,"_298":-7,"_299":-7,"_300":26,"_301":24,"_302":24,"_303":-5,"_304":24,"_305":24,"_306":24,"_307":-5},"ENV",{"_259":260,"_261":262,"_263":16,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · agent.ts