STEFANO ROMELEV8.8.8
MODULE_ID: CONVERSATIONAL_COMMERCE
COMMERCE DEMO

CONVERSATIONAL COMMERCE

AI-powered shopping assistant that infers context from natural language and searches the catalog with structured attributes.

STACK

OpenAI Responses + Storyblok + D1

BUILD TIME

Multi-session

STATUS

LIVE

ROLE

Solo build

OUTCOME

Natural-language shopping with live prices and pay-at-delivery checkout.

System Overview

STATUS: ACTIVE

Problem Statement

Customers browsing a premium fashion and outdoor store need to find the right products for trips, events, and conditions without filling long forms or knowing exact filters. Manual search by category and attributes is tedious and does not match how people describe their needs (e.g. "Lofoten in December", "wedding guest").

Technical Solution

A chat-based assistant runs on Trigger.dev for the agentic loop (OpenAI Responses API with tools). The frontend sends messages via Cloudflare Pages; the task infers structured attributes from natural language, calls search_products (Storyblok + optional Commerce Layer prices), persists user context in D1, and returns recommendations and product cards. Cart and checkout are backed by Commerce Layer.

AI Implementation Strategy

The LLM uses world knowledge to infer climate, environment, and activity from phrases like "northern lights" or "summer wedding" and maps them to structured filters (season, temperature_range, environment, activity). A tool-calling loop supports search_products and save_user_context; the assistant recommends from the candidate list and can invite the user to use Virtual Try-On (Gemini image generation) for recommended products.

Core Capabilities

SYS.CAPABILITIES
  • Inference over interrogation: Infers climate and context from phrases like "Lofoten in December" without asking for temperature ranges.
  • Structured search: LLM calls search with attribute filters; backend fetches from Storyblok and enriches with Commerce Layer prices.
  • User context: Saves preferences (size, style, budget) into the conversation for subsequent turns.
  • Cart: Add-to-cart syncs to a Commerce Layer order; change quantity and remove items in the cart panel; pay-at-delivery with address and shipping method.
  • Shipping info: Collect and store shipping address in Commerce Layer; view and edit address from the cart panel (expandable accordion).
  • Shipping method: Choose delivery option (e.g. Standard free, Express) from Commerce Layer; change or update the selected method before placing the order.
  • Payment: Pay-at-delivery flow with wire transfer; order is placed and authorized in Commerce Layer so it appears as placed in the dashboard.
  • Real-time order status: Order number and confirmation shown in chat; cart and order state stay in sync with Commerce Layer for live status.
  • Virtual Try-On: Upload a photo to see how a recommended product looks on you; Trigger.dev task uses Gemini to generate a composite image and returns a shareable URL.

Screenshot / Demo

SYS.VISUAL
Conversational Commerce — personal shopping assistant with chat, product cards, and cart
View larger

Conversational Commerce — personal shopping assistant with chat, product cards, and cart