챗봇 웹사이트: AI 채팅 플랫폼

AI 개발의 첫 걸음으로 Vercel의 AI 챗봇 템플릿을 탐구하고 배포합니다.

데모 링크

개요

• 역할: 개발자 / 통합자
• 기술 스택: Next.js 14, TypeScript, Tailwind CSS, Vercel AI SDK, NextAuth.js
• 주요 결과: 복잡한 다중 제공자 AI 템플릿을 성공적으로 구성하고 배포했습니다.
• 요약: 이것은 저의 첫 번째 실무 AI 프로젝트였습니다. 처음부터 다시 만드는 대신 Vercel의 오픈 소스 AI 챗봇 템플릿을 활용했습니다. 템플릿의 아키텍처를 탐구하고 몇 가지 개인적인 수정을 가했으며, 최신 AI 애플리케이션이 어떻게 작동하는지 배우기 위해 성공적으로 구성하고 배포하는 데 집중했습니다.

문제

• 과제: 기존의 방대한 코드베이스(Vercel 템플릿)를 이해하고 라이브 배포를 위해 환경 변수, 데이터베이스 연결 및 AI 제공자를 구성하는 방법을 파악하는 것.
• 대상: 나 자신(학습 목적) 및 라이브 AI 채팅을 테스트하려는 포트폴리오 방문자.
• 제약 사항: Vercel AI SDK의 학습 곡선을 극복하고 처음으로 서버리스 지속성을 설정하는 것.

접근 방식 및 결정

• 아키텍처: 템플릿에서 기본으로 제공하는 Modular Next.js 14 App Router 설정과 React Server Components를 활용했습니다.
• 주요 결정: 견고하고 MIT 라이선스가 있는 템플릿을 학습용 샌드박스로 사용하기로 결정했습니다. 이를 통해 기본적인 스트리밍 메커니즘을 처음부터 구축하느라 고생하는 대신 프로덕션 준비가 완료된 코드를 연구할 수 있었습니다.
• 트레이드오프: 학습 및 배포를 위한 안정적이고 모든 기능을 갖춘 시작점을 갖기 위해 완전한 맞춤화 가능성을 희생했습니다.
• 데이터 흐름: 템플릿이 Vercel AI SDK를 통해 사용자 입력을 다른 LLM 제공자로 라우팅하고 응답을 UI로 스트리밍하는 방법을 연구했습니다.

주요 결과 및 영향

• 결과: AI 기능을 갖춘 최신 Next.js 14 애플리케이션을 구성, 수정 및 배포하는 실질적인 경험을 얻었습니다.
• 영향: LLM을 웹 앱에 통합하는 과정을 명확히 이해하여 향후 더 맞춤화된 AI 프로젝트를 위한 탄탄한 기반이 되었습니다.

기술 심층 분석

(참고: 이 프로젝트를 진행하면서 제가 탐구하고 배운 Vercel 템플릿의 기본 기능입니다.)

• 주목할 만한 세부 사항: 코드, 이미지 및 노트를 처리하는 템플릿의 내장 Artifacts 시스템을 탐구했습니다.
• 검증: 프로젝트가 엔드투엔드(E2E) 테스트를 위해 Playwright를 기본적으로 어떻게 활용하는지 배웠습니다.
• 최적화: 지연 로딩(lazy loading)과 React Server Components가 활성 스트리밍 중에도 채팅 인터페이스의 성능을 어떻게 유지하는지 연구했습니다.
• 코드 품질: 프로젝트의 강력한 타입 및 구성 요소 기반 구조를 검토하고 그로부터 배웠습니다.

회고

• 앞으로의 방향: 이제 핵심 개념을 이해했으므로 향후 프로젝트에서는 AI SDK를 기반으로 나만의 맞춤형 UI를 처음부터 구축할 계획입니다.
• 성공 요인: 환경 구성을 성공적으로 관리하고 필요한 데이터베이스를 연결하여 라이브 데모를 원활하게 실행했습니다.
• 교훈: 다른 개발자의 프로덕션 준비 완료 코드를 읽고 이해하는 것은 Vercel AI SDK와 같은 새로운 기술을 배우는 가장 빠른 방법 중 하나입니다.

나의 기여

• 구성 및 배포: 환경 변수를 설정하고 필요한 데이터베이스(Neon Serverless Postgres / Vercel Blob)를 연결하여 라이브 환경에 템플릿을 배포했습니다.
• 코드 탐색: 템플릿에서 제공하는 AI SDK 아키텍처 및 LLM 확장성 패턴을 깊이 있게 탐색했습니다.
• 수정 사항: 특정 데모 요구 사항에 맞게 UI/UX 및 제공자 연결을 약간 수정했습니다.

프로젝트 아키텍처

이 프로젝트는 Vercel 템플릿에서 제공하는 아키텍처를 사용합니다:

• 컴포넌트 구성:
  • app/: 핵심 채팅 및 인증 흐름을 처리하는 Next.js 라우트.
  • components/: 사전 구축된 재사용 가능한 UI 컴포넌트.
  • lib/ai/: LLM 및 프롬프트 로직을 위한 구성 파일.
• 상태 관리: 상태 전환을 위해 React Context와 Server Actions를 사용합니다.
• 통합: Vercel AI SDK, 인증을 위한 NextAuth, 채팅 기록을 위한 서버리스 데이터베이스로 구동됩니다.

데모 미리보기

수정된 라이브 배포판은 chatbot.franzdomingo.dev에서 볼 수 있습니다. 모든 기능과 UI를 직접 탐색할 수 직접 탐색할 수 있습니다.

• 웹 뷰: 반응형 모바일 우선 디자인.
• 실시간 채팅: 통합된 LLM의 스트리밍 기능을 테스트해 보세요.
• Artifacts: 챗봇이 실시간으로 코드와 노트를 생성하는 방식을 체험해 보세요.

호스팅 참고 사항:
데모는 독점 API 설정을 사용하여 chatbot.franzdomingo.dev에서 호스팅됩니다. 소스 코드는 Vercel의 템플릿을 기반으로 합니다. 자세한 내용은 franzdomingo.dev를 통해 저자에게 문의하세요.