Building a Smart Retail Shopping Assistant PART 2
Crafting Your Retail Shopping Assistant with Agent Builder
In Part 1: we discussed the technical details of creating a knowledge-driven analytics engine that powers our smart shopping assistant. Now, let’s explore how we leverage the magic of Agent Builder to bring this engine to life in a conversational interface. Make sure you have the endpoint URL ready before starting part 2.
This part is co-authored by Romin Irani!
Introducing Agent Builder
Agent Builder is a powerful, low-code tool that empowers us to create conversational agents quickly and efficiently. It streamlines the process of designing dialog flows, integrating knowledge bases, and connecting to external APIs. In our case, we’ll use Agent Builder to seamlessly connect with the Cloud Function endpoint we built in Part 1, enabling our shopping assistant to access our retail knowledge base and respond to customer queries intelligently.
Build the Agent App
Create a New Agent:
- Start by logging into the Agent Builder platform.
- Click on “CREATE APP” and give your agent a descriptive name (e.g., “Retail Shopping Assistant”).
- Click App Type “Agent”.
4. Give your agent a descriptive name.
5. Enter the details for the agent.
a. Change the Agent Name to “Retail Shopping Agent”.
b. Add the below “Goal”:
You are a shopping assistant agent! Your job is to help the customer search for their ideal apparels, allow them to add items to their cart, remove items from their cart, and review items in their cart. Once a user is done searching, open the search results in a user friendly html page.
c. Save it at this point.
6. Then click Tools from the navigation menu and click CREATE.
Enter Tool Name: Retail Shopping Tool
Enter Tool Description:
This tool refers to the dataset in the backend as the context information for product inventory. It takes as input the user’s search text summarized by the agent and matches with the most appropriate list of items and returns as an array of items.
Enter Schema — OpenAPI in YAML format:
This is the part where we are using the backend endpoint to power the agent. Copy the below OpenAPI spec (and replace the URL placeholder (enclosed in angle brackets) with your Cloud Function endpoint:
openapi: 3.0.0
info:
title: AlloyDB Product Matcher
description: A Cloud Function to query AlloyDB for product matches based on user search text.
version: 1.0.0
servers:
- url: <<https://us-central1-YOUR_PROJECT_ID.cloudfunctions.net/alloy-gem>>
paths:
/:
post:
summary: Find matching products based on search text.
operationId: apparelSearch
requestBody:
description: JSON object containing the search text.
required: true
content:
application/json:
schema:
type: object
properties:
search:
type: string
description: The user's search query for product matching.
responses:
'200':
description: Successful response with a JSON array of matching products.
content:
application/json:
schema:
type: array
items:
type: object
properties:
id:
type: string
description: Product ID.
category:
type: string
description: Product category.
sub_category:
type: string
description: Product sub-category.
uri:
type: string
description: Product URI or URL.
description:
type: string
description: Product description.
literature:
type: object
description: JSON object containing match information from the ML model.
properties:
MATCH:
type: string
description: Whether the product matches the search query (YES/NO).
PERCENTAGE:
type: string
description: Percentage of match.
DIFFERENCE:
type: string
description: Description of differences between the search and product.
'500':
description: Internal server error.Leave other configurations to their default values and click “Save”.
7. Go back to the Agent at this point because we want to add the “Tool” configuration to the agent’s “Instructions”. Add the below to the instructions placeholder (Remember, the indents are important in defining the flow):
- Greet the user and answer their question to the best of your knowledge.
- Summarize the user's request and ask them to confirm that you understood correctly.
- Check if the request has details like gender, color, material, style and other key apparel details already.
- If not, seek clarifying details.
- If the search request is very broad, then ask the user to narrow down the request with specific details that you believe could be personal preferences.
- Once all the necessary details, summarize your final understanding of request with the user.
- Use ${TOOL: Retail Shopping Tool} to help the user with their task.
- If the request has unrelated input text, gracefully convey that you don't have information on that topic.
- Do not give product availability information outside the source that is provided to you in ${TOOL: Retail Shopping Tool}.
- Do not assist with any information unless you are certain that you know the answer.
- Ask if the user has any other query.
- If yes, repeat the above step (step 2) again.
- If no, then move on to next step.
- Thank the user for their business and say goodbye.Make sure the tool “Retail Shopping Tool” is selected in the “Available Tools” section and then save the agent again.
Test the Agent
On the right pane, you should see the Preview Agent section that allows you to test your agent:
As you can see in the screenshot below, I have greeted as a user and started my chat with a request for white shirt with blue prints:
This is the JSON response:
This is the raw JSON result from the Cloud Function that processes the AlloyDB Similarity Search. That’s it! We are all set with the agent now.
A Sample Conversation Flow
At this point, you can test and iterate the flow of your dialog (conversation) agent:
User: I'm looking for women's boots for winter.
Agent: (OpenAPI call to Cloud Function that works with AlloyDB Similarity Search)
Cloud Function: (Processes query, returns JSON array)
Agent: Based on your preferences, here are some options: [Product 1, Product 2, Product 3]. Would you like to see more details about any of these?
User: No, That is all. Bye!
Agent: Have a good day!Now let’s say you want to see the result in the conversational agent in a certain graphic format including pictures and links. We will do that using examples of conversations also known as Few Shot Prompting.
Few Shot Prompts
This means we want to add a few examples to the agent builder to have a consistent result format.
In one of our previous screenshots in the “Test the Agent” section, we see the response from the agent as “I see. You are looking for a white shirt with blue prints…”. Go to that response or create a new test conversation from the right pane of the agent:
- Type the below in the “Enter User Input” section:
You will see a response like this:
And you will also see the JSON Array returned by the API endpoint.
2. Now click the Agent Name (as shown in the image below highlighted with a red tick mark) from the preview section’s margin and all your tabs on the chat preview section will be highlighted. Now click the “Save Example” on the top right corner in the preview section. It will look like this:
3. Save the conversation with a Display Name “Response with images” or something similar and click “Create”.
4. Now go to the response tab highlighted with a black tick mark in the above image and replace the text “I see. You are looking for yellow sandals. Is that correct?” with the following:
I see you are looking for yellow sandals. Here are a few options for you:
<!DOCTYPE html>
<html>
<body>
<h2>Featured Sandals</h2>
<table style="overflow-x: auto; white-space: nowrap;">
<tr>
<td>
<img src="http://assets.myntassets.com/v1/images/style/properties/d27dbd8e9666b9af2d72fbfde315f76d_images.jpg" alt="Yellow sandals from Estd. 1977" width="300">
</td>
<td>
<img src="http://assets.myntassets.com/v1/images/style/properties/b7a479fe5f56457e930541a789c5df68_images.jpg" alt="Yellow sandals from Gliders" width="300">
</td>
<td>
<img src="http://assets.myntassets.com/v1/images/style/properties/b6c813734b29b89d1055fd000ea50743_images.jpg" alt="Yellow sandals from Rocia" width="300">
</td>
<td>
<img src="http://assets.myntassets.com/v1/images/style/properties/ee0e918c229e76e0e7e61712e9d2ecb3_images.jpg" alt="Yellow flip flops from Numero Uno" width="300">
</td>
<td>
<img src="http://assets.myntassets.com/v1/images/style/properties/5bdd4c9e739205e28ee134ff7849bc60_images.jpg" alt="Yellow flip flops from Numero Uno" width="300">
</td>
</tr>
</table>
</body>
</html>5. Click “Save” on top.
Repeat the process for as many examples as you want with different variations and flows of the conversation.
Now go ahead and test it out with a user input:
Some other types of responses:
That’s it. We have successfully created and tested a Conversational Agent for our retail app.
Deployment and Integration:
Once you’re satisfied with your agent, you can easily deploy it to various channels using Agent Builder’s integrations. You can embed it on your website, integrate it with popular messaging platforms, or even create a dedicated mobile app. We can also use the Agent Builder API directly in our web client applications, which we will cover in Part 3.
Key Benefits of Agent Builder:
- Rapid Development: Agent Builder significantly accelerates the development process, allowing you to focus on crafting the conversational logic rather than building infrastructure.
- Scalability: It seamlessly handles a high volume of interactions, thanks to its integration with Google Cloud’s scalable infrastructure.
- Customization: You have extensive control over the look and feel of your agent, ensuring it aligns with your brand identity.
Conclusion
By integrating the power of our custom-built analytics engine with the intuitive interface of Agent Builder, we’ve created a smart retail shopping assistant that delivers personalized experiences, answers questions accurately, and ultimately drives customer satisfaction and sales. In the upcoming final part of this blog series, we’ll shift our focus from the backend to the frontend, demonstrating how to seamlessly integrate your Agent Builder-powered shopping assistant into a web application hosted on Cloud Run. We’ll walk you through the steps of invoking the Agent Builder API, creating a user-friendly chat interface, and ensuring a smooth and engaging user experience.
Stay tuned for Part 3, where we’ll bring your retail shopping assistant to life on the web!
