날씨 AI 챗봇 예제

날씨 AI 챗봇 예제 소개

Next.js와 버셀 AI SDK를 활용하여 구축된 날씨 AI 챗봇입니다. OpenAI ChatGPT의 함수 호출 기능을 사용해 대화 중 날씨 문의 시 OpenWeatherMap API로 실시간 정보를 가져와 리액트 컴포넌트로 사용자 친화적인 UI를 제공합니다. 또한, ChatGPT의 기존 학습된 정보에 실시간 날씨 정보를 더해 더욱 풍부한 대화를 할 수 있게 합니다.

이 예제는 도서 『레벨업 리액트 프로그래밍 with Next.js』의 '12장. AI 챗봇을 통합하는 웹 애플리케이션'의 실습 프로젝트의 업데이트 버전입니다.

실행 화면

소스 코드

https://github.com/Eirene-dev/levelup-weather-chat-v2.git

배울 내용

http://localhost:3000 하위 각 라우트에서 다음 실행 결과를 보여주는 프로젝트입니다.

• /: 기본 채팅 UI (실제 채팅 서비스는 동작하지 않음)
• /usechat: useChat 훅과 라우트 핸들러에서 streamText 사용
• /chat: useActions 훅과 서버 액션에서 generateText 사용 (마크다운 미적용)
• /chat-markdown: useActions 훅과 서버 액션에서 generateText 사용 (마크다운 적용)
• /assistants: useAssistant 훅과 라우트 핸들러에서 AssistantResponse 사용
• /assistants-rsc: useActions 훅과 서버 액션에서 createStreamableUI 사용

최신 버셀 AI SDK와 OpenAI의 Chat Completion 및 Assistants를 이용하여 다음 네 가지 방식으로 구현된 예제를 설명합니다.

프로젝트 생성 및 설치

위 프로젝트를 단계별로 실습하기 위해서는 Next.js 프로젝트를 생성하고 의존성 있는 라이브러리들을 설치해야 합니다. 다음 명령어를 사용하여 Next.js 애플리케이션을 생성하고 프로젝트 디렉터리로 이동합니다.

npx create-next-app@latest levelup-weather-chat-v2
cd levelup-weather-chat-v2/

이제 필요한 패키지를 설치합니다. 먼저 버셀 AI SDK 라이브러리들과 Zod를 설치합니다.

npm install ai @ai-sdk/openai @ai-sdk/react zod

또한, Markdown과 MDX 처리를 위해 필요한 패키지를 설치합니다. 이 패키지는 GitHub Flavored Markdown(GFM) 및 MDX 처리를 위한 remark와 rehype 플러그인을 포함합니다.

npm install remark-gfm @next/mdx @mdx-js/loader remark remark-html