Spring AI is an open-source application framework designed to easily integrate Artificial Intelligence (AI) features into Spring Boot applications. It functions as a standard middleware layer; rather than training or building AI models from scratch, it enables developers to seamlessly connect their enterprise code with existing AI models. Below, we outline the step-by-step process for configuring and developing a chatbot.
First, you need to select an LLM (Large Language Model) that Spring AI will use to communicate:

 

Step 1:We will use the standalone Ollama LLM model. To do this, install Ollama on your system (download via https://ollama.com/download/windows) and then download a free model from https://ollama.com/search.
CMD:

Check Ollama Run using URL: http://localhost:11434/
Step 2:
In this step, we configure the Spring Boot AI application using Spring Initializr (https://start.spring.io/); we have previously covered how to perform this configuration. Here, we will explain the coding process step-by-step. 

Step 2.1: Check the dependencies in the `pom.xml` file and ensure they match your project setup.

 
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>4.1.1</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>a143mk.AI</groupId> <artifactId>aiChatclient</artifactId> <version>0.0.1-SNAPSHOT</version> <name/> <description/> <url/> <licenses> <license/> </licenses> <developers> <developer/> </developers> <scm> <connection/> <developerConnection/> <tag/> <url/> </scm> <properties> <java.version>17</java.version> <spring-ai.version>2.0.1</spring-ai.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-webmvc</artifactId> </dependency> <dependency> <groupId>org.springframework.ai</groupId> <artifactId>spring-ai-starter-model-ollama</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-webmvc-test</artifactId> <scope>test</scope> </dependency> </dependencies> <dependencyManagement> <dependencies> <dependency> <groupId>org.springframework.ai</groupId> <artifactId>spring-ai-bom</artifactId> <version>${spring-ai.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>
Step 2.2: 

We create a REST controller named `ChatClientController.java`. Here, we will see how to implement the LLM packages and classes, and we will also use `@CrossOrigin` to facilitate the design of the web UI. package a143mk.AI.aiChatclient; import org.springframework.ai.chat.client.ChatClient; import org.springframework.http.MediaType; import org.springframework.http.ResponseEntity; import reactor.core.publisher.Flux; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; @RestController @RequestMapping("/chat") @CrossOrigin(origins = "*") public class ChatClientControler { private final ChatClient chatClient; public ChatClientControler(ChatClient.Builder chatClientBuilder) { this.chatClient = chatClientBuilder.build(); } @PostMapping("/Message") public ResponseEntity<String> chat(@RequestParam(value="q") String message) { String response = this.chatClient.prompt(message).call().content(); return ResponseEntity.ok(response); } @PostMapping(value = "/Message/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE) public Flux<String> streamChat(@RequestParam(value = "q") String message) { return this.chatClient.prompt(message) .stream() .content(); } }

Step 2.3: We will configure the LLM model settings within the `application.properties` file.

 

Step 3: Finally, we create the web page (`indexAI_CHAT.html`) and integrate the REST controller with the web UI.

  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AI ChatBot</title> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <style> body { font-family: Arial, sans-serif; margin: 40px; background: #f5f5f5; } .chat-container { max-width: 700px; margin: auto; background: white; padding: 25px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } #chatInput { width: 70%; padding: 10px; font-size: 16px; } #sendBtn { padding: 10px 20px; font-size: 16px; cursor: pointer; } #sendStrim { padding: 10px 20px; font-size: 16px; cursor: pointer; } /* #response-display { margin-top: 20px; padding: 15px; background: #eee; min-height: 100px; white-space: pre-wrap; border-radius: 5px; }*/ /* Your original container */ #response-display { margin-top: 20px; padding: 15px; background: #eee; min-height: 100px; white-space: pre-wrap; border-radius: 5px; font-family: sans-serif; /* Clean font for regular text */ } /* New styles for the code block container */ #response-display pre { background: #272822; /* Dark background for code contrast */ color: #f8f8f2; /* Light text color */ padding: 12px; margin: 10px 0; border-radius: 4px; overflow-x: auto; /* Adds horizontal scrollbar if code is too long */ } /* New styles for the actual code text */ #response-display pre code { font-family: 'Courier New', Courier, monospace; /* Monospace font */ font-size: 14px; white-space: pre; /* Keeps code indentation exactly as written */ } .error { color: red; } </style> </head> <body> <div class="chat-container"> <h2>AI Chatbot</h2> <input type="text" id="chatInput" value="hi" placeholder="Enter your message" > <button id="sendBtn">Send Message</button> <h3>Response:</h3> <pre id="response-display">Waiting...</pre> <em id="chat-container">Power by <a href="https://a143mk.blogspot.com/">a143mk</a></em> </div> <script> // Check jQuery console.log("jQuery version:", $.fn.jquery); $('#sendBtn').on('click', function () { // Get value from input var userInput = $('#chatInput').val().trim(); // Validate input if (!userInput) { $('#response-display').text("Please enter a message."); return; } // API URL var targetUrl = "http://localhost:8081/chat/Message?q="+ encodeURIComponent(userInput); console.log("Calling API:", targetUrl); // Show loading $('#response-display').text("Sending..."); // POST request $.post(targetUrl).done(function (entityResponse) { // console.log("API Response:", entityResponse); $('#response-display').text(entityResponse); }) .fail(function (xhr, status, error) { console.error("Request failed:", status, error); console.error("HTTP Status:", xhr.status); console.error("Response:", xhr.responseText); $('#response-display') .addClass("error") .text( "Request failed" + "HTTP Status: " + xhr.status + "\n" + "Error: " + error ); }); }); // Allow Enter key to send $('#chatInput').on('keypress', function (event) { if (event.which === 13) { $('#sendBtn').click(); } }); </script> </body> </html>