OpenAI Real-time API를 활용한 AI 음성 에이전트 개발 가이드

2024-11-30 05:16:39

aiopenainextjsreact

들어가며

인공지능(AI)은 빠르게 발전하며 일상생활에 많은 변화를 가져오고 있습니다. 그 중에서도 Conversational AI Voice Agent, 즉 대화형 AI 음성 에이전트는 대화형 인터페이스를 통해 사용자와 상호작용하는 기술로 주목받고 있습니다. 최근 OpenAI의 실시간 API를 활용하여 이러한 음성 에이전트를 쉽게 개발할 수 있다는 점이 매력적입니다. 이번 블로그에서는 Next.js 15를 활용하여 AI 음성 에이전트를 단계별로 구현하는 방법을 소개하겠습니다.

준비물

시작하기 전에 다음과 같은 준비물이 필요합니다:

JavaScript/React에 대한 기본 지식
Node.js (v16 이상) 설치
OpenAI API 키 (OpenAI 계정 필요)
마이크 및 스피커 (음성 입력 및 출력을 위한 필수 장치)

새 Next.js 프로젝트 설정

먼저 새로운 Next.js 애플리케이션을 설정합니다. 프로젝트 명은 conversational-ai-agent로 지정하겠습니다.

npx create-next-app@latest conversational-ai-agent
cd conversational-ai-agent

필요한 패키지를 설치합니다.

npm install openai react-speech-recognition react-speech-kit

위 패키지들은 각각 OpenAI API 통합, 음성 인식 처리, 텍스트-음성 변환 기능을 제공합니다.

OpenAI API 설정

.env.local 파일을 프로젝트 루트에 생성하고, OpenAI API 키를 추가합니다:

OPENAI_API_KEY=your-openai-api-key

이제 OpenAI API와의 상호작용을 위한 유틸리티 함수를 만들어보겠습니다.

// utils/openai.js
import { Configuration, OpenAIApi } from "openai";

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

export const getChatResponse = async (prompt) => {
  const response = await openai.createChatCompletion({
    model: "gpt-4",
    messages: [{ role: "user", content: prompt }],
  });
  return response.data.choices[0].message.content;
};

이 함수는 사용자의 입력을 OpenAI에 보내고, AI의 응답을 수신합니다.

음성 인식 및 텍스트-음성 변환 추가

마이크를 통해 사용자의 음성을 캡처하고, AI 응답을 음성으로 변환하는 기능을 추가해보겠습니다.

// pages/index.js
import { useState } from "react";
import SpeechRecognition, { useSpeechRecognition } from "react-speech-recognition";
import { useSpeechSynthesis } from "react-speech-kit";
import { getChatResponse } from "../utils/openai";

export default function Home() {
  const [conversation, setConversation] = useState([]);
  const [isProcessing, setIsProcessing] = useState(false);
  const { speak } = useSpeechSynthesis();
  const { transcript, resetTranscript } = useSpeechRecognition();

  if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
    return <p>Your browser does not support Speech Recognition.</p>;
  }

  const handleStart = () => {
    resetTranscript();
    SpeechRecognition.startListening({ continuous: true });
  };

  const handleStop = async () => {
    SpeechRecognition.stopListening();
    setIsProcessing(true);
    const userMessage = transcript;
    const updatedConversation = [...conversation, { role: "user", content: userMessage }];
    setConversation(updatedConversation);

    // Get AI response
    const aiResponse = await getChatResponse(userMessage);
    setConversation([...updatedConversation, { role: "assistant", content: aiResponse }]);

    // Speak AI response
    speak({ text: aiResponse });
    setIsProcessing(false);
  };

  return (
    <div style={{ padding: "2rem", fontFamily: "Arial, sans-serif" }}>
      <h1>Conversational AI Voice Agent</h1>
      <div>
        <p><strong>AI:</strong> {conversation.map((msg, idx) => (
          <span key={idx}>
            <em>{msg.role === "assistant" ? msg.content : ""}</em><br />
          </span>
        ))}</p>
        <p><strong>You:</strong> {transcript}</p>
      </div>
      <button onClick={handleStart} disabled={isProcessing}>
        Start Listening
      </button>
      <button onClick={handleStop} disabled={isProcessing || !transcript}>
        Stop and Process
      </button>
    </div>
  );
}

위 코드는 사용자 음성을 인식하고, AI 응답을 음성으로 출력하는 기능을 제공합니다.

CSS 스타일 추가로 UX 개선

UX를 개선하기 위해 글로벌 CSS 파일을 추가합니다. 스타일은 사용자 인터페이스의 가독성과 탐색 용이성을 높이는 데 집중합니다.

/* styles/global.css */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f9;
  color: #333;
}

h1 {
  text-align: center;
  color: #4a90e2;
}

button {
  padding: 10px 20px;
  margin: 5px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:disabled {
  background-color: #ccc;
}

div {
  max-width: 600px;
  margin: 0 auto;
}

애플리케이션 실행 및 테스트

개발 서버를 시작하여 애플리케이션을 테스트합니다.

npm run dev

브라우저에서 http://localhost:3000으로 접속합니다. "Start Listening" 버튼을 클릭하여 음성 입력을 시작하고, "Stop and Process" 버튼을 클릭하여 입력을 OpenAI에 전송하고 AI의 응답을 확인하세요.

배포 방법 (선택 사항)

배포를 원한다면, Vercel과 같은 플랫폼에 애플리케이션을 배포할 수 있습니다.

npx vercel

Vercel을 통해 애플리케이션을 배포하고 URL을 공유할 수 있습니다.

결론 및 확장 아이디어

축하합니다! 🎉 Next.js 15와 OpenAI의 API를 사용하여 대화형 AI 음성 에이전트를 성공적으로 구축하였습니다. 이번 작업은 기본적인 기능 구현에 중점을 두었지만, 앞으로 몇 가지 확장 가능한 방향성을 제안합니다:

사용자 정의 명령 추가
UI/UX 개선
다국어 지원 추가

R_11