This is the first part of our in-depth series on building a Vaadin & Gemini AI chatbot. In part two, we’ll add context management and UI customizations to enhance the chatbot.
This blog post will detail how to build a web application that allows the user to input text prompts and receive a text response from Google's Gemini 1.5 model, similar to using Gemini from Google on the web. We will also use Google Vertex AI, a machine learning platform that lets you leverage machine learning and large language models (LLMs) for AI-powered applications.
In this blog series, we'll progressively expand the functionality of our app. We have chosen the Vaadin Flow framework because it offers out-of-the-box components that structure the UI and let us build the entire project in a single language.
Prerequisites
As vertex AI is built on top of the Google Cloud platform, much of the initial configuration will be related to Google Cloud. Those instructions are beyond the scope of this tutorial; however, in short, you will need to have a Google Cloud account, create a new project within that account, enable all recommended APIs from Vertex AI, and authenticate.
While there are a variety of authentication options, in this case, we have selected authentication using the gcloud utility. With the gcloud SDK installed, you run the following command locally to set up your project with authentication credentials: gcloud auth application-default login. Documentation for setting up Gemini in Google Cloud can be found here: https://cloud.google.com/vertex-ai/generative-ai/docs/start/quickstarts/quickstart-multimodal#gemini-setup-environment-java. It will be helpful to have a basic understanding of Vaadin Flow (components/layouts) and experience with the Java development environment but these are not requirements.
Project setup
Create a new Vaadin Flow project here https://start.spring.io/ selecting Vaadin, Vertex AI Gemini, and DevTools as dependencies. This will provide the framework for full-stack web applications through Vaadin Flow, the Spring AI support for Google Vertex Gemini chat, and live reload enabled by Spring DevTools. In application properties, you will want to assign the following configurations:
Replace projectId and location with your details as seen in the Google Cloud Console. Using Gemini features outside of the Google AI Studio is facilitated by Identity and Access Management as opposed to use of API keys.
Set up the View and Vertex AI configuration
Create a Java class entitled GeminiView in your src package and annotate it with @Route(“”) which directs the application to use the root URL to route this view. Extend the class with the VerticalLayout component to arrange the child elements vertically in the view as seen below:
Here in our constructor, we’re injecting the VertexAiGeminiChatModel which is a specific class from the spring-ai-vertex-ai-gemini library, which in turn interfaces with Google’s Vertex AI. The use of this class from Spring AI facilitates a level of abstraction where developers do not have to manually build the chat model (formerly chatClient) and also dramatically simplifies parsing the object response (more here: https://docs.spring.io/spring-ai/reference/api/chat/vertexai-gemini-chat.html).
Write the UI
Add the following code inside the constructor:
Here, we assign variables for our primary user interaction components, namely, a text field for input, a button to submit, and a Paragraph component for displaying the response back from the model. You may notice already that within a single Java file, we have flowed from describing AI configuration options to building out our visual layer. What follows is our backend logic that updates the UI, which is still in the same Java file.
Handling user interaction and generating AI response
Add the final portion of the code to the constructor.
Here, we add a click listener to the button awaiting interaction from the user. The beauty of this line lies in its simplicity. We call the call method from our chatModel which takes in a String, in this case, the value from the user input into our TextField. We then take that response and update the Paragraph component in the view with that String. The response technically comes in the form of a Generation (https://docs.spring.io/spring-ai/docs/current/api/org/springframework/ai/chat/Generation.html), but again, due to the abstractions afforded by the Spring AI classes, we are able to essentially receive a String, send a String, update a String. from which we extract the first result. Finally, we instruct the constructor to add the three defined web components (input, submit, and response) to our UI view.
You can now run the application, navigate to https://localhost:8080 in your browser, and experiment with different prompt inputs.
Summary
Combining Gemini 1.5's language capabilities with Vaadin Flow's ease of use, we have built a powerful web-based chatbot application in less than 25 lines of code. This idea can certainly be expanded to a world of possibilities, from customer support to smart travel assistants. Future posts in this series will continue to iterate on this project, adding context Management (keeping track of previous interactions in a chat history), styling through customizing the UI with Vaadin's component library to create a visually appealing chatbot, and possibly multi-modal media usage.
The full code in this tutorial is reflected in the main branch of this repo: https://github.com/LawrenceDLockhart/ai1.
We encourage you to follow along with this tutorial and share your feedback. Check out part two of this series to enhance your chatbot with context management and UI customization. Follow the links below to dig deeper into the Vaadin Flow and Spring AI frameworks.