Gemini API Playground (Next.js)

Gemini API 테스트에서 테스트한 Gemini API를 Next.js 홈페이지 만들기에서 만든 사이트에 연동하였다.

 

 

 

Vercel AI SDK 연동

Vercel AI SDK에서 제공하는 useChat 훅을 이용하면 Gemini API 테스트 시 직접 구현했던 message 히스토리 관리를 편하게 할 수 있다.

다음은 Google 연동 매뉴얼을 따라서 간단하게 gemini 챗봇을 연동해 본 화면과 주요 소스코드이다.

 

'use client'

import { useChat } from 'ai/react'

export default function GeminiChatbotPage() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({ api: '/api/gemini/chat' })

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>
          {m.role === 'user' ? 'User: ' : 'AI: '}
          {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input value={input} placeholder="Say something..." onChange={handleInputChange} />
      </form>
    </div>
  )
}

 

Next.js Chatbot 템플릿 검토

Next.js Chatbot 템플릿을 검토해 보았다.

먼저 데모 페이지를 살펴보았는데, Chatbot Demo의 모습은 다음과 같다.

 

프롬프트에 질문을 입력하고 전송하면, 아래와 같이 답변이 노출된다.

 

다음으로 github 페이지에서 코드를 살펴보았다.

Chat, ChatList, ChatMessage 등의 컴포넌트를 통해 주요 챗봇 UI가 구현되었고, Vercel AI SDK, react-markdown, react-syntax-highlighter 등의 패키지를 사용하고 있었다.

주요 코드들을 불필요한 내용만 정리하여 Chat 컴포넌트 등으로 옮겨 왔다.

 

챗봇 연동 완성

다음과 같이 챗봇 연동을 완성하였다.

 

https://freeislet.vercel.app/ai/gemini/chatbot