a143mk-Software Programming

How to create an AI and RAG chatbot using Spring AI and a Web HTML page.

Retrieval-Augmented Generation (RAG)
First, you need to select an LLM (Large Language Model) that Spring AI will use to communicate: Instead of relying solely on an LLM's pre-trained knowledge, RAG fetches relevant context from your own data sources (like databases, PDFs, or internal documentation) at runtime and passes that information along with the user prompt to the LLM.
Step 1: Core Concepts of RAG

Ingestion & Embedding (Offline / Pre-processing): Raw documents (PDF, TXT, HTML) are read and split into smaller text chunks. An Embedding Model converts these text chunks into numerical vectors. The vectors and text chunks are stored in a Vector Store (e.g., PgVector, ChromaDB, Pinecone, Redis).
Retrieval (Runtime): When a user submits a query, Spring AI converts the query into a vector and searches the Vector Store for the most semantically relevant document chunks.
Augmentation & Generation: Spring AI automatically combines the user query and the retrieved documents into an augmented prompt. The augmented prompt is sent to the LLM, which uses the provided context to generate an accurate, hallucination-free answer.

Key RAG Components in Spring AI:
Spring AI simplifies RAG integration through familiar Spring abstractions: DocumentReader & TextSplitter: Interfaces to ingest documents (e.g., using Apache Tika) and break them into processable chunks.
VectorStore: A unified Java abstraction for vector databases (supports pgvector, Redis, Pinecone, Qdrant, Milvus, ChromaDB, etc.).
Advisor API (QuestionAnswerAdvisor): A high-level abstraction that automatically intercepts ChatClient prompts, queries the VectorStore, appends retrieved documents to the prompt context, and passes it to the LLM.
RetrievalAugmentationAdvisor: A modular API for advanced RAG patterns, enabling features like multi-query expansion, document re-ranking, and dynamic metadata filtering.
Step 2: Implementing Basic RAG with Spring AI
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/> 
	</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.ai</groupId>
			<artifactId>spring-ai-vector-store</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 `RAGController.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 a143mk.AI.Modal.QueryRequest;
import jakarta.annotation.PostConstruct;
import org.springframework.ai.chat.client.ChatClient;
import org.springframework.ai.chat.messages.Message;
import org.springframework.ai.chat.messages.UserMessage;
import org.springframework.ai.chat.prompt.Prompt;
import org.springframework.ai.chat.prompt.SystemPromptTemplate;
import org.springframework.ai.document.Document;
import org.springframework.ai.embedding.EmbeddingModel;
import org.springframework.ai.reader.TextReader;
import org.springframework.ai.transformer.splitter.TokenTextSplitter;
import org.springframework.ai.vectorstore.SearchRequest;
import org.springframework.ai.vectorstore.SimpleVectorStore;
import org.springframework.ai.vectorstore.VectorStore;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.core.io.ClassPathResource;
import org.springframework.core.io.Resource;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import java.io.IOException;
import java.nio.charset.StandardCharsets;
import java.util.List;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import java.util.stream.Collectors;

@RestController
@CrossOrigin(origins = "*")
public class RAGController {

private final ChatClient chatClient;
    private final EmbeddingModel embeddingModel;
    private final Map<String, String> responseCache = new ConcurrentHashMap<>();
    private VectorStore vectorStore;

@Value("${file.path:classpath:data/data.text}")
    private Resource fileResource;

private String template;

public RAGController(ChatClient.Builder chatClientBuilder, EmbeddingModel embeddingModel) {
        this.chatClient = chatClientBuilder.build();
        this.embeddingModel = embeddingModel;
    }

@PostConstruct
    public void init() {
        this.vectorStore = SimpleVectorStore.builder(this.embeddingModel).build();

Resource resource = (fileResource != null && fileResource.exists())
                ? fileResource
                : new ClassPathResource("data/data.text");

if (resource.exists()) {
            try {
                TextReader textReader = new TextReader(resource);
                TokenTextSplitter tokenTextSplitter = new TokenTextSplitter();
                List<Document> documents = tokenTextSplitter.apply(textReader.get());
                if (documents != null && !documents.isEmpty()) {
                    this.vectorStore.accept(documents);
                }
            } catch (Exception e) {
                throw new IllegalStateException("Failed to load the RAG knowledge base from data.text", e);
            }
        }

this.template = "You are an internal local AI assistant. Use the provided context to answer the user's question. " +
                "If the answer is not in the context, say that the information is not available in the local knowledge base.\n\n" +
                "Context:\n{document}";
    }

@PostMapping(value = "/rag", consumes = MediaType.APPLICATION_JSON_VALUE, produces = MediaType.TEXT_PLAIN_VALUE)
    public String rag(@RequestBody QueryRequest queryRequest) {
        String question = queryRequest == null ? null : (queryRequest.getQuestion() != null ? queryRequest.getQuestion() : queryRequest.getQuery());

if (question == null || question.isBlank()) {
            throw new IllegalArgumentException("Request must contain a non-empty 'question' or 'query'.");
        }

String cacheKey = question.trim().toLowerCase();
        String cachedResponse = responseCache.get(cacheKey);
        if (cachedResponse != null) {
            return cachedResponse;
        }

String retrievedDoc = readRelevantContext(question);

SystemPromptTemplate systemPromptTemplate = new SystemPromptTemplate(template);
        Message systemMessage = systemPromptTemplate.createMessage(Map.of("document", retrievedDoc));

Message userMessage = new UserMessage(question);
        Prompt prompt = new Prompt(List.of(systemMessage, userMessage));

String response = chatClient.prompt(prompt)
                .call()
                .content();

responseCache.put(cacheKey, response);
        return response;
    }

private String readRelevantContext(String question) {
        if (vectorStore == null) {
            return readRawKnowledgeBase();
        }

try {
            List<Document> similarDocuments = vectorStore.similaritySearch(
                    SearchRequest.builder().query(question).topK(3).build());

if (similarDocuments == null || similarDocuments.isEmpty()) {
                return readRawKnowledgeBase();
            }

String retrievedDoc = similarDocuments.stream()
                    .map(Document::getText)
                    .filter(text -> text != null && !text.isBlank())
                    .collect(Collectors.joining("\n\n"));

return retrievedDoc.isBlank() ? readRawKnowledgeBase() : retrievedDoc;
        } catch (Exception e) {
            return readRawKnowledgeBase();
        }
    }

private String readRawKnowledgeBase() {
        try {
            Resource resource = (fileResource != null && fileResource.exists()) ? fileResource : new ClassPathResource("data/data.text");
            if (!resource.exists()) {
                return "No local context file was found.";
            }

return new String(resource.getInputStream().readAllBytes(), StandardCharsets.UTF_8);
        } catch (IOException e) {
            return "The local knowledge base could not be loaded.";
        }
    }
}

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

spring.application.name=aiChatclient
server.port=8082

# Use the local Ollama instance for both the LLM and embeddings.
spring.ai.ollama.base-url=http://localhost:11434
spring.ai.ollama.chat.options.model=codellama:latest
spring.ai.ollama.chat.options.num-predict=256
spring.ai.ollama.chat.options.temperature=0.2
spring.ai.ollama.embedding.options.model=mxbai-embed-large:latest
spring.ai.ollama.embedding.enabled=true

# Local knowledge base file used by the RAG controller.
file.path=classpath:data/data.text

Step 2.4: We implement RAG by taking raw documents (PDF, TXT, HTML) processed into `data.text` format and breaking them down into smaller text chunks.

Details:

Name: Manoj kumar Vishwakarms

address: 123 Main Street, City, Country

phone: +910000000000

email: manoj@example.com

job: Software Engineer

skills: Java, Spring Boot, SQL, JavaScript

//Something else can also be written in this RAG data file.

Step 3: Finally, we create the web page (`indexAIRAGCHAT.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">

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

