GenAI Actions for a Clothing e-Commerce

You’re building an e-commerce platform to sell clothing online. You have a database filled with items, each with specific properties.

The user journey, from when they first open the page to having an item ready in their cart, might look like this

Let’s now use Userize to simplify the process and make it smarter:

This Works for You if…

This is a simplified example.

Whether it works for your use case depends on the type of items you sell and how you’ve designed the item selection process. Use cases that fit this model best are those where objective constraints (e.g., price, time, availability) are more relevant than the user’s personal taste.

Examples of e-commerce platforms that may work well with this approach:

• Booking train, bus, or plane tickets
• Selling repair components
• Offering tickets for theaters or events
• Providing office furniture

Jump into Code

Want to start coding right away? Check out the example ts-clothing-ecommerce to see how it’s done!

Step 1: Create the project

The first step is setting up your project. This takes just one minute:

1. Create the project and configure it as needed from the Userize platform.
2. Get your API key from the project’s settings.

For more details, refer to Step 1 of the Quick Start guide.

Step 2: Configure the Actions

We chose to simplify the user flow into just two actions: search for an item, and select an item to buy. These two actions can either run independently, or sequentially.

Here are our possible flows:

Our API will select the best flow, with the appropriate parameters, for you. All you need to do is configure your actions.

From your project’s dashboard, navigate to the Actions configuration page and follow the steps.

Write an Actions Overview

In the Actions configuration page, you have the possibility to describe what your actions will be used for. The API will work fine even without it, but you can get more accurate results by describing your final goal.

Copy and paste the following description:

User is navigating through an e-commerce, which displays several items. User can search for a subset of items, and select one to add to the cart. If requested by the user, the e-commerce site can automatically add the best match from the search results directly to the cart.

Customize an Action

You may deeply customize an action to ensure the behavior matches your expectations. Let’s see how to do it by examples.

Example: search action

Click on the New action button to create a new action.

Update the action configuration as follows:

1. Click on action name, and update it to search.
2. Click on the action description, and introduce what the action does:

   Enables users to search for an item using specified search parameters.

3. Add a parameter and call it color.
   • Describe what the parameter does:

     Specifies the name of the color to filter items, ensuring the search is limited to matching colors only.

   • Leave other fields as they are.
4. Save the action.

Example: select action

Let’s repeat the steps for the select action:

1. Create a new action, rename it to select, and add description:

   Given a set of items, adds one to the cart based on the selection criteria.

2. Add a parameter and rename it to choose_item.
   • Describe the parameter:

     Item selection criteria. If not provided, use “newest”.

   • Set the parameter as optional.
   • Force the parameter to a set of specific values: newest, cheapest, trendy
3. Save the action.

Step 3: Add Userize to your App

Install userize-js

First, install userize-js using your preferred package manager:

npm install userize-js

yarn add userize-js

pnpm add userize-js

Add your API key

If you have stored your API key in the environment variable USERIZE_API_KEY, you can safely skip this step.

Otherwise, you can explicitly set the API key in your code:

import { initClient } from 'userize-js';
 
...
 
initClient('YOUR-API-KEY')

Register the Actions

It’s coding time! Let us write our actions.

function search(cascade, color) {
  // Assume a list of "items"
 
  const filteredItems = items.filter((item) => item.color === color);
 
  // Optionally, we can run different flows
  // if one of these items will be add to cart or not
  if (cascade.event.next !== null) {
    // Next action will just consume filtered items
    return filteredItems;
  } else {
    // Here we may show filtered items to user
    console.log('Filtered Items: ', filteredItems);
  }
}
 
function select(cascade, chooseItem) {
  // We can retrieve items from the "search" action
  const filteredItems = cascade.data ?? items;
 
  let selectedItem;
 
  switch (chooseItem) {
    case 'newest':
      selectedItem = filteredItems.sort((a, b) => b.addedAt.getTime() - a.addedAt.getTime())[0];
      break;
 
    case 'cheapest':
      selectedItem = filteredItems.sort((a, b) => a.price - b.price)[0];
      break;
 
    case 'trendy':
      selectedItem = filteredItems.sort((a, b) => b.lastBoughtAt.getTime() - a.lastBoughtAt.getTime())[0];
      break;
  }
 
  // We may now addToCart(selectedItem)
  console.log('Selected Item: ', selectedItem);
}

import type { UserizeActionCascade } from 'userize-js';
 
function search(cascade: UserizeActionCascade, color: string) {
  // Assume a list of "items"
 
  const filteredItems = items.filter((item) => item.color === color);
 
  // Optionally, we can run different flows
  // if one of these items will be add to chart or not
  if (cascade.event.next !== null) {
    // Next action will just consume filtered items
    return filteredItems;
  } else {
    // Here we may show filtered items to user
    console.log('Filtered Items: ', filteredItems);
  }
}
 
