Spring AI로 나만의 챗봇 만들기 (입문부터 완성까지)

Spring AI로 나만의 챗봇 만들기 (입문부터 완성까지)

Spring AI로 나만의 챗봇 만들기

오늘은 Spring AI를 활용해서 처음부터 챗봇을 만들어 보는 과정을 공유하려고 합니다. Spring Boot와 OpenAI를 결합해서 누구나 따라 할 수 있게끔 차근차근 설명할게요. 저도 하나씩 해보면서 정리한 거라, 같이 따라 하다 보면 어느새 챗봇이 완성될 거예요!


준비물

  • Java: JDK 17 이상 설치 (여기에서 다운로드).
  • IDE: IntelliJ IDEA나 VS Code 추천.
  • OpenAI API 키: OpenAI 사이트에서 계정 만들고 키 발급받기.
  • 기본 지식: Java랑 Spring Boot를 조금 아시면 좋지만, 몰라도 따라 할 수 있게끔 써볼게요!

1단계: Spring Boot 프로젝트 설정하기

Spring AI를 쓰려면 먼저 Spring Boot 기반을 만들어야 해요. 시작해 볼게요.

  1. 프로젝트 생성:
    Spring Initializr에 들어가서 아래처럼 설정해요.
    - Project: Maven
    - Language: Java
    - Spring Boot: 최신 버전 (예: 3.x.x)
    - Dependencies: "Spring Web"

    "Generate" 누르고 다운로드한 파일을 IDE에서 열어주세요.

  2. 실행 확인:
    DemoApplication.java를 열고 실행 버튼을 눌러봅니다. 콘솔에 "Started DemoApplication"이 보이면 잘 된 거예요!

2단계: 간단한 REST API 만들기

Spring AI를 넣기 전에 Spring Boot가 잘 되는지 확인하려고 간단한 API를 만들어볼게요.

  1. 컨트롤러 추가:
    src/main/java/com/example/demo/controller 폴더를 만들고, HelloController.java를 아래처럼 작성해요.
    package com.example.demo.controller;
    
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    @RestController
    public class HelloController {
        @GetMapping("/hello")
        public String sayHello() {
            return "Hello, Spring!";
        }
    }
  2. 테스트:
    프로젝트를 실행하고 브라우저에서 http://localhost:8080/hello에 들어가 봅니다. "Hello, Spring!"이 뜨면 성공이에요!

3단계: Spring AI 통합하기

이제 Spring AI를 추가해서 OpenAI와 연결할 차례예요.

  1. 의존성 추가:
    pom.xml을 열고 <dependencies> 안에 아래를 추가해요.
    <dependency>
        <groupId>org.springframework.ai</groupId>
        <artifactId>spring-ai-openai</artifactId>
        <version>0.8.0-SNAPSHOT</version> <!-- 최신 버전은 https://repo.spring.io에서 확인 -->
    </dependency>
    IDE에서 Maven 리로드 버튼을 눌러주세요.

  2. OpenAI 설정:
    src/main/resources/application.properties에 아래를 추가합니다.
    spring.ai.openai.api-key=your-openai-api-key
    spring.ai.openai.model=gpt-3.5-turbo
    your-openai-api-key는 발급받은 키로 바꿔주세요.

4단계: AI로 텍스트 생성하기

Spring AI로 OpenAI를 호출해서 텍스트를 받아오는 기능을 넣어봅시다.

  1. 서비스 클래스 생성:
    src/main/java/com/example/demo/service 폴더를 만들고, ChatService.java를 작성해요.
    package com.example.demo.service;
    
    import org.springframework.ai.openai.OpenAiChatClient;
    import org.springframework.stereotype.Service;
    
    @Service
    public class ChatService {
        private final OpenAiChatClient chatClient;
    
        public ChatService(OpenAiChatClient chatClient) {
            this.chatClient = chatClient;
        }
    
        public String generateResponse(String prompt) {
            return chatClient.call(prompt);
        }
    }
  2. 컨트롤러 수정:
    HelloController.java를 아래처럼 바꿉니다.
    package com.example.demo.controller;
    
    import com.example.demo.service.ChatService;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.RestController;
    
    @RestController
    public class HelloController {
        private final ChatService chatService;
    
        public HelloController(ChatService chatService) {
            this.chatService = chatService;
        }
    
        @GetMapping("/chat")
        public String chat(@RequestParam String message) {
            return chatService.generateResponse(message);
        }
    }
  3. 테스트:
    실행 후 http://localhost:8080/chat?message=안녕하세요에 접속해 보세요. OpenAI 응답이 오면 성공이에요!

5단계: 웹 기반 챗봇 완성하기

마지막으로, 웹 페이지에서 대화할 수 있는 챗봇을 만들어봅시다.

  1. 프론트엔드 추가:
    src/main/resources/staticindex.html을 아래처럼 작성해요.
    <!DOCTYPE html>
    <html>
    <head>
        <title>나만의 챗봇</title>
    </head>
    <body>
        <h1>챗봇과 대화하기</h1>
        <input type="text" id="message" placeholder="메시지를 입력하세요">
        <button onclick="sendMessage()">전송</button>
        <div id="response"></div>
    
        <script>
            function sendMessage() {
                const message = document.getElementById("message").value;
                fetch(`/chat?message=${encodeURIComponent(message)}`)
                    .then(response => response.text())
                    .then(data => {
                        document.getElementById("response").innerText = data;
                    });
            }
        </script>
    </body>
    </html>
  2. 최종 테스트:
    실행 후 http://localhost:8080에 접속해서 "오늘 기분 어때?"를 입력해보세요. AI가 답을 주면 완성!

마무리

여기까지 따라 오셨다면 Spring AI로 챗봇을 성공적으로 만들어본 거예요! 이제 대화 기록을 저장하거나 UI를 예쁘게 꾸며보는 것도 재밌을 것 같아요. 저도 이 과정을 정리하면서 많이 배웠는데, 여러분도 즐거우셨길 바랍니다. 질문 있으면 댓글로 남겨주세요!

Comments