Skip to content
This repository has been archived by the owner on Sep 18, 2024. It is now read-only.

mongodb-developer/search-ecommerce

Repository files navigation

Notice: Repository Deprecation

This repository is deprecated and no longer actively maintained. It contains outdated code examples or practices that do not align with current MongoDB best practices. While the repository remains accessible for reference purposes, we strongly discourage its use in production environments. Users should be aware that this repository will not receive any further updates, bug fixes, or security patches. This code may expose you to security vulnerabilities, compatibility issues with current MongoDB versions, and potential performance problems. Any implementation based on this repository is at the user's own risk. For up-to-date resources, please refer to the MongoDB Developer Center.

AI/ML ECommerce Demo

Overview

Initially built for .local NYC ‘23, this ecommerce demo serves to inspire our developer audience to imagine just a few of the endless possibilities of how to inject Batch AI, Real time AI, and Generative AI into an ecommerce application.

  • Custom Product Recommendations

  • Instant Lost Item Cart Updates

  • Interactive Chat and Vector Search for Private Enterprise Data

The MongoStore illustrates how working with MongoDB and AI can create a meaningful, custom user experience and accelerate development and time to value for the business.

Video Walk-through of demo:

https://drive.google.com/file/d/1dwtrRbHRW4_WLiXvs-PY1uIh_NHlakM-/view?usp=drive_link

This document is composed of the following parts.

Resources & Links

Link to live application (same link - bit.ly easier to remember):

https://bit.ly/MDB_AIML

https://mongostore-elxkl.mongodbstitch.com/

Video Walk-through of demo:

https://drive.google.com/file/d/1dwtrRbHRW4_WLiXvs-PY1uIh_NHlakM-/view?usp=drive_link

Karen Script:

Karen’s Script v4

Features

In this example, MongoStore, an online retailer, can capture a customer’s activity, such as clicks, views, purchases, etc. The application can then apply training models, both batch and in real-time, to make product recommendations custom for this user. If items in the customer’s cart go out of stock, MongoStore can immediately recommend similar products, thus reducing friction for the user.

Finally, MongoStore integrates ChatGPTto allow the customer to interact in a very natural way with MongoStore, asking for advice. MongoStore responds by generating new content (hence “generative” AI) in the form of advice. It also searches MongoStore’s private data, whether in the product collection, previous reviews from other customers, Q&A, etc, to offer even more specific product suggestions.

Feature 1: Batch Predictive AI - Product Recommendations

Login and compare 2 different user’s product recommendations:

Note to Presenter:__In the code, when logging in, the user email must match exactly but the passwords can be anything.

User Profile 1: - (This user would be a good one to change as a speaker, ex. “Logging into my account - and modify the code as per instructions below)

karen@gmail.com (MUST)

Password: <type anything - just hit enter >

User Profile 2: Our buddy Scott on his first camping trip

scott@streammeup.com

Password: <type anything - just hit enter >

Feature 2: Traditional Analytics - Customer Behavior Activity

Click on the user profile and simple 1 sentence : Because we have been capturing data about the user’s interactions with the application…. And close.

Can use for either User 1 or User 2

Feature 3: Real-time AI - Lost Item in Cart Update

Step 1: Once logged into Scott’s account, show the items he has in his shopping cart:- Tent - Hiking shoes - headlamp |

drawing

Step 2: 3 seconds afterwards (no user interaction necessary), the headlamp will go out of stock and Scott will be prompted with similar items as replacements.Generated by live click data about these products from all users being streamed into a real time engine…

drawing

Feature 4: Generative AI - ChatGPT Prompted with Store Data 

drawing

Note to Presenter:__For these questions, you can type anything in the message box, but the answers are hard-coded to always be the same.

Scott’s Question 1:

What should I wear when hiking, and it is really hot outside?

drawing

Scott’s Question 2:

And it’s raining, too

drawing

drawing

How to Recreate the AI/ML E-Commerce Demo

All the code for the front end, backend, and data can be found here:

REPO: https://github.com/mongodb-developer/search-ecommerce

The application can be built and run entirely serverless using MongoDB’s App Services. Below is the simple architecture:

drawing

App Services Functions and Atlas Cluster Data

Both the Atlas data and the function code for MongoStore can be found in the data-functions branch of the repo:

https://github.com/mongodb-developer/search-ecommerce/tree/data-functions

Step 1. Prepare Data in MongoDB Atlas

Stand up an Atlas cluster. Create a database named “mongostore” with 2 collections “products” and “customers” with the .json files in the git repository.

drawing

Database: mongostore

Collections:

products

customers

Step 2. Create Search Index named “default” on products collection 