function select(cascade: UserizeActionCascade, chooseItem: string | undefined) {
  // We can retrieve items from the "search" action
  const filteredItems = (cascade.data as typeof items | undefined) ?? items;
 
  let selectedItem;
 
  switch (chooseItem) {
    case 'newest':
      selectedItem = filteredItems.sort((a, b) => b.addedAt.getTime() - a.addedAt.getTime())[0];
      break;
 
    case 'cheapest':
      selectedItem = filteredItems.sort((a, b) => a.price - b.price)[0];
      break;
 
    case 'trendy':
      selectedItem = filteredItems.sort((a, b) => b.lastBoughtAt.getTime() - a.lastBoughtAt.getTime())[0];
      break;
  }
 
  // We may now addToCart(selectedItem)
  console.log('Selected Item: ', selectedItem);
}

Finally, we can register our actions, making them ready to be triggered by the API.

import { initClient, registerAction } from 'userize-js';
import { search, select } from './actions';
 
...
 
initClient('YOUR-API-KEY')
 
registerAction('search', search);
registerAction('select', select);

Step 4: Test it

Let’s prepare some sample data for testing.

[
  {
    "name": "jeans",
    "color": "blue",
    "price": 20,
    "addedAt": "2024-08-12T00:00:00.000Z",
    "lastBoughtAt": "2024-10-02T00:00:00.000Z"
  },
  {
    "name": "tshirt",
    "color": "red",
    "price": 5,
    "addedAt": "2024-09-02T00:00:00.000Z",
    "lastBoughtAt": "2024-10-05T00:00:00.000Z"
  },
  {
    "name": "dress",
    "color": "black",
    "price": 15,
    "addedAt": "2024-08-15T00:00:00.000Z",
    "lastBoughtAt": "2024-10-01T00:00:00.000Z"
  },
  {
    "name": "pants",
    "color": "blue",
    "price": 10,
    "addedAt": "2024-07-29T00:00:00.000Z",
    "lastBoughtAt": "2024-09-24T00:00:00.000Z"
  },
  {
    "name": "socks",
    "color": "black",
    "price": 2,
    "addedAt": "2024-08-23T00:00:00.000Z",
    "lastBoughtAt": "2024-10-08T00:00:00.000Z"
  }
]

import data from "./data.json";
 
// Data might be retrieved from a database
const items = data.map((item) => ({
  ...item,
  addedAt: new Date(item.addedAt),
  lastBoughtAt: new Date(item.lastBoughtAt),
}));
 
function search(cascade, color) {
  ...
}
 
function select(cascade, chooseItem) {
  ...
}

Trigger Actions Cascade

To initiate the Actions Cascade, simply pass a user’s request to triggerActions:

import { initClient, registerAction, triggerActions } from 'userize-js';
import { search, select } from './actions';
 
...
 
initClient('YOUR-API-KEY')
 
registerAction('search', search);
registerAction('select', select);
 
...
 
// TRY IT with:
// 1- "I love black, show me something cool"
// 2- "I want to buy the very latest dress for the party"
// 3- "I don't care what to buy, I just need it to be blue and cheap"
triggerActions("Your input text goes here");
 
/**
 * Example 1: "I love black, show me something cool"
 *
 * Actions run: `search`
 *
 * It should display:
 *
 *   Filtered Items:  [
 *     {
 *       name: 'dress',
 *       color: 'black',
 *       price: 15,
 *       addedAt: 2024-08-15T00:00:00.000Z,
 *       lastBoughtAt: 2024-10-01T00:00:00.000Z
 *     },
 *     {
 *       name: 'socks',
 *       color: 'black',
 *       price: 2,
 *       addedAt: 2024-10-08T00:00:00.000Z,
 *       lastBoughtAt: 2024-10-08T00:00:00.000Z
 *     }
 *   ]
 */
 
/**
 * Example 2: "I want to buy the very latest dress for the party"
 *
 * Actions run: `select`
 *
 * It should display:
 *
 *   Selected Item:  {
 *     name: 'tshirt',
 *     color: 'red',
 *     price: 5,
 *     addedAt: 2024-09-02T00:00:00.000Z,
 *     lastBoughtAt: 2024-10-05T00:00:00.000Z
 *   }
 */
 
/**
 * Example 3: "I don't care what to buy, I just need it to be blue and cheap
 *
 * Actions run: `search` -> `select`
 *
 * It should display, from console:
 *
 *   Selected Item:  {
 *     name: 'pants',
 *     color: 'blue',
 *     price: 10,
 *     addedAt: 2024-07-29T00:00:00.000Z,
 *     lastBoughtAt: 2024-09-24T00:00:00.000Z
 *   }
 */

Bonus: Check the Dashboard

Congrats on running your first AI-powered action cascade with Userize!

Now that you’ve explored your project’s actions, it’s time to check out the Project Dashboard. Open it from the left drawer to see how your actions are being used.

The dashboard provides valuable insights into how your users interact with the actions, helping you identify ways to optimize and improve them!