Build an AI shopping co-pilot

[Chat Thing](https://chatthing.ai/)

Open main menu

- Features
- Use Cases
- [Pricing](https://chatthing.ai/#pricing)
- Resources

[Log in](https://app.chatthing.ai/app/auth/login) [ Book a demo](https://chatthing.ai/demo) [Sign up](https://app.chatthing.ai/app/auth/register)

[← Back to blog](https://chatthing.ai/blog)Blog # Build an AI shopping co-pilot

![Zef](https://res.cloudinary.com/djyjvrw5u/image/upload/v1710941716/IMG_2278_d3b5e4fa69.jpg)

Zef

23 Jul 2024

---

![Build an AI shopping co-pilot](https://res.cloudinary.com/djyjvrw5u/image/upload/v1721069499/build_and_ai_shopping_co_pilot_7a58c01202.webp)

---

### On this page

1. [Let's get started](#lets-get-started)
2. [Turn on advanced SDK features](#turn-on-advanced-sdk-features)
3. [Embed your bot onto your site](#embed-your-bot-onto-your-site)
4. [Create AI co-pilots for your site with client-side power-ups](#create-ai-co-pilots-for-your-site-with-client-side-power-ups)
   1. [Letting out bot know about the available products](#letting-out-bot-know-about-the-available-products)
   2. [Registering your first custom client-side power-ups with the SDK](#registering-your-first-custom-client-side-power-ups-with-the-sdk)
   3. [Adding more functionality](#adding-more-functionality)
   4. [Wrapping up](#wrapping-up)

We recently [client-side power-ups and improvements to the SDK](https://chatthing.ai/blog/client-side-power-ups-and-sdk-improvements) that make it easy to create amazing integrations with your websites and web apps. In this tutorial, we will demonstrate how you can build an AI-powered shopping co-pilot that can perform actions on your user's behalf and generally be super helpful!

You can take a look at what we will be building here: [AI shopping copilot demo](https://ai-shopping-copilot-demo.pages.dev/) and you can find all the code here: [Github AI shopping copilot demo](https://github.com/pixelhop/ai-shopping-copilot-demo)

If you prefer watching to reading, checkout the video version of this post:

## Let's get started

First, we need to create our bot in Chat Thing. We created a new bot, gave it a name, some example questions to guide the user on what it can do, and the most important part, the system message prompt.

Take a look at our settings below:

![shopping-co-pilot-settings.webp](https://res.cloudinary.com/djyjvrw5u/image/upload/v1720717806/shopping_co_pilot_settings_3fcbfce39e.webp)

This is a simple demo, so our prompt doesn't need to be complicated:

> You are a helpful shopping assistant at a store that sells AI merchandise.
>
> You can navigate to the following URLs - "/" - The home page - "/products/:productId" - A product page, where "productId" is replaced with the actual id of a product - "/checkout" - The checkout page
>
> You can offer to navigate customers to the above page if you feel it useful, or if they would like more info about a product.
>
> Answer in a fun, informal, jokey, friendly tone.

We tell the bot it's a shopping assistant, we give it info about the URLs it can navigate to (more on that later), and we tell it the tone it should use. All pretty standard prompting!

For this demo, we are using GPT4-o as our model, but any model that supports power-ups will work.

## Turn on advanced SDK features

Before embedding your bot on your site, you should turn on the advanced SDK features by going to your bot "Channels" page, and then the "Web Channel Settings" and enabling the toggle.

![Xnapper July 11 Screenshot.jpg](https://res.cloudinary.com/djyjvrw5u/image/upload/v1720728221/Xnapper_July_11_Screenshot_57e9cc71d9.jpg)

This setting is optional, as enabling it makes your bot more susceptible to prompt hijacking by allowing you to override and extend the prompt from the frontend. This is a tradeoff that is necessary if you need the advanced client-side functionality.

## Embed your bot onto your site

Now that you have a bot and the advanced SDK functionality is turned on, it's time to grab its embed script and add it to your site.

Click the "Embed" button in your bot settings, and then grab the "Embed as chat widget" script and add it to the HTML of your site.

![Xnapper July 11.jpg](https://res.cloudinary.com/djyjvrw5u/image/upload/v1720728672/Xnapper_July_11_66982b6d60.jpg)

Ours looks like this:

![Xnapper July 11 Screenshot (1).jpg](https://res.cloudinary.com/djyjvrw5u/image/upload/v1720728804/Xnapper_July_11_Screenshot_1_577e800510.jpg)

You should now see your chat widget on the page and be able to open it.

![Xnapper July 15 (6).webp](https://res.cloudinary.com/djyjvrw5u/image/upload/v1721059071/Xnapper_July_15_6_e657c7214f.webp)

## Create AI co-pilots for your site with client-side power-ups

With the bot now on your site, the real fun of integration can begin. Our new Chat Thing SDK has lots of functionality that you can read about here: [Chat Thing AI SDK](https://chatthing.ai/docs/sdk), but for this tutorial, we will mainly be focusing on using client-side power-ups so our bot can take actions on behalf of the user right on the front-end of your website or app.

Before we can do that, we need to get hold of the Chat Thing SDK that is added to the global window object after our Chat Thing script loads. Due to the Chat Thing script being deferred, it might not be ready as soon as the page loads, so we need a bit of code that will wait for it to be ready and return the SDK when it is. (We will be improving how this works later, as well as releasing an NPM package that won't have this issue).

We create a simple composable that returns the SDK like below:

```
export const useChatThing = () => {
    function getChatThing(resolve: (sdk: Window['chatThing']) => void) {
        if (window.chatThing) {
            return resolve(window.chatThing);
        }

        setTimeout(() => getChatThing(resolve), 200);
    }

    return new Promise<Window['chatThing']>((resolve) => {
        getChatThing(resolve);
    });
};

```

We can now get hold of the Chat Thing SDK ready to use like this:

```
const chatThing = await useChatThing();

```

Now that we have a reference to the Chat Thing SDK, we can use it to tightly integrate the bot with our app.

### Letting out bot know about the available products

Before we can get the bot to do cool things like add a product to a cart for us, we need to let it know about the available products. For the purpose of keeping this tutorial short and simple, we have chosen to do this using the new "Extend system message" functionality of the SDK.

```
chatThing.systemMessage('extend', \`
    <products>
    ${JSON.stringify(products)}
    </products>
  \`);

```

This allows you to add additional information to your system message on the fly. Here we stringify our list of products and add them to the system message.

In case you are wondering, our fake products array looks a bit like this:

```
export const products: Product[] = [
  {
    id: "AI-001",
    name: "AI-Generated Fortune Cookies",
    price: 9.99,
    image: window.location.origin + "/images/ai-fortune-cookies.webp",
    description: \`<p>Indulge in our <strong>AI-Generated Fortune Cookies</strong>, where every cookie contains a unique, humorous fortune created by artificial intelligence. Perfect for parties, gifts, or just a good laugh!</p>\`,
  },
  ...

```

Of course, in a real e-commerce app, you will not have a single array containing all your products lying around, or at least I hope you don't, and even if you did, it's not a great idea to use your system message as a way of communicating these to the bot as you will waste thousands and thousands of tokens with each message.

The best implementation would be to create a client-side power-up that allows your bot to dynamically search through your products inventory. That's a tutorial in itself, so for the time being, let's put up with our basic implementation.

### Registering your first custom client-side power-ups with the SDK

In our example Vue.js e-commerce store, we do this in the `onMounted` hook of `App.vue` so that power-ups are loaded as soon as the Vue.js app is mounted.

Let's see how we can create a power-up to add a product to the basket.

```
  chatThing.registerPowerUp({
    name: 'Add to basket',
    description: 'Add a product to the basket',
    parameters: {
      productId: {
        type: 'string',
        description: 'The unique product ID',
        required: true
      },
      qty: {
        type: 'number',
        description: 'How many to add',
        required: true
      }
    },
    handler: (args) => {
      return addToCart(args.productId, args.qty);
    }
  });

```

There's a bit to break down here, so let's go through it step by step. We pass the `registerPowerUp` function a configuration object that contains a few things.

First up, we have `name` and `description`. Name is hopefully very obviously the name of the power-up. The name will help the bot decide when to use this power-up and will also be shown in the chat UI while the power-up is running.

Description is very important and is the primary information the bot will use to determine when to use your power-up. In this case, adding an item to a cart is a relatively simple action, so a description of "Add a product to the basket" is enough.

Next, we have the `parameters` object. This object lets you define the arguments your bot will need to collect before it can perform your action. So in this example, to add a product to the basket, we need a product ID and the quantity of items to be added.

Each parameter object has the following:

- `type` - The type of parameter: "string", "number", "boolean", or "object"
- `description` - Similar to the power-up description, the parameter description lets the bot know what this parameter is and how it should fill it.
- `required` - A boolean value, true if the parameter is always required by the action, false if not
-

Finally, we have the `handler` callback. This is where you add the implementation for this power-up. When the bot decides to use this action, the handler will be called and passed an arguments object containing the parameters you defined.

In this case we will receive an object containing the product ID and quantity looking like this:

```
{
  productId: 'some-product-id',
  qty: 2
}

```

You can do anything you like in the handler. You could call an API, use an existing function in your app, trigger an update to a global store, or whatever else you would like to do. The only rule is that your handler must return something back to the bot. This could be a success or error message, or some useful information the bot can use for future answers.

In our example, we use our existing add to cart function that updates our fake cart, and just for reference, it looks something like this:

```
export function addToCart(productId: string, qty: number) {
  const product = products.find((product) => product.id === productId);
  const existingProductInCart = cart.value.find(
    (product) => product.id === productId
  );

  if (existingProductInCart) {
    existingProductInCart.qty += qty;
  } else if (product) {
    cart.value.push({
      ...product,
      qty,
    });
  }

  return {
    cart: cart.value,
    totalPrice: totalPrice.value,
  };
}

```

Remember, this is a fake e-commerce implementation, but it's useful to see what the function returns. It returns an object that contains the current cart and all the items in it, and a total price property. This is returned back to the bot so it can update you on the new price of the cart as well as the items in it.

And with all that done, we should now be able to add a product to the cart using the bot!

![Xnapper July 15.jpg](https://res.cloudinary.com/djyjvrw5u/image/upload/v1721067556/Xnapper_July_15_2052889232.jpg)

### Adding more functionality

Now that you've added your first client-side power-up, hopefully it should be quite straightforward for you to add others. I won't go through how we implemented each of the others in our demo (although remember you can find all the code [here](https://github.com/pixelhop/ai-shopping-copilot-demo/tree/main)), but we added additional power-ups to remove items, get the cart, check order status, and finally to navigate the user to other pages.

### Wrapping up

The possibilities with client-side power-ups are absolutely huge, and we can't wait to see what you do with them! We will be posting more detailed tutorials like this for exciting use cases, so if there's anything in particular you would like to see, please let us know!

### Related articles

[![Chat Thing's MCP server is live: describe your agent, let AI build it](https://res.cloudinary.com/djyjvrw5u/image/upload/v1784134253/cover_bd9b756581.png)](https://chatthing.ai/blog/chat-thing-mcp-server) [<h4>Chat Thing's MCP server is live: describe your agent, let AI build it</h4>](https://chatthing.ai/blog/chat-thing-mcp-server)

Connect the Claude app, ChatGPT, Claude Code, Cursor or any MCP client to Chat Thing. Describe what you want your agent to do and your AI builds it, tests it, fixes what's wrong, and keeps an eye on it once it's live. 47 tools, no terminal required.

[![How ready is your website for AI agents? Now there's a free way to check](https://res.cloudinary.com/djyjvrw5u/image/upload/v1783957835/hero_91cf981c76.png)](https://chatthing.ai/blog/agent-readiness-checker) [<h4>How ready is your website for AI agents? Now there's a free way to check</h4>](https://chatthing.ai/blog/agent-readiness-checker)

We built the Agent Readiness Checker: a free, no-hype audit of how well AI agents and LLMs can discover, understand and act on your site. And you can chat to an agent about the results.

[![Connect Your AI Agent to 8,000+ Apps with Zapier](https://res.cloudinary.com/djyjvrw5u/image/upload/v1782482565/zapier_hero_debe7969e3.jpg)](https://chatthing.ai/blog/zapier) [<h4>Connect Your AI Agent to 8,000+ Apps with Zapier</h4>](https://chatthing.ai/blog/zapier)

Connect your Chat Thing agent to 8,000+ apps with Zapier. Book meetings, update CRMs, post to Slack, all in one conversation.

<dl>

<dt>Previous</dt>
<dd>[← GPT-4o mini live on Chat Thing](https://chatthing.ai/blog/gpt-4o-mini-live-on-chat-thing)</dd>

<dt>Next</dt>
<dd>[Build bots with Gemini 1.5 Pro + more updates! →](https://chatthing.ai/blog/build-bots-with-gemini-1-5-pro-more-updates)</dd>

</dl>

## Footer

### Ready to answer every question, day or night?

Add an AI support agent to your site in minutes.

[Get started free](https://app.chatthing.ai/app/auth/register) [Book a demo](https://chatthing.ai/demo)

AI customer support that learns from your content and answers 24/7.

### Features

- [Channels: Deploy your bot](https://chatthing.ai/pages/features/channels)
- [Data sources: Add knowledge](https://chatthing.ai/pages/features/data-sources)
- [Power-ups: Tool calling](https://chatthing.ai/pages/features/power-ups)
- [AI Models: GPT-4, Claude, & more](https://chatthing.ai/pages/features/models)
- [SDK: Create custom assistants](https://chatthing.ai/pages/features/chatbot-sdk)
- [Bot evaluations: Test your bot](https://chatthing.ai/pages/features/testing)
- [Analytics: Topics, sentiment & insights](https://chatthing.ai/pages/features/analytics)
- [Bot Gallery: Example bots](https://chatthing.ai/gallery)
- [All features](https://chatthing.ai/features)

### Use cases

- [AI Customer Support Bots](https://chatthing.ai/pages/use-cases/customer-support)
- [AI Internal Knowledge Bots](https://chatthing.ai/pages/use-cases/internal-knowledge)
- [AI Bots for Marketing](https://chatthing.ai/pages/use-cases/marketing)
- [SDK: Create custom assistants](https://chatthing.ai/pages/features/chatbot-sdk)
- [All features](https://chatthing.ai/features)

### Channels

- [AI support for your website](https://chatthing.ai/pages/features/channels/website)
- [AI support for Slack](https://chatthing.ai/pages/features/channels/slack)
- [AI support for Discord](https://chatthing.ai/pages/features/channels/discord)
- [AI support for WhatsApp](https://chatthing.ai/pages/features/channels/whatsapp)
- [AI support for Telegram](https://chatthing.ai/pages/features/channels/telegram)
- [AI support API](https://chatthing.ai/pages/features/channels/api)

### Data sources

- [Chat with your website](https://chatthing.ai/pages/data-source/web)
- [Chat with your files](https://chatthing.ai/pages/data-source/files)
- [Notion chatbots](https://chatthing.ai/pages/data-source/notion)
- [Chat with your youtube](https://chatthing.ai/pages/data-source/youtube)
- [Chat with your RSS feed](https://chatthing.ai/pages/data-source/rss)

### Company

- [Discord](https://discord.com/invite/DGCCR34Fsj)
- [Docs](https://chatthing.ai/docs/getting-started)
- [Blog](https://chatthing.ai/blog)
- [FAQ](https://chatthing.ai/faq)
- [Status](https://status.chatthing.ai/)
- [Testimonials](https://senja.io/p/chat-thing/iq1tWz)
- [Custom AI development](https://chatthing.ai/pages/ai-development-services)

### Free tools

- [Agent Readiness Checker](https://chatthing.ai/tools/agent-readiness-checker)
- [JSON-LD Generator + Checker](https://chatthing.ai/tools/json-ld-generator)
- [llms.txt Generator & Validator](https://chatthing.ai/tools/llms-txt-generator)
- [Support Ticket Deflection Calculator](https://chatthing.ai/tools/ticket-deflection-calculator)
- [Knowledge Base Grader](https://chatthing.ai/tools/knowledge-base-grader)
- [AI FAQ Generator](https://chatthing.ai/tools/faq-generator)
- [AI Canned Response Generator](https://chatthing.ai/tools/canned-response-generator)
- [Support Bot Prompt Generator](https://chatthing.ai/tools/support-bot-prompt-generator)
- [All free tools](https://chatthing.ai/tools)

### Compare

- [Intercom alternative](https://chatthing.ai/pages/alternatives/intercom)
- [Zendesk alternative](https://chatthing.ai/pages/alternatives/zendesk)
- [Tidio alternative](https://chatthing.ai/pages/alternatives/tidio)
- [Crisp alternative](https://chatthing.ai/pages/alternatives/crisp)
- [Chatbase alternative](https://chatthing.ai/pages/alternatives/chatbase)
- [DocsBot alternative](https://chatthing.ai/pages/alternatives/docsbot)
- [ResolveAI alternative](https://chatthing.ai/pages/alternatives/resolveai)
- [ChatBotKit alternative](https://chatthing.ai/pages/alternatives/chatbotkit)
- [CustomGPT alternative](https://chatthing.ai/pages/alternatives/customgpt)
- [Botsonic alternative](https://chatthing.ai/pages/alternatives/botsonic)
- [Ada alternative](https://chatthing.ai/pages/alternatives/ada)

### Join our newsletter

Be the first to know about new features and updates.

Join

[Privacy](https://chatthing.ai/legal/privacy) [Terms](https://chatthing.ai/legal/terms) [DPA](https://chatthing.ai/legal/dpa) [GDPR](https://chatthing.ai/legal/gdpr) [Sub-Processors](https://chatthing.ai/legal/sub-processors)

[Twitter](https://twitter.com/pixelhopio) [Discord](https://discord.com/invite/DGCCR34Fsj) [YouTube](https://www.youtube.com/@ChatThingAI)

© 2026 Chat Thing. All rights reserved. Company number: 14789358. Built with  by [Pixelhop](https://pixelhop.io?utm_source=chat+thing&utm_medium=website)

## Cookies

We use cookies to run the site and understand how it's used. You can change your choice anytime.

Accept

Decline

Customise