Skip to content
Frontend

Building a Shopping Assistant

A shopping assistant is a conversational agent embedded in your storefront that helps customers find products, compare options, and build a cart — using your real catalog from the Shopify Storefront API.

This guide walks through building one from an empty project.

Before You Start

Section titled “Before You Start”

Your project needs a connected Shopify store. If you don’t have one yet, your workspace starts on mock.shop, Shopify’s public demo storefront, which serves real Storefront API data with no access token. Everything below works against it exactly as it would against a live store.

1. Add the Chat Interface

Section titled “1. Add the Chat Interface”

Start with the surface the customer talks to:

“Add a chat widget in the bottom-right corner of the storefront that opens a conversation panel”

The assistant is built on the Vercel AI SDK, which handles streaming responses, tool calling, and multi-step conversations.

2. Give It Your Catalog

Section titled “2. Give It Your Catalog”

An assistant is only useful if it can see what you sell. Give it a tool that searches your products:

“Give the assistant a tool that searches products in my Shopify store by keyword and returns title, price, image, and availability”

Because the tool reads from the Storefront API, the assistant always answers from live inventory rather than a stale copy of your catalog.

3. Show Products in the Conversation

Section titled “3. Show Products in the Conversation”

Text-only answers make customers work. Render results as product cards inline:

“When the assistant returns products, display them as product cards in the conversation with image, title, price, and an add-to-cart button”

4. Let It Build a Cart

Section titled “4. Let It Build a Cart”

The assistant should be able to act, not just advise:

“Give the assistant a tool to add a product variant to the cart, and show the updated cart total in the chat”

Cart operations go through the Storefront API, so the cart the assistant builds is the same cart the storefront shows.

5. Hand Off to Checkout

Section titled “5. Hand Off to Checkout”

Never build a payment step. When the customer is ready, send them to Shopify:

“Add a checkout button in the chat that sends the customer to the Shopify checkout URL for the current cart”

Shopify handles payment, taxes, shipping, and fraud — your assistant handles the conversation.

Going Further

Section titled “Going Further”

Once the basics work, extend the assistant:

  • Product comparison — “Let the assistant compare two products side by side on specs and price”
  • Guided discovery — “Have the assistant ask about skin type and budget before recommending products”
  • Order lookup — “Let customers check order status by entering their order number and email”
  • Conversation memory — connect Supabase to persist conversations across sessions
Section titled “Related”