Creating a Chatbot with Next.js and Vibe Coding the UI

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

앱 개발

대상자

프론트엔드 및 백엔드 개발자, AI 인프라 구축자

난이도: 중간 (Next.js 14, AI SDK 통합, 다중 모델 선택 로직 포함)

핵심 요약

• Next.js 14 + React 18 기반으로 구축된 Radhika 챗봇은 Vercel AI SDK를 통해 Groq, OpenAI, Claude, Google Gemini 등 다중 LLM을 지원
• 모드별 시스템 프롬프트(General, Productivity, Wellness 등)를 통해 AI 비서의 캐릭터 및 목적 분기
• 쿼리 복잡도 분석을 기반으로 llama-3.1-8b-instant, qwen/qwen3-32b 등 모델 자동 선택 로직 구현

섹션별 세부 요약

1. 기술 스택 및 인프라 설계

• 프레임워크: Next.js 14 (App Router), React 18
• 스타일링: Tailwind CSS + 커스텀 디자인 시스템
• UI 컴포넌트: shadcn/ui 라이브러리 활용
• 3D 시각화: Three.js로 입체 입자 시스템 구현
• 음성 인식/합성: WebKit Speech APIs 사용
• 모델 선택: Vercel AI SDK + llama-3.3-70b-versatile 등 AI 모델 연동

2. API 라우트 및 모델 처리 로직

• app/api/chat/route.ts에서 POST 요청 파싱 후 messages, mode, provider 파라미터 추출
• 모드별 시스템 프롬프트 적용 예:

```ts

const systemPrompt = SYSTEM_PROMPTS[mode] || SYSTEM_PROMPTS.general;

```

• 모델 선택 로직:

```ts

if (query.includes("analyze", "plan")) {

modelType = "reasoning"; // llama-3.3-70b-versatile

} else if (query.includes("creative")) {

modelType = "creative"; // qwen/qwen3-32b

} else {

modelType = "fast"; // llama-3.1-8b-instant

}

```

• 모델별 설정:

```ts

const MODELS = {

groq: {

fast: "llama-3.1-8b-instant",

reasoning: "llama-3.3-70b-versatile",

creative: "qwen/qwen3-32b"

},

gemini: { default: "gemini-2.0-flash" },

openai: { default: "gpt-4o" },

claude: { default: "claude-3-5-sonnet-20241022" }

};

```

3. UI/UX 및 확장성 설계

• 다크/라이트 모드: localStorage 기반 사용자 설정 저장
• 인터랙티브 3D 시각화: 모드별 색상 변경 가능
• 실시간 분석: Real-time Analytics 기능으로 AI 활동 모니터링
• 확장성: Next.js API Routes로 보안된 LLM 커뮤니케이션 가능

4. 모드별 기능 구현

• Productivity: 작업 관리, 시간 최적화
• Wellness: 건강, 정신 건강 지원
• Learning: 맞춤형 교육, 학습 계획
• BFF 모드: GenZ 스타일의 감정 지원 및 대화

결론

• 다중 모델 통합을 위해 Vercel AI SDK + Next.js API Routes를 활용하고, 모드별 시스템 프롬프트로 AI 캐릭터 분기를 적용
• 모델 선택 로직은 쿼리 복잡도 분석을 통해 자동화하여 성능 최적화 가능
• 실무 적용 시 GitHub 저장소(https://github.com/RS-labhub/Radhika)에서 전체 코드 및 데모 확인 권장