Integrating Spring AI with Azure OpenAI: Example Tutorial

This tutorial will guide you through integrating Spring AI with Azure OpenAI in a Spring Boot application. We will set up a basic Spring Boot project, configure it to use Azure OpenAI API and create endpoints to generate responses using Azure OpenAI models.

Introduction

Spring AI simplifies the integration of AI functionalities into Spring applications. This tutorial will show you how to set up and use Spring AI to interact with Azure OpenAI's GPT models for generating text responses.

1. Setting Up the Project

Step 1: Create a New Spring Boot Project

Use Spring Initializr to create a new Spring Boot project. Include dependencies for Spring Web and Spring AI.

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 Dependency

Add the spring-ai-openai-spring-boot-starter dependency to your pom.xml:

<dependency>
    <groupId>org.springframework.ai</groupId>
    <artifactId>spring-ai-openai-spring-boot-starter</artifactId>
    <version>1.0.0</version>
</dependency>

2. Configuring the Spring Boot Starter

Step 1: Add Azure OpenAI API Key and Endpoint to Configuration

Create a application.properties or application.yml file in your src/main/resources directory and add your Azure OpenAI API key and endpoint.

For application.properties:

azure.openai.api.key=your_azure_openai_api_key
azure.openai.endpoint=https://your-resource-name.openai.azure.com/

For application.yml:

azure:
  openai:
    api:
      key: your_azure_openai_api_key
    endpoint: https://your-resource-name.openai.azure.com/

Step 2: Create a Configuration Class

Create a configuration class to set up the Azure OpenAI client.

package com.example.demo.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.ai.openai.AzureOpenAiClient;

@Configuration
public class AzureOpenAiConfig {

    @Bean
    public AzureOpenAiClient azureOpenAiClient() {
        return new AzureOpenAiClient(
            System.getenv("AZURE_OPENAI_API_KEY"),
            System.getenv("AZURE_OPENAI_ENDPOINT")
        );
    }
}

3. Implementing the Azure OpenAI Integration

Example: Text Generation

Create a service to handle text completions using the Azure OpenAI API.

Service:

package com.example.demo.service;

import org.springframework.ai.openai.AzureOpenAiClient;
import org.springframework.ai.openai.model.CompletionRequest;
import org.springframework.ai.openai.model.CompletionResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class AzureOpenAIService {

    @Autowired
    private AzureOpenAiClient azureOpenAiClient;

    public String generateResponse(String prompt) {
        CompletionRequest request = new CompletionRequest();
        request.setPrompt(prompt);
        request.setMaxTokens(150);

        CompletionResponse response = azureOpenAiClient.createCompletion(request);
        return response.getChoices().get(0).getText();
    }
}

Controller:

package com.example.demo.controller;

import com.example.demo.service.AzureOpenAIService;
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 AzureOpenAIController {

    @Autowired
    private AzureOpenAIService azureOpenAIService;

    @GetMapping("/generateResponse")
    public String generateResponse(@RequestParam String prompt) {
        return azureOpenAIService.generateResponse(prompt);
    }
}

4. Creating a Simple Frontend

For demonstration purposes, we will create a simple HTML page that allows users to interact with Azure OpenAI.

Step 1: Create an HTML File

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>Azure OpenAI Integration</title>
</head>
<body>
    <h1>Azure OpenAI Integration</h1>
    <div>
        <textarea id="prompt" rows="4" cols="50" placeholder="Type your message here..."></textarea><br>
        <button onclick="generateResponse()">Send</button>
    </div>
    <div id="response"></div>

    <script>
        function generateResponse() {
            const prompt = document.getElementById('prompt').value;
            fetch(`/generateResponse?prompt=${encodeURIComponent(prompt)}`)
                .then(response => response.text())
                .then(data => {
                    document.getElementById('response').innerText = data;
                });
        }
    </script>
</body>
</html>

5. Testing the Integration

Step 1: Run the Application

Run your Spring Boot application. Ensure the application starts without errors.

Step 2: Access the Azure OpenAI Interface

Open your browser and navigate to http://localhost:8080. You should see the simple chat interface. Type a message and click "Send" to interact with Azure OpenAI.

Conclusion

This tutorial demonstrated how to set up and integrate Azure OpenAI with a Spring Boot application using Spring AI. You learned how to create a service and controller for generating responses using Azure OpenAI, and how to create a simple frontend to interact with the AI model. This setup provides a foundation for building more complex and feature-rich AI applications. 

Explore further customization and enhancements to leverage the full potential of Azure OpenAI in your Spring Boot projects.


Comments