The default dynamically mapped index will work but this one is more specific. Make sure to name the index “default”.

{      
    "mappings":
    {    
        "dynamic": false,   
        "fields": {     
             "category":
                {  "type": "string" },     
             "main_description":
                {   "type": "string" },      
            "name":
                {  "type": "string"  }    
        }       
    }
}

Atlas App Services Application - MongoStore

Still working on the backend, let’s turn towards the backend functionality.

Step 1. Create an App Services application. 

I named mine “MongoStore,” but it does not matter.

Step 2. Create HTTPS endpoints

Create 2 HTTPS Endpoints configured as follows.

  1. /products
  • POST request
  • Respond with JSON result
  • Calls getProductsByPage function
  1. /users
  • GET request
  • Respond with JSON result
  • Calls getUser function

Step 3. Create Functions

Create 2 functions for the corresponding endpoint functionality with the code found in the MongoStore_AppServiceApplication folder:

  1. getProductsByPage
  2. getUser

MongoStore - The Front End

Step 1. Get the Git

Finally download the code found in the git repository https://github.com/mongodb-developer/search-ecommerce

$ git clone https://github.com/mongodb-developer/search-ecommerce

$ cd search-ecommerce

$ npm install

$ npm start

The front end and the backend are connected via the endpoints found in the Home.js page.

Step 2. Insert your own HTTPs endpoints 

Now we will need to connect our newly downloaded front end code to our newly created HTTPs endpoints.

In the front end application code, go to the src/pages/Home.js directory and replace the endpoints found around lines 52 and 55 as seen below with your own.

Step 4. Save and run

yarn start

Et voila! Log in as karen@gmail.com or scott@streammeup.com. Also, chat away with MongoStore. The experience will always be the same though. To customize the application to provide a different user experience, keep reading!

How to Customize the AI/ML E-Commerce Demo

Don’t feel like being a “Karen”? Don’t worry. You can easily modify the data and the code to customize the demo for the speaker.

Key Components for Change

In the code found in the git repo, here are the components that make this demo experience easily modifiable:

  1. User LogIn:
  2. Chatbot.js

Change the User and User Product Recommendations

To change the customer information and the customer product recommendations, do so in the data. Turn to Atlas in the customers collection.

Sample Document:

{
    _id: ObjectId(‘63229e0ae634e04e58252a74’),
    address:{},
    email: “karen@gmail.com”,
    first_name: “Karen”,
    last_name: “Huaulme”,
    image: “https://……”,          
    cart: [
        {   name: “Super fancy product name”,
            price: 30,  
            main_image_url: ”https&#x3A;//….” }, 
            {...}, 
            {...}],
            recommendedProducts: [
                { 
                    name: “Super fancy product name”,
                    price: 30,  
                    category“Cosmetics”,
                    main_image_url: “https://……”,
                }, 
                {...}, 
                {...}
            ]
        },
        {...},
        {...}
    ]
}
  1. Change the email to match what you set in the onSubmit function of the Login.js component.

  2. Now you can change the user by changing the following fields:

    1. first_name
    2. last_name
    3. image
  3. Change the product recommendation in the recommendedProducts field:

    1. name
    2. price
    3. category
    4. main_image_url
*Note to Presenter:**There are many different fields, but the yellow ones are the ones needed by the front end.**Price is an integer.**Image is for the user’s profile. Simply the web url of the user.*Suggest to keep no more than 3 objects in the cart array and - 6 objects in the recommendedProducts array. 

Now you need to update the front end.

In the Login.js Component, go to the onSubmit function on line 7:

const onSubmit = (data) => {
    if (data.email.toLowerCase() === [karen@gmail.com](mailto:karen@gmail.com)
        setCurrentCustID(“63229e0ae634e04e58252a74”);
    if (data.email.toLowerCase() === [scott@streammeup.com](mailto:scott@streammeup.com) 
        setCurrentCustID(“63229e0ae634e04e58252a71”);
    setShowLogin(false)}

Hard code the login email to match what you have in the customer document in Atlas.

Change the Chat and Chat Recommendations

This is actually all hard-coded in the front end. Go to the Chatbot.js component. On line 128 you can find a messageExchange array. Presently there are 2 exchanges in the form of objects. You can add as many as you wish.

{
    index: 0,
    question: “What should I wear… ,
    answer: [ 
        `blah blah… `, 
        `blee blee… `,
        `bloo bloo… `
    ],
    productSuggestions: [
        {
            name: “Zion Shorts”,
            main_image_url: “https://……”,
            price: 60
        },
        {...},
        {..}
    ]
}

To change the responses, change the answer field.

The productSuggestions can be changed, as well.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published