Integrating Vertex AI Agent Builder with web app: A Lesson in Simplicity

Timothy Jabez
Google Cloud - Community
3 min read12 hours ago

Recently, I had the opportunity to support a customer using Google Cloud during one of their hackathons. One of their teams decided to leverage Vertex AI Agent Builder for their hackathon idea. They meticulously followed the steps outlined in the GCP documentation to setup the Dialogflow Messenger in Vertex AI Agent Builder. Now the Dialogflow Messenger was active, and they had to integrate it with their web application. However, their entire web application was intended to be this single chat screen, and nothing more — in other words, they did not have a web application to start with.

They created an index.html file and updated its contents based on what they observed in the Cloud Console (As mentioned in the GCP documentation: Dialogflow → Integrations).

Upon opening the index.html file directly with Chrome, they were able to see the chat box, but it didn't function as expected — they weren't getting any responses back from the agent like how they got when they were testing the agent.

Dialoglogflow Preview
Broken web app

The bot, which responded correctly in the Cloud Console, failed to do so on their local setup. At this point, they approached me for assistance.

Despite my best efforts, I couldn’t resolve the issue. This was particularly challenging as I hadn’t worked on web applications before. Unfortunately, I couldn’t provide a solution before the hackathon ended, and I left feeling unsatisfied with my inability to help.

The problem continued to bother me, so I decided to conduct further research. Eventually, I discovered that the issue arose because we hadn’t hosted the website. By running a simple Python command python3 -m http.server 8000 in the folder containing the index.html file, I was able to host the website locally, and everything worked perfectly.

Host website using python
http://localhost:8000/ — working web app
Final web app code

The reason I wanted to share this experience was because, in our technology-driven world, basic and seemingly small details are often overlooked, hindering our progress. Many of us have faced situations in our professional or personal projects where we’ve been stuck on simple issues for an extended period. When we finally find the solution, we often chastise ourselves for not identifying it sooner.

We must recognize that being human means embracing our mistakes as integral parts of our journey. Although I couldn’t be of much help to the team during the hackathon, I hope this helps others who might face similar challenges.

--

--