New customer experience with Google Map and Vertex AI

Inspiration

When event participants watched the demonstrations at the event, we challenged ourselves to develop applications that would spark ideas on how they could be utilized and applied to our customers' businesses.

What it does

Using Google Maps and Vertex AI Search, we have made it possible for customers to seamlessly search for products online, check store inventory, and then visit the actual store.

1.Users enter questions into the chatbot using natural language.

2.It suggests the best products on the site to customers based on conversations with users. The chatbot, developed using LangGraph, is high quality and gives accurate answers.

3.When a user selects a product, pins for stores with inventory appear on the map. Select a store and display the route from your current location to the selected store using the Routes API.

How we built it

Development Process We established personas and determined the direction of the application based on use cases. We built an EC site (fictitious) and defined the following functions: product recommendation based on chatbot responses, and customer guidance using Google Maps from recommended products.

Frontend

-EC site construction

-Chatbot implementation

-Implementation of inventory visual inspection functionality and navigation functionality to stores using the Google Maps API

Vertex AI -Implementation of dynamic product recommendation functionality based on user circumstances

Backend -Development of a database and API using Firestore

The processes for each area (frontend, Vertex AI, and backend) are as follows

-Frontend: We created a prototype using v0 to save time and implemented the functionality we wanted to deliver to users based on use cases.

-Chatbot: Using LangGraph, we developed the chatbot through a “design -> implementation -> testing” process based on each use case. If any design flaws were found, we made corrections as needed and repeated the implementation and testing process to improve quality.

-Backend: We implemented a database using Firestore and Fast API.

Challenges we ran into

Frontend

-We improved response speed in the Maps API implementation by brainstorming ideas and enhancing usability. We relied too much on the client for processing, which made state management complicated and required refactoring work.

Chatbot

-We struggled with branching decisions for different use cases, handling use cases that could not be addressed, and passing appropriate context to Gemini. However, by utilizing Langgraph's State, we were able to determine “what the user is looking for” and “whether the provided information is sufficient,” and implement searches based on that information.

Accomplishments that we're proud of

1.By linking with Google Maps, we have built a unified platform that handles everything from product recommendations to inventory searches via Vertex AI Search. We expect to be able to build apps for various use cases based on this platform.

2.We demonstrated it at the event and many customers showed interest in Google Maps Platform. At the same time, they also showed interest in our company, Cloud Ace.

3.We were able to create the demo in a short period of time by utilizing generative AI such as v0.

What we learned

1.Customers who attended the presentation expressed interest in using weather information, so we felt that combining Google Maps Platform with the Weather API would enable us to reach a wider audience.

2.By displaying inventory information on Google Maps Platform maps, we gained insight into building applications that can deliver nearby inventory information to users more intuitively than text.

What's next for New customer experience with Google Map and Vertex AI

In addition to inventory display, we would like to combine this app with data from Geospatial Analytics, which will become GA in the future, to enable trade area analysis and demand forecasting.

Built With

• appengine
• cloudrun
• fastapi
• firestore
• javascript
• langgraph
• next.js
• python
• routesapi
• typescript
• vartexaisearch