Real-time Updates

Inventory Physics

How layouts automatically adapt when products go out of stock, ensuring shoppers always see available items.

The Problem

In traditional e-commerce, AI-generated recommendations often include out-of-stock items. By the time you click, the product may be unavailable. This creates friction and erodes trust.

Without Inventory Physics

✗Layout shows out-of-stock items
✗User clicks → "Not Available"
✗Manual refresh needed to update
✗No automatic replacement suggestions

With Inventory Physics

✓Real-time stock awareness
✓Automatic layout adaptation
✓Agent finds replacements
✓Updates via STATE_DELTA

How It Works

Inventory Context in State

SharedState includes inventoryContext: a map of product_id → current stock level

Stock Change Detected

When inventory updates (via webhook or polling), the agent detects products in the current layout that are now out of stock

handleStockUpdateNode Triggers

LangGraph routes to the stock handler, which generates a critique: "Replace out-of-stock products: prod_001, prod_007"

Automatic Refinement

The stock handler routes to refineLayoutNode with the generated critique, and GPT-4o finds suitable replacements

Frontend Updates

New layout arrives via STATE_SNAPSHOT, frontend re-renders with available products

Implementation

// src/lib/agents/merchandiser/nodes.ts

export async function handleStockUpdateNode(
  state: MerchandiserStateType
): Promise<Partial<MerchandiserStateType>> {
  if (!state.currentLayout) return {};

  // Find products in layout that are now out of stock
  const layoutProductIds = extractProductIds(state.currentLayout);
  const outOfStock = layoutProductIds.filter(id =>
    state.inventoryContext[id] === 0
  );

  if (outOfStock.length === 0) return {};

  // Check for available replacements
  const availableReplacements = state.availableProducts.filter(p =>
    p.stock > 0 && !layoutProductIds.includes(p.id)
  );

  if (availableReplacements.length === 0) {
    return {
      agentMessage: `Warning: ${outOfStock.length} products out of stock`
    };
  }

  // Trigger refinement to find replacements
  return {
    currentCritique: `Replace out-of-stock: ${outOfStock.join(', ')}`,
    agentStatus: 'updating',
    agentMessage: `Updating layout - ${outOfStock.length} products out of stock`
  };
}

Visual Indicators

The V2LayoutRenderer shows stock status on product cards:

In Stock

Normal display

3 left

Low stock warning

Out of stock

Disabled interaction

Spotify Loop

Try It

Experience V2 Demo