[ AI/Gemini ] Gemini API 연결해보기(Feat. Next js 14+)

claude 와 함께 Gemini API 챗봇 연결해 보기

환경 : Next JS 14+, Typescript

cursor를 쓸 수 있지만, 무료 버전이다보니
성능 측면에서 claude(유료) 떨어진다.

 

아래 Studio에 들어가 API Key를 발급 받으면 된다.

Google AI Studio

 

 

시작 전 API의 한도(Limitation) 확인

Google 이라도 제한이 있다.

비율 제한 작동 방식
비율 제한은 일반적으로 다음 세 가지 측정기준으로 측정됩니다.

• 분당 요청 수 (RPM)
• 일일 요청 수 (RPD)
• 분당 토큰 수 (입력) (TPM)

자세한 내용은 공홈에서 확인 하세요.

비율 제한  |  Gemini API  |  Google AI for Developers

---

서비스 내용

차를 좋아해서, 사람들이 조금 더 차이 많이 마시고 좋아했으면 한다.
그래 따라서 조금도 차 마시는 데, 시작하는 데 도움이 되길 바라면서 만들어본 페이지를 활용해 본다.

 

서비스 흐름은 간단히 이렇다.

1. 어떤 차를 좋아하는지 모르겠다
2. 간단한 퀴즈를 수행한다(15개 문제)
3. 차를 추천해준다.
4. (선택적으로) Gemini 2.0 Flash에게 총 3번에 질의 응답을 할 수 있다.

 

 

npm 설치

npm install @google/generative-ai

API KEY는 .env에 잘 넣어두시길

 

 

API는 별도의 폴더에 넣어 통신

Next js 특성상 서버쪽에서 call을 받는다.

// app/api/route.ts
// 구글 문서에 나오는 예시일 뿐이다.

import { GoogleGenAI } from "@google/genai";

const ai = new GoogleGenAI({ apiKey: "YOUR_API_KEY" });
async function main() {
  const response = await ai.models.generateContent({
    model: "gemini-2.5-flash", contents: "Explain how AI works in a few words",
    });

console.log(response.text); } await main();

 

당연히 client도 만들어야겠죠?

이런 건 Generative AI의 도움을 받아서 진행해 보시길.
여기까지 간단히 설명하고 내가 직면했던 문제들 위주로 작성해 보도록 하겠다.

 

---

 

 

첫 서버 에러 : 500

status :400
아마도 내 Local 에서 google에 보내는 API가 잘못됐나보다.

model : Gemini 2.5 Flash-Lite에서 Gemini 2.0 Flash 로 바꾸니까 됐다.

결과

다행히, 모델 변경으로 결과는 성공했다. 

일단 CSS를 변경하는 것과 추가적인 시스템 프롬프트를 생각해 봐야겠다.

 

 

 

시스템 프롬프트 추가 및 MarkDown 처리

Makrdown Library 활요한 UI 변경

npm i react-markdown

 

시스템 프롬프트

// app/api/route.tx

if(teaContext){
prompt =` 당신은 차(tea) 전문가입니다. 사용자가 ${teaContext.name}에 대해 질문하고 있습니다.
차 정보:
- 이름: ${teaContext.name}
- 설명: ${teaContext.description}
- 맛: ${teaContext.tasty} 사용자 질문: ${userText}

한국어로 친근하고 자세하게 답변해주세요. 차에 대한 전문적인 정보를 제공하되, 이해하기 쉽게 설명해주세요.
300자에서 400자 내외로 설명해줘. MarkDown 형식을 사용해서 주제, 내용, 목록 등으로 구분해줘.
필요하면 table을 활용해줘.
Intro는 짧고 간결하게!
` }

나는 이렇게 만들어 봤다.

필요하다면, GPT-4-mini 등을 활용해 prompt를 작성하면 좋다.
mini의 경우, planning에 좋은 모델이다.

 

 

Token 제한으로 제한 추가 : 총 3번 질문 가능

// 사용 횟수 초과 체크 if (usageCount >= MAX_USAGE) { return; }

무료 등급을 사용하는 관계로,
사용량을 제안해야 한다. 물론

처음부터 다시 시도하면 될 수 있겠지만, 그렇게 까지 하고 싶어하는 사람은... 
IP로 막어야 한다고 생각한다. 일단, 여기까진 하지 않기로 한다.

 

Token이 다 떨어졌을 땐?

 

// 정확한 에러 타입 분류
if (error?.status === 429 || 
    error?.message?.includes('quota') || 
    error?.message?.includes('limit') ||
    error?.message?.includes('RESOURCE_EXHAUSTED')) {
  
  return NextResponse.json({
    success: false,
    error: "QUOTA_EXCEEDED",  // 🎯 정확한 에러 타입
    message: "일일 AI 질문 한도에 도달했습니다."
  }, { status: 429 });
}

서버에서 일단 감지를 통해서 처리
필요시에는 FAQ를 활용 한다.

FAQ의 활용은 좀 더 깊은 고민이 필요할 듯하다.

 

시도 가능한 곳

Tea 다이어리

 

 

결과

API를 활용해서 만드는 것도 많은 부분이 고민해야한다.

- 출력되는 모습
- 시스템 프롬프트
- API token의 한계
- 생성하는 동안의 지루함을 덜어줄 UIUX

여전히 많은 과제가 있을 것이다.
하나 하나 만들어보면서 해보니, 이런 저런 문제가 생각난다.

특히, 토큰이 다 됐다는 전제 또 다른 기획이 필요한 부분이다.
FAQ를 통해서 지속적인 접근이 가능한 것도 재미있는 전략이라고 생각한다.