SchedAI 개발기 ep 7. Nextjs14. AISDK로 Chatgpt와 Gemini연동과 Stream응답

AISDK를 활용한 ChatGPT와 Gemini 연동 및 스트림 응답 처리 과정

최근 인공지능(AI) 모델의 발전과 더불어 AI 서비스를 활용한 다양한 응용 사례가 증가하고 있다. 특히, OpenAI의 ChatGPT와 Google의 Gemini는 자연어 처리(NLP) 분야에서 주목받는 모델로, 각각 독자적인 강점을 가지고 있다. 이러한 AI 모델들을 효과적으로 연동하고 스트림 응답을 처리하는 방법은 실시간 데이터 제공 및 UX측면에서 중요하다.

글쓴이도 LLM들을 쓸때 이 모델 저모델을 번갈아 써보면서 가장 성능이 좋은 모델이 뭔지, 어떠한 상황들에서 어떻게 해야 최대한의 효과를 낼수 있는지 이것저것 시도해보곤한다. 물론 chatgpt api, gemini api를 각각 연동하는것이 그렇게 어려운 작업까진 아니지만, 추후 다양한 모델들을 적용시키기 위해 AISDK를 써보기로 했다. 추후 이미지 생성AI나 최신모델들(like Deepseek R1)을 바로바로 적용시키려면 이렇게 SDK를 써보는 것이 도움이 될 것 같다고 판단했다. 

AISDK는 여러 AI를 한번에 연동하고 스트리밍 응답, 객체형 응답, 커스텀 tool등 다양한 기능들을 제공한다. SchedAI에 다양한 기능들을 적용해보았다.

본 글에서는 AISDK를 활용하여 ChatGPT와 Gemini를 연동하는 방법과, 이를 통해 스트림 응답을 처리하는 과정을 기술한다. 이를 통해 실시간 AI 응답의 가능성을 탐색하고, 보다 효율적인 AI 기반 시스템을 구축하는 데 기여하고자 한다.

---

 

AISDK란?

AISDK(Application Integration Software Development Kit)는 다양한 AI 모델과 애플리케이션 간의 원활한 통합을 지원하는 개발 도구이다. 이를 활용하면 단일 API를 통해 여러 AI 모델을 호출하고, 응답을 통합적으로 관리할 수 있다.

AISDK의 주요 기능

• 다중 AI 모델 연동: OpenAI, Google, Anthropic 등 다양한 AI 모델을 지원함.
• 스트림 응답 처리: 실시간 데이터 스트리밍을 통해 AI 모델의 응답을 부분적으로 출력할 수 있음.
• 비동기 처리 지원: 효율적인 비동기 호출을 통해 시스템 성능을 향상할 수 있음.

---

ChatGPT와 Gemini 연동 방법

API 키 발급 및 환경 설정

ChatGPT와 Gemini를 활용하기 위해 각각 OpenAI와 Google의 API 키를 발급받아야 한다. 환경 변수 파일(.env)을 활용하여 API 키를 안전하게 저장할 수 있다. env는 커스텀 할 수 있지만 다음처럼 적으면 따로 env를 호출하지 않아도 알아서 읽음.

OPENAI_API_KEY="your-openai-api-key"
GOOGLE_GENERATIVE_AI_API_KEY="your-gemini-api-key"

 

npm install ai @ai-sdk/google

---

백엔드

app/api/chat/route.ts

AISDK를 사용하여 ChatGPT와 Gemini를 연동하는 기본적인 코드 구조는 다음과 같다. default값 라우팅 url은 /api/chat으로 되있지만 useChat 이나 useCompletion에서 아래처럼 api프로퍼티를 통해 커스텀 할수 있다.

import { openai } from '@ai-sdk/openai';
import { google } from "@ai-sdk/google";
import { LanguageModelV1, streamText } from "ai";

/**
 * AI 모델별 실제 LanguageModelV1 인스턴스를 생성하는 함수 맵
 */
const providersMap: Record<AIModels, () => LanguageModelV1> = {
  "gemini-1.5-flash": () => google("gemini-1.5-flash"),
  "gemini-2.0-flash-exp": () => google("gemini-2.0-flash-exp"),
  "gpt-4o-mini": () => openai("gpt-4o-mini"),
};

// Allow streaming responses up to 30 seconds
export const maxDuration = 30;

export async function POST(req: Request) {
    // 요청 본문 파싱
    const { messages, model, chatId } = (await req.json()) as {
      messages: Message[];
      model: AIModels;
      chatId: string;
    };

    // 모델 유효성 검사
    if (!(model in providersMap)) {
      console.error("[POST] 잘못된 모델:", model);
      return new Response(`Invalid model: ${model}`, { status: 400 });
    }
    const modelInstance = providersMap[model]();
    console.log("[POST] 모델 인스턴스 생성 완료");
    
    // 스트리밍 result
    const result = streamText({
    	model: modelInstance,
    	messages,
    });

    return result.toDataStreamResponse();
}

위처럼 모델 값을 추가로 body로 받아와서 제미나이는 구글, gpt는 openai, 알맞는 AI Provider를 매핑해주었다.

AISDK에서는 streamText를 통해 스트림응답을 받을 수 있고 toDataStreamResponse를 통해 프론트엔드에 실시간으로 전해준다. 스트림응답이 필요없다면, generateText를 활용하면 된다.

---

프론트엔드

app/chat/page.js

'use client';

import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, setMessages, input, handleInputChange, handleSubmit, stop,
    isLoading, } = useChat({
    body: {
      chatId,
      model: selectedModel,
    },
    onResponse: (response) => {
      if (response.status === 402) {
        onOpen();
      }
    },
  });
	//구현
  return (
    <div></div>
  );
}

 

프론트엔드에서는 모델을 특정하기 위해 body에 model을 추가로 보내줬고, chatID는 추후 각 대화(Each Conversation)를 구현하기 위해 넣어줬다. 응답은 messages에 stack되고 다음 응답을 보낼때 합쳐진 상태로 페이로드가 구성된다. 

첫대화는 뭐 0: 안녕? 1: 무엇을 도와드릴까요? 이랬다면, 두번째 대화는  0: 안녕? 1: 무엇을 도와드릴까요? 2: 여행계획 짜줘. 이런식.

이렇게 간단하게 AISDK에서 미리 만들어둔 훅을 호출해서 챗을 쉽게 관리할 수 있다. 이와비슷하게 기본 API로 만들어보는 연습도 해봐야 하겠다. 

상태는 클라이언트 상의 상태에만 저장되고, 데이터를 저장하고 사용하려면, 따로 캐싱하거나, 스토리지를 이용한다거나 DB에 저장해야 한다. 처음에 기획할때 대화 구현부분을 누락해서 최근 일주일동안 첨부터 코드 다시짜느라고 개고생했다. 살려주세요 기획할때 뭐 빼먹었는지 확인 잘해야겠다. 내가 빡시게 기획하는것도 아니고 거의 chatgpt클론코딩 식인데 이렇게 허술할수가

다음포스팅은 AISDK와 Tool을 사용하는 방법을 알아보겠다.