[TIL/React] 2025/01/26

Google AI Studio 적용하기 🔍

프로그래밍 관련 Q&A 사이트를 이용하며 생겨난 추가적인 질문을, 서비스 내에서 AI에게 질문할 수 있도록, 관련 페이지를 개발하고 싶었다.

Google AI Studio를 활용했다.

1. 초기 설정 ⚙️

1-1. Get API Key 🌿

Get API Key 버튼을 클릭한 뒤, API 키 만들기 버튼을 클릭하여 API Key를 발급받는다.

결제 설정을 따로 하지 않았기에, 기본요금제는 '무료'로 적용된다.

1-2. Gemini SDK Initialization 🌿

SDK 패키지를 설치한다. 향후 해당 SDK 패키지를 통해 genAI 모델을 생성할 수 있다.

2. 구현 흐름 ⚙️

2-1. Overall Flow 🌿

기본적으로 AskAIPage에서 질문하기 버튼을 클릭하면, 서버 주소로 사용자가 입력한 prompt에 대한 POST 요청이 진행된다.

요청을 받는 서버의 경로는 controller 상에 명시되어 있고, controller에서 수행하는 세부 로직인 generateContent 함수 코드는 service에 작성되어 있다.

최종적으로 controller에서 처리된 response 값을 state에 저장하여 front-end에서 렌더링 한다.

2-2. gemini.module.ts 🌿

import { Module } from '@nestjs/common';

import { GoogleGenerativeAIService } from './gemini.service';
import { GoogleGenerativeAIController } from './gemini.controller';

@Module({
  controllers: [GoogleGenerativeAIController],
  providers: [GoogleGenerativeAIService],
})
export class GeminiModule {}

컨트롤러와 서비스를 모듈 단위로 관리하기 위해 gemini.module.ts 파일을 생성했다. 이 파일은 최상단 app.module.ts에 등록되어야 한다.

2-3. gemini.controller.ts 🌿

import { Controller, Post, Body } from '@nestjs/common';
import { GoogleGenerativeAIService } from './gemini.service';

@Controller('api/ask-ai')
export class GoogleGenerativeAIController {
  constructor(
    private readonly googleGenerativeAIService: GoogleGenerativeAIService,
  ) {}

  @Post()
  async askAI(@Body('prompt') prompt: string): Promise<{ result: string }> {
    try {
      const result =
        await this.googleGenerativeAIService.generateContent(prompt);
      return { result };
    } catch (error) {
      console.error('Error in GoogleGenerativeAIController:', error);
      return { result: 'Failed to generate content from Google Generative AI' };
    }
  }
}

요청의 body에서 prompt를 받아와서, 서비스 파일에 작성되어 있는 generateContent 함수로 전달한다. 해당 함수의 return 값을 result에 저장한 뒤 최종적으로 반환하게 된다.

2-4. gemini.service.ts 🌿

import { Injectable } from '@nestjs/common';
import { GoogleGenerativeAI } from '@google/generative-ai';

@Injectable()
export class GoogleGenerativeAIService {
  private genAI: GoogleGenerativeAI;

  constructor() {
    const apiKey = process.env.GEMINI_API_KEY;
    if (!apiKey) {
      throw new Error('API Key is required');
    }
    this.genAI = new GoogleGenerativeAI(apiKey);
  }

  async generateContent(prompt: string): Promise<string> {
    try {
      const model = this.genAI.getGenerativeModel({ model: 'gemini-pro' });

      const result = await model.generateContent(prompt);
      const response = await result.response;
      const text = await response.text(); 

      return text;
    } catch (error) {
      console.error('Google Generative AI Error:', error);
      throw new Error('Failed to generate content from Google Generative AI');
    }
  }
}

env 파일에 미리 작성해놓은 apiKey를 GoogleGenerativeAI 함수에 전달해서 genAI라는 클래스를 생성한다.

이후 해당 클래스에 getGenerativeModel을 통해 gemini-pro 모델을 사용할 것을 명시한다.

model.generateContent(prompt)를 통해 prompt에 대한 콘텐츠를 생성한다. prompt는 클라이언트에서 전달된 텍스트로, Google Generative AI 모델이 해당 텍스트를 기반으로 콘텐츠를 생성하게 된다.

최종적으로 response.text()를 통해 응답으로부터 텍스트를 추출한다.

3. 구현 화면 ⚙️

3-1. Light Mode 🌿

3-2. Dark Mode 🌿

4. 보안점 ⚙️

1. 구현에 집중해서 Gemini 문서를 아직 정독하지는 않음
2. 모델 이름이 하드코딩되어 있는데, 유연성을 잃을 수 있겠다는 생각이 듦
3. 디테일한 프론트엔드 처리가 아직 부족함