AI Shopping Assistant ChatBot gist

README.md

AI Shopping Assistant ChatBot gist (named: Rosie)

Screen recording demo

https://anneuy.com/demos/shop-assistant-ai-demo.webm

Background

I am working on an online Shopify store called "Modern Kastle" selling diaper bags I designed. I've been really into the AI space lately so I thought it would be fun to experiment with the OpenAI API (company behind the famous Chat GPT-3). This is a snippet of a chatbox component from a custom Shopify App I made from scratch, which I started last Sunday, May 28. This AI chatbot's goal is to help direct potential buyers to a product depending on their preferences, as if they are engaging with a real store salesperson. It's also pretty fun to put on the shop I'd think :)

MVP functionality goals:

• engages in natural conversation with a potential buyer with the goal of a suitable product recommendation
• shares a clickable product link of a product (opens in a new tab)
• AI uses actual Shopify product data queried via GraphQL Admin API
• does not comply with requests that are outside the scope of a shop assistant
• available to be added onto the storefront theme via an App Block (in progress)

Key tech

• ReactJS/Typescript
• OpenAI API (chat completions) using Chat-GPT3.5-turbo model
• Shopify CLI
• ExpressJS
• Vite

Challenges

1. Training the AI on actual shop product data - I have successfully plugged in the dev store's dummy product and variants but there were a number of challenges around this, such as the limit of querying up to 250 products at a time, as well as how to actually train the AI whether it be fine-tuning, semantic search or just adding to the message context. A solution to the 250 product limit is to implement bulk operation mutation and queries, and I did figure out the cheapest and most effective way to train the AI.
2. Showing the ChatBot on the storefront - React is supported on the Embedded App page for Shopify Apps out-of-the-box, but App Blocks for theme extensions only support vanilla javascript. I haven't figured out how to render the React ChatBox onto the storefront yet because of this limitation. This is in progress.
3. Learning new tech - this is the first time I've used the Express framework. At first this tripped me off with how to define the app's local API. Now I understand how this ties in better with Shopify's built-in GraphQL and REST API client.
4. Vite - I have prior experience with Webpack and given its popularity I was surprised the Shopify node template used Vite. So far the issues I've had are overcome with reading docs and googling.

What I would have done differently or improved upon if I had more time

Maybe I would have directly tried to develop this as an app theme extension, instead of a Shopify App. That would have introduced me to the vanilla js issue earlier so I could spend more time on solving it.

With more time, I would also implement Firebase and think about the server piece to this, to avoid storing the API Keys in the frontend. Regardless, this project is ongoing and I am passionate to make it work!

ChatBox

import {
  useState,
  useMemo,
  useCallback,
  useLayoutEffect,
  useRef,
  useEffect,
} from "react";
import {
  Text,
  TextField,
  Button,
  ButtonGroup,
  Form,
  FormLayout,
  Spinner,
} from "@shopify/polaris";

// Types
import type { Log, Product } from "./types";

// Styles
import "./ChatBox.css";

// Hooks
import { useOpenAI, useAppQuery } from "../../hooks";

// Utils
import { getNodeFromEdges, formatProductsForIngestion } from "../../utils";

// Components
import { ChatHistory } from "../ChatHistory";
import { ChatBubble } from "./components/ChatBubble/components/ChatBubble";

export const ChatBox = () => {
  const [userMessage, setMessage] = useState<string>("");
  const { initChatAssistant, getChatResponse } = useOpenAI();
  const [chatHistory, updateHistory] = useState<Log[]>([]);
  const [isLoading, setLoading] = useState<boolean>(false);
  const [initialized, setInitialized] = useState<boolean>(false);
  const [isLoadingChatBox, setLoadingChatBox] = useState<boolean>(false);
  const [retryAICount, setRetryAICount] = useState<number>(0);

  const { data: productsData, isLoading: isProductsFetching } = useAppQuery({
    url: "/api/products/allv2",
    reactQueryOptions: {
      onSuccess: async () => {
        setLoadingChatBox(true);
      },
    },
  });

  const products: Product[] = useMemo(() => {
    if (productsData?.data?.products) {
      return getNodeFromEdges(productsData?.data?.products);
    } else {
      return [];
    }
  }, [productsData]);
  const promptFormattedProducts: string = useMemo(() => {
    return formatProductsForIngestion(products);
  }, [products.length]);

  useEffect(async () => {
    if (!initialized && promptFormattedProducts) {
      const response = await initChatAssistant(promptFormattedProducts);
      if (response) {
        addToHistory({
          content: response,
          role: "assistant",
        });
        setInitialized(true);
      }
      setLoadingChatBox(false);
    }
  }, [initialized, promptFormattedProducts]);

  const chatBoxRef = useRef(null);

  const onHandleSubmit = useCallback(async () => {
    if (!userMessage.length) {
      // ignore empty messages
      return;
    }

    addToHistory({
      content: userMessage,
      role: "user",
    });

    setMessage("");

    getAIResponse();
  }, [userMessage]);

  // Retry up to 5x when request limit exceeds
  useEffect(() => {
    if (retryAICount > 0 && retryAICount < 6) {
      // query for AI response again
      getAIResponse();
    }
  }, [retryAICount]);
  const getAIResponse = async () => {
    try {
      setLoading(true);
      const { message, finish_reason } = await getChatResponse({
        chatHistory,
        userMessage,
      });
      const aiChatResponse = message.content.trim();

      // If there is no message or the reply is incomplete, try again
      if (!aiChatResponse || finish_reason !== "stop") {
        setTimeout(() => setRetryAICount((prevCt) => prevCt + 1), 300);
        return;
      }

      addToHistory({
        content: aiChatResponse || "",
        role: "assistant",
      });
    } catch (error) {
      console.error(error);
      // Retry if error occurs
      setRetryAICount((prevCt) => prevCt + 1);
    } finally {
      setLoading(false);
    }
  };

  const addToHistory = useCallback(
    (log) => {
      if (log) {
        updateHistory((prevHistory) => [...prevHistory, log]);
      }
    },
    [updateHistory, chatHistory.length]
  );

  // Scroll to the most recent message when box overflows
  useLayoutEffect(() => {
    scrollToBottom();
  }, [chatHistory.length]);

  const scrollToBottom = () => {
    if (!isLoadingChatBox && chatBoxRef?.current) {
      setTimeout(() => {
        chatBoxRef.current.scrollIntoView({ behavior: "smooth", block: "end" });
      }, 10);
    }
  };

  return !isLoadingChatBox && !isProductsFetching ? (
    <>
      <Text as="h2" variant="headingMd">
        💁🏼‍♀️ Meet Rosie: Your Modern Kastle AI Shopping Assistant
      </Text>
      <div id="chat-box">
        <ChatHistory history={chatHistory} />
        {isLoading && <ChatBubble isLoading />}
        <div ref={chatBoxRef} />
      </div>
      <Form onSubmit={onHandleSubmit}>
        <FormLayout>
          <TextField
            label="Message:"
            value={userMessage}
            onChange={setMessage}
            autoComplete="off"
            disabled={isLoading}
            focused={!isLoading}
            spellCheck
          />
          <ButtonGroup>
            <Button primary disabled={isLoading} submit>
              Send
            </Button>
          </ButtonGroup>
        </FormLayout>
      </Form>
    </>
  ) : (
    <Spinner />
  );
};