.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;
        }
		 #chatInputRAG {
            width: 70%;
            padding: 10px;
            font-size: 16px;
        }

#sendBtn {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
		
		 #sendStrimRAG {
            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 */
	
	
	max-height: 300px;         /* Adjust maximum height as needed */
    overflow-y: auto;          /* Show vertical scrollbar only when content overflows */
    overflow-x: auto;          /* Add horizontal scrolling if JSON/lines are long */
    word-break: break-word;    /* Prevent text/strings from breaking layout */
    
    /* Optional visual styles for better readability */
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
	
}

/* 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>

<h2>AI Chatbot</h2>

<input   type="text"      id="chatInput"      value="hi"      placeholder="Enter your message"   >
	    <button id="sendBtn">Send Message ?</button>
  
	 
	 <br/>
	 <h2>AI RAG Chatbot</h2>
     <input   type="text"      id="chatInputRAG"      value="My name is "      placeholder="Enter your RAG Question?"   >
	
    <button id="sendStrimRAG">Send RAG ?</button>
  
  
  
  
    <h3>AI ChatBot & RAG Response:</h3>

<pre id="response-display">Waiting...</pre>

</div>

// 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:8082/chat/Message?q="+ encodeURIComponent(userInput);

console.log("Calling API:", targetUrl);

// Show loading
        $('#response-display').text("Sending To LLM ...");

// POST request
        $.post(targetUrl).done(function (entityResponse) {

// console.log("API Response:", entityResponse);

// $('#response-display').text(JSON.stringify(entityResponse, null, 2));
			    $('#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();
        }

});
	
	
	
	
    $('#sendStrim').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:8082/chat/Message/stream?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(
                    JSON.stringify(entityResponse, null, 2)
                );

})

.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) {
            $('#sendStrim').click();
        }

});	
	/*RAg Coltrolling*/
