Implementing a Web Chat With AI in Java
This article shows step by step how to implement a web chatbot using Java. Go through the steps of creating a new project and seeing the results!
This article shows step by step how to implement a web chatbot using Java. Here's a screenshot of the application you will develop:
Creating a New Project
Start by generating a new Maven project:
- Go to https://start.vaadin.com.
- Delete all the default views (Dashboard and Master-Detail).
- Add a new view by clicking on the plus icon and select Empty.
- Change the name to Chat and the route to chat.
- Optional: Tweak the theme using the options on the right side of the page.
- Click Download app and set a Project Name, Java Group ID, and Vaadin Version (this article uses 14 LTS).
- Click Download, unzip the generated file, and import the Maven project into your favorite IDE (see instructions for IntelliJ IDEA, Eclipse, and NetBeans).
- Remove the
backendsubpackage and its contents.
Adding the Required Dependencies
- Open the
pom.xmlfile in your IDE.
- Add the following to the
Add the following to the
Implementing the Bot Logic
The bot logic is defined with Artificial Intelligence Markup Language (AIML). The
org.alicebot.ab.Bot class allows you to generate intelligent-looking answers. You only need to add the AIML files and define a Spring-managed bean to access the bot logic.
Adding Ready-Made AIML Files
The set of rules that make up the AI the chatbot uses is defined in AIML files. You can create your own or download ready-to-use files. This article uses the free A.L.I.C.E. AIML files by Richard Wallace.
To add the A.L.I.C.E. AIML to your project:
- Go to https://github.com/drwallace/aiml-en-us-foundation-alice.
- Download the repository as a zip file.
- Extract the zip file and copy the contents (only the
.aimlfiles) to a new
src/resources/bots/alice/aiml/directory inside your Maven project (you have to create the
Here's a screenshot of the project structure with the AIML files:
Defining the Bean to Access the Bot Logic
To implement the bot logic:
Applicationclass in your IDE.
Add the following methods:
Implementing the Web UI
To add a web UI to the application, you'll implement a UI component to show messages and a view. You'll also add CSS styles to make the application look like a typical online chat.
Implementing a Scrollable Message List
To implement a scrollable message list in Java:
Create a new
Implement the class as follows:
To learn more about how to implement UI components with Vaadin see https://vaadin.com/learn/tutorials/vaadin-key-concepts.
Implementing a Chat View
To implement the chat view of the application:
- Open the
ChatViewclass in your IDE.
- Remove the constructor.
- Add the following members to the class:
Add the following constructor to the class:
Add the following method to the class:
Adding Custom Styles
To add custom CSS styles to the application:
- Open the
chat-view.cssfile in your IDE.
- Add the following selectors and rules:
Building and Running the Application
The first time you build the application server-side and client-side dependencies are downloaded. This might take some time. However, subsequent builds are much faster.
To build and run the application execute the
Application::main(String) standard Java application entry point in your IDE. Alternatively, you can execute the
java -jar target/vaadin-chat-1.0-SNAPSHOT.jar or
mvn spring-boot:run commands.
You can request the application in your browser at http://localhost:8080.
What to Do From Here?
The AIML format is very flexible and allows you to do many things. Try creating your AIML files around business or leisure topics or explore the many ready-made AIML that are available online. For example:
Try making two bots talk to each other. You can generate an initial phrase and see how the bots continue the conversation by themselves.
Keep in mind that In production environments you might have to move the .aiml files to an external directory similar to how you would do with other resources like databases. Also, in the case of Vaadin applications, use the production Maven profile to make the app ready for production environments.
Try the app on a mobile device. The Vaadin application you coded includes features of Progressive Web Application (PWA) which means, for example, that you can install it onto the home screen of your mobile device.
See the source code on GitHub.