Spring AI ChatClient API Tutorial
This tutorial will guide you through building a Spring Boot application that serves as a chat client using the ChatClient
abstraction provided by Spring AI. This abstraction allows you to interact with different types of large language models (LLMs) like GPT-4 without coupling with the actual LLM model.
The ChatClient offers a fluent API for communicating with an AI Model. It supports both a synchronous and reactive programming model. Read more about ChatClient API here.
Step 1: Create a New Spring Boot Project
You can create a new Spring Boot project using Spring Initializr or your preferred IDE. Ensure you include the necessary dependencies for Spring Web.
Using Spring Initializr:
- Go to start.spring.io
- Select:
- Project: Maven Project
- Language: Java
- Spring Boot: 3.0.0 (or latest)
- Dependencies: Spring Web
- Generate the project and unzip it.
Step 2: Add spring-ai-openai-spring-boot-starter
Dependency
In your project’s pom.xml
, add the following dependency:
<dependency>
<groupId>org.springframework.ai</groupId>
<artifactId>spring-ai-openai-spring-boot-starter</artifactId>
<version>1.0.0</version>
</dependency>
Step 3: Add API Key to Configuration
Create a application.properties
or application.yml
file in your src/main/resources
directory and add your OpenAI API key.
Check out how I can access the ChatGPT API.
For application.properties
:
openai.api.key=your_openai_api_key
For application.yml
:
openai:
api:
key: your_openai_api_key
Step 4: Create a Configuration Class
Create a new configuration class to set up the OpenAI client and the ChatClient
abstraction.
package com.example.demo.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.ai.openai.OpenAiChatClient;
import org.springframework.ai.openai.OpenAiClient;
@Configuration
public class OpenAiConfig {
@Bean
public OpenAiClient openAiClient() {
return new OpenAiClient();
}
@Bean
public ChatClient chatClient(OpenAiClient openAiClient) {
return new OpenAiChatClient(openAiClient);
}
}
Step 5: Create a Chat Service
Create a service class that will handle interactions with the ChatClient
abstraction.
package com.example.demo.service;
import org.springframework.ai.openai.ChatClient;
import org.springframework.ai.openai.model.ChatRequest;
import org.springframework.ai.openai.model.ChatResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class ChatService {
@Autowired
private ChatClient chatClient;
public String chat(String userInput) {
ChatRequest request = new ChatRequest();
request.setMessage(userInput);
ChatResponse response = chatClient.sendMessage(request);
return response.getReply();
}
}
Step 6: Create a Chat Controller
Create a controller to expose an endpoint for the chat functionality.
package com.example.demo.controller;
import com.example.demo.service.ChatService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class ChatController {
@Autowired
private ChatService chatService;
@GetMapping("/chat")
public String chat(@RequestParam String userInput) {
return chatService.chat(userInput);
}
}
Step 7: Create an HTML File
For demonstration purposes, we will create a simple HTML page that allows users to interact with the chat client.
Create an index.html
file in the src/main/resources/static
directory.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Chat Client</title>
</head>
<body>
<h1>AI Chat Client</h1>
<div>
<textarea id="userInput" rows="4" cols="50" placeholder="Type your message here..."></textarea><br>
<button onclick="sendMessage()">Send</button>
</div>
<div id="response"></div>
<script>
function sendMessage() {
const userInput = document.getElementById('userInput').value;
fetch(`/chat?userInput=${encodeURIComponent(userInput)}`)
.then(response => response.text())
.then(data => {
document.getElementById('response').innerText = data;
});
}
</script>
</body>
</html>
Step 8: Run the Application
Run your Spring Boot application. Ensure the application starts without errors.
Step 9: Access the Chat Client
Open your browser and navigate to http://localhost:8080
. You should see the simple chat client interface. Type a message and click "Send" to interact with the AI chatbot.
Conclusion
In this tutorial, you learned how to set up a Spring Boot application that serves as a chat client using OpenAI’s API through the ChatClient
abstraction. You created a service to handle interactions with the AI model, a controller to expose the chat endpoint, and a simple frontend for user interaction. This setup provides a foundation for building more complex and feature-rich AI chat applications. Explore further customization and enhancements to create a robust chat client.