$('#sendStrimRAG').on('click', function () {

// Get value from input
    var userInputRGA = $('#chatInputRAG').val().trim();
    // Validate input
    if (!userInputRGA) {
        $('#response-display').text("Please enter RAG a message.");
        return;
    }
    // API URL (removed query string)
    var targetUrl = "http://localhost:8082/rag";
	    // Show loading
    $('#response-display').text("Sending to RAG...");
	
	var settings = {
  "url": targetUrl,
  "method": "POST",
  "timeout": 0,
  "headers": {
    "Content-Type": "application/json"
  },
  "data": JSON.stringify({
    "question": userInputRGA
  }),
};

$.ajax(settings)
  .done(function (response) {
   // console.log("Success:", response);
	  $('#response-display').text(response);
  })
  .fail(function (xhr, status, error) {
    console.error("Request Failed!");
    console.error("HTTP Status Code:", xhr.status);
    console.error("Status Text:", status);
    console.error("Error Description:", error);
    console.error("Server Response:", xhr.responseText);
  });

});

</script>

</body>
</html>

Output:

How to create an AI chatbot using Spring AI and a Web HTML page.

AI-CHATBOT , Spring Boot , SpringAI 1 comment :

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:

1. widows CMD:

irm https://ollama.com/install.ps1 | iex

2. mocOS CMD:

curl -fsSL https://ollama.com/install.sh | sh

3. Linux CMD:

curl -fsSL https://ollama.com/install.sh | sh

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.

<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.

spring.application.name=aiChatclient

server.port=8081

spring.ai.ollama.base-url=http://localhost:11434

spring.ai.ollama.chat.options.model=codellama:latest

spring.ai.ollama.chat.options.num-predict=256

spring.ai.ollama.chat.options.temperature=0.2

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>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

#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;
        }

.error {
            color: red;
        }
    </style>
</head>

<body>

<h2>AI Chatbot</h2>

<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>

// 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);

if (event.which === 13) {
            $('#sendBtn').click();
        }

});

</script>

</body>
</html>

Output:

Step-by-step development video:

Subscribe to: Posts ( Atom )

Recent Posts

How to create an AI and RAG chatbot using Spring AI and a Web HTML page.

How to create an AI chatbot using Spring AI and a Web HTML page.

Pageviews

LABELS

OUR TECH-PROJECTS

Development Accessories

DOWNLOAD ANY ONLINE VIDEOS

POPULAR POSTS