@gendive/chatllm 0.2.0 → 0.3.0

package/README.md

@@ -0,0 +1,873 @@
+# @gendive/chatllm
+
+Multi-LLM 채팅 라이브러리 - 모델 스위칭, 메모리, Function Calling, React UI 컴포넌트 지원
+
+## 설치
+
+```bash
+npm install @gendive/chatllm
+```
+
+## 패키지 구조
+
+```
+@gendive/chatllm
+├── 코어 라이브러리 (import from '@gendive/chatllm')
+│   ├── 채팅 세션 관리
+│   ├── 멀티 프로바이더 지원 (OpenAI, Claude, Gemini, Ollama, DevDive)
+│   ├── 메모리/컨텍스트 관리
+│   └── Function Calling
+│
+└── React UI (import from '@gendive/chatllm/react')
+    ├── ChatUI - 풀 기능 채팅 컴포넌트
+    ├── useChatUI - Headless Hook
+    └── 개별 컴포넌트들
+```
+
+---
+
+## 1. React UI 컴포넌트 (`@gendive/chatllm/react`)
+
+### 1.1 ChatUI - 풀 기능 컴포넌트
+
+가장 간단한 사용법. 모든 UI가 포함되어 있음.
+
+```tsx
+import { ChatUI } from '@gendive/chatllm/react'
+
+const models = [
+  { id: 'gpt-5', name: 'GPT-5', provider: 'devdive' },
+  { id: 'gpt-4o-mini', name: 'GPT-4o Mini', provider: 'devdive' },
+  { id: 'claude-sonnet-4', name: 'Claude Sonnet 4', provider: 'devdive' },
+]
+
+function App() {
+  return (
+    <div style={{ height: '100vh' }}>
+      <ChatUI
+        models={models}
+        apiKey="your-devdive-api-key"
+        apiEndpoint="/api/chat"
+      />
+    </div>
+  )
+}
+```
+
+### 1.2 ChatUI Props
+
+| Prop | Type | Default | 설명 |
+|------|------|---------|------|
+| `models` | `ModelConfig[]` | **필수** | 사용 가능한 모델 목록 |
+| `actions` | `ActionItem[]` | 기본 4개 | 액션 버튼 (웹검색, 이미지생성 등) |
+| `templates` | `PromptTemplate[]` | 기본 4개 | 시작 화면 프롬프트 템플릿 |
+| `personalization` | `PersonalizationConfig` | - | 초기 개인화 설정 |
+| `apiKey` | `string` | - | API 키 (DevDive 등 외부 프로바이더용) |
+| `apiEndpoint` | `string` | `/api/chat` | API 엔드포인트 |
+| `theme` | `ThemeConfig` | light | 테마 설정 (`{ mode: 'dark' }`) |
+| `showSidebar` | `boolean` | `true` | 사이드바 표시 여부 |
+| `storageKey` | `string` | `chatllm_sessions` | localStorage 키 |
+| `contextCompressionThreshold` | `number` | `20` | 컨텍스트 압축 시작 메시지 수 |
+| `onSendMessage` | `Function` | - | 커스텀 메시지 전송 핸들러 |
+| `onSessionChange` | `Function` | - | 세션 변경 콜백 |
+| `onError` | `Function` | - | 에러 핸들러 |
+
+---
+
+## 2. 사용하는 측에서 구현해야 할 것들
+
+### 2.1 API Route 구현 (Next.js 예시)
+
+ChatUI는 `/api/chat`으로 요청을 보냅니다. SSE 스트리밍 응답을 반환해야 합니다.
+
+```typescript
+// app/api/chat/route.ts
+import { NextRequest } from 'next/server'
+
+interface ChatRequest {
+  messages: { role: 'user' | 'assistant' | 'system'; content: string }[]
+  model: string
+  provider: 'ollama' | 'devdive' | 'openai'
+  apiKey?: string
+}
+
+export async function POST(request: NextRequest) {
+  const { messages, model, provider, apiKey } = await request.json() as ChatRequest
+
+  // DevDive Gateway 예시
+  if (provider === 'devdive') {
+    const response = await fetch(`https://prd-gtw.devdive.ai/model/text-generation/v1/${model}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-API-KEY': apiKey || process.env.DEVDIVE_API_KEY!,
+      },
+      body: JSON.stringify({
+        prompt: messages.filter(m => m.role !== 'system').map(m =>
+          `${m.role === 'user' ? 'User' : 'Assistant'}: ${m.content}`
+        ).join('\n\n'),
+        system_prompt: messages.find(m => m.role === 'system')?.content || '',
+      }),
+    })
+
+    const data = await response.json()
+
+    // SSE 스트림으로 변환
+    const stream = new ReadableStream({
+      start(controller) {
+        const encoder = new TextEncoder()
+        const text = data.content.text
+
+        // 청크 단위로 전송 (스트리밍 효과)
+        let index = 0
+        const chunkSize = 10
+
+        const sendChunk = () => {
+          if (index < text.length) {
+            const chunk = text.slice(index, index + chunkSize)
+            controller.enqueue(encoder.encode(`data: ${JSON.stringify({ content: chunk })}\n\n`))
+            index += chunkSize
+            setTimeout(sendChunk, 20)
+          } else {
+            controller.enqueue(encoder.encode('data: [DONE]\n\n'))
+            controller.close()
+          }
+        }
+
+        sendChunk()
+      },
+    })
+
+    return new Response(stream, {
+      headers: {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        'Connection': 'keep-alive',
+      },
+    })
+  }
+
+  // 다른 프로바이더 처리...
+}
+```
+
+### 2.2 설정 모달 구현
+
+ChatUI는 헤더에 설정 버튼을 제공하지만, **설정 모달은 사용하는 측에서 구현해야 합니다**.
+
+```tsx
+import { ChatUI, useChatUI, PersonalizationConfig } from '@gendive/chatllm/react'
+import { useState } from 'react'
+
+function App() {
+  const [settingsOpen, setSettingsOpen] = useState(false)
+  const [personalization, setPersonalization] = useState<PersonalizationConfig>({
+    responseStyle: {
+      warmth: 'medium',
+      enthusiasm: 'medium',
+      emojiUsage: 'low',
+      formatting: 'default',
+      verbosity: 'balanced',
+    },
+    userProfile: {
+      nickname: '',
+      occupation: '',
+      additionalInfo: '',
+    },
+    useMemory: true,
+    language: 'auto',
+  })
+
+  return (
+    <>
+      <ChatUI
+        models={models}
+        personalization={personalization}
+        // 설정 버튼 클릭 시 모달 열기
+        // ChatUI 내부에서 openSettings 호출됨
+      />
+
+      {/* 설정 모달 - 직접 구현 */}
+      {settingsOpen && (
+        <SettingsModal
+          personalization={personalization}
+          onSave={(newConfig) => {
+            setPersonalization(newConfig)
+            setSettingsOpen(false)
+          }}
+          onClose={() => setSettingsOpen(false)}
+        />
+      )}
+    </>
+  )
+}
+
+// 설정 모달 컴포넌트 예시
+function SettingsModal({ personalization, onSave, onClose }) {
+  const [config, setConfig] = useState(personalization)
+
+  return (
+    <div className="modal-overlay">
+      <div className="modal">
+        <h2>설정</h2>
+
+        {/* 사용자 프로필 */}
+        <section>
+          <h3>프로필</h3>
+          <input
+            placeholder="닉네임"
+            value={config.userProfile.nickname || ''}
+            onChange={(e) => setConfig({
+              ...config,
+              userProfile: { ...config.userProfile, nickname: e.target.value }
+            })}
+          />
+          <input
+            placeholder="직업/역할"
+            value={config.userProfile.occupation || ''}
+            onChange={(e) => setConfig({
+              ...config,
+              userProfile: { ...config.userProfile, occupation: e.target.value }
+            })}
+          />
+        </section>
+
+        {/* 응답 스타일 */}
+        <section>
+          <h3>응답 스타일</h3>
+          <label>
+            따뜻함
+            <select
+              value={config.responseStyle.warmth}
+              onChange={(e) => setConfig({
+                ...config,
+                responseStyle: { ...config.responseStyle, warmth: e.target.value as any }
+              })}
+            >
+              <option value="low">사무적</option>
+              <option value="medium">보통</option>
+              <option value="high">친근함</option>
+            </select>
+          </label>
+          {/* 다른 스타일 옵션들... */}
+        </section>
+
+        <div className="modal-actions">
+          <button onClick={onClose}>취소</button>
+          <button onClick={() => onSave(config)}>저장</button>
+        </div>
+      </div>
+    </div>
+  )
+}
+```
+
+### 2.3 API 키 입력 UI
+
+외부 프로바이더(DevDive, OpenAI 등) 사용 시 API 키 입력이 필요합니다.
+
+```tsx
+function App() {
+  const [apiKey, setApiKey] = useState(() =>
+    localStorage.getItem('devdive_api_key') || ''
+  )
+
+  // API 키가 없으면 입력 화면 표시
+  if (!apiKey) {
+    return (
+      <div className="api-key-setup">
+        <h2>API 키 설정</h2>
+        <p>DevDive API 키를 입력해주세요</p>
+        <input
+          type="password"
+          placeholder="API Key"
+          onChange={(e) => {
+            const key = e.target.value
+            setApiKey(key)
+            localStorage.setItem('devdive_api_key', key)
+          }}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <ChatUI
+      models={models}
+      apiKey={apiKey}
+    />
+  )
+}
+```
+
+---
+
+## 3. Headless Hook 사용 (커스텀 UI)
+
+완전히 커스텀한 UI가 필요한 경우 `useChatUI` hook을 사용합니다.
+
+```tsx
+import { useChatUI } from '@gendive/chatllm/react'
+
+function CustomChatUI() {
+  const {
+    // State
+    messages,
+    input,
+    isLoading,
+    selectedModel,
+    sessions,
+    currentSession,
+    quotedText,
+    selectedAction,
+
+    // Actions
+    setInput,
+    sendMessage,
+    stopGeneration,
+    newSession,
+    selectSession,
+    deleteSession,
+    setModel,
+    setQuotedText,
+    setSelectedAction,
+    copyMessage,
+    regenerate,
+    updatePersonalization,
+  } = useChatUI({
+    models: [
+      { id: 'gpt-5', name: 'GPT-5', provider: 'devdive' },
+    ],
+    apiKey: 'your-api-key',
+    apiEndpoint: '/api/chat',
+  })
+
+  return (
+    <div>
+      {/* 완전히 커스텀한 UI 구현 */}
+      <div className="messages">
+        {messages.map(msg => (
+          <div key={msg.id} className={msg.role}>
+            {msg.content}
+          </div>
+        ))}
+      </div>
+
+      <form onSubmit={(e) => { e.preventDefault(); sendMessage(); }}>
+        <input
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="메시지 입력..."
+        />
+        <button type="submit" disabled={isLoading}>
+          {isLoading ? '생성 중...' : '전송'}
+        </button>
+      </form>
+    </div>
+  )
+}
+```
+
+---
+
+## 4. 개별 컴포넌트 사용
+
+ChatUI의 하위 컴포넌트들을 개별적으로 사용할 수 있습니다.
+
+```tsx
+import {
+  ChatSidebar,
+  ChatHeader,
+  ChatInput,
+  MessageList,
+  EmptyState,
+  MemoryPanel,
+} from '@gendive/chatllm/react'
+
+// 예: 메시지 목록만 사용
+<MessageList
+  messages={messages}
+  isLoading={isLoading}
+  onCopy={(content, id) => copyToClipboard(content)}
+  onEdit={(message) => startEdit(message)}
+  onRegenerate={(id) => regenerateMessage(id)}
+  onQuote={(text) => setQuotedText(text)}
+  copiedId={copiedId}
+  editingId={editingId}
+/>
+
+// 예: 입력창만 사용
+<ChatInput
+  value={input}
+  onChange={setInput}
+  onSubmit={handleSubmit}
+  onStop={stopGeneration}
+  isLoading={isLoading}
+  quotedText={quotedText}
+  onClearQuote={() => setQuotedText(null)}
+  selectedAction={selectedAction}
+  onClearAction={() => setSelectedAction(null)}
+  actions={actions}
+/>
+
+// 예: 메모리 패널만 사용
+<MemoryPanel
+  items={memoryItems}
+  contextSummary={contextSummary}
+  isOpen={isOpen}
+  onToggle={() => setIsOpen(!isOpen)}
+  onDelete={(id) => deleteMemoryItem(id)}
+/>
+```
+
+---
+
+## 5. 주요 기능 설명
+
+### 5.1 액션 (Actions)
+
+사용자가 입력창에서 선택할 수 있는 기능 블록입니다.
+
+```tsx
+const customActions = [
+  {
+    id: 'webSearch',
+    label: '웹 검색',
+    icon: 'search',        // 아이콘 종류: search, image, code, document
+    description: '웹에서 정보를 검색합니다',
+    systemPrompt: '웹 검색 결과를 기반으로 답변해주세요.',
+  },
+  {
+    id: 'translate',
+    label: '번역',
+    icon: 'document',
+    description: '텍스트를 번역합니다',
+    systemPrompt: '다음 텍스트를 한국어로 번역해주세요.',
+  },
+]
+
+<ChatUI models={models} actions={customActions} />
+```
+
+**자동 감지**: 입력 내용에 따라 액션이 자동으로 선택됩니다.
+- "검색해줘", "찾아줘" → 웹 검색
+- "그림 그려줘", "이미지 만들어" → 이미지 생성
+- "코드 분석", "버그 찾아" → 코드 분석
+- "요약해줘", "정리해" → 요약
+
+### 5.2 컨텍스트 압축
+
+대화가 길어지면 자동으로 이전 대화를 요약하여 컨텍스트를 관리합니다.
+
+```tsx
+<ChatUI
+  models={models}
+  contextCompressionThreshold={20}  // 20개 메시지 초과 시 압축
+  keepRecentMessages={6}            // 최근 6개 메시지는 유지
+/>
+```
+
+### 5.3 텍스트 선택 인용
+
+메시지 내 텍스트를 드래그하면 "인용하기" 버튼이 나타납니다.
+클릭하면 입력창에 인용 칩이 추가됩니다.
+
+### 5.4 메모리 패널
+
+우측 하단의 AI 아이콘을 클릭하면 메모리 패널이 열립니다.
+- 대화 컨텍스트 요약
+- 사용자 선호 정보
+- 학습된 정보
+
+### 5.5 다크 모드
+
+```tsx
+<ChatUI
+  models={models}
+  theme={{ mode: 'dark' }}
+/>
+```
+
+---
+
+## 6. 타입 정의
+
+### ModelConfig
+
+```typescript
+interface ModelConfig {
+  id: string           // 모델 ID (API 호출 시 사용)
+  name: string         // 표시 이름
+  provider: 'ollama' | 'devdive' | 'openai' | 'anthropic' | 'gemini'
+  description?: string // 설명 (선택)
+}
+```
+
+### PersonalizationConfig
+
+```typescript
+interface PersonalizationConfig {
+  responseStyle: {
+    warmth: 'low' | 'medium' | 'high'      // 따뜻함
+    enthusiasm: 'low' | 'medium' | 'high'  // 열정
+    emojiUsage: 'low' | 'medium' | 'high'  // 이모지 사용
+    formatting: 'minimal' | 'default' | 'rich'  // 포맷팅
+    verbosity: 'concise' | 'balanced' | 'detailed'  // 응답 길이
+  }
+  userProfile: {
+    nickname?: string       // 사용자 닉네임
+    occupation?: string     // 직업/역할
+    additionalInfo?: string // 추가 정보
+    preferredLanguage?: string
+  }
+  useMemory: boolean   // 메모리 사용 여부
+  language: string     // 응답 언어 ('auto' | 'ko' | 'en' 등)
+}
+```
+
+### ActionItem
+
+```typescript
+interface ActionItem {
+  id: string
+  label: string        // UI에 표시할 레이블
+  icon: string         // 아이콘 종류
+  description: string  // 설명
+  systemPrompt?: string // AI에게 전달할 시스템 프롬프트
+}
+```
+
+---
+
+## 7. CSS 커스터마이징
+
+CSS 변수를 오버라이드하여 스타일을 커스터마이즈할 수 있습니다.
+
+```css
+.chatllm-root {
+  --chatllm-primary: #3b82f6;
+  --chatllm-primary-hover: #2563eb;
+  --chatllm-primary-light: #dbeafe;
+  --chatllm-bg: #ffffff;
+  --chatllm-bg-secondary: #f9fafb;
+  --chatllm-text: #1f2937;
+  --chatllm-text-muted: #6b7280;
+  --chatllm-border: #e5e7eb;
+  /* ... */
+}
+```
+
+---
+
+## 8. Demo 기능 가이드
+
+demo 폴더에 포함된 Next.js 앱에서 제공하는 전체 기능 목록입니다.
+
+### 8.1 세션 관리 (사이드바)
+
+```
+┌─────────────────────────────────────────┐
+│  ⚡ devdive-chatLLM     [새 대화] [☰]   │
+├─────────────────────────────────────────┤
+│  🔍 대화 검색...                         │
+├─────────────────────────────────────────┤
+│  📅 오늘                                 │
+│  ├─ 코드 리뷰 요청...            [🗑]   │
+│  └─ API 설계 질문...             [🗑]   │
+│                                         │
+│  📅 어제                                 │
+│  └─ 블로그 글 작성...            [🗑]   │
+└─────────────────────────────────────────┘
+```
+
+- **새 대화 버튼**: 새 세션 생성
+- **세션 목록**: 날짜별 그룹핑, 클릭으로 전환
+- **세션 삭제**: 휴지통 아이콘 클릭
+- **자동 제목 생성**: 첫 번째 사용자 메시지로 제목 생성
+- **localStorage 저장**: 브라우저 새로고침 후에도 유지
+
+### 8.2 멀티 모델 지원
+
+```typescript
+// 헤더의 모델 선택 드롭다운
+const AVAILABLE_MODELS = [
+  // Ollama (로컬) - localhost:11434
+  { id: 'qwen3:4b', name: 'Qwen3 4B', provider: 'ollama' },
+  { id: 'llama3.1:8b', name: 'Llama 3.1 8B', provider: 'ollama' },
+
+  // DevDive Gateway (외부) - API 키 필요
+  { id: 'gpt-5', name: 'GPT-5', provider: 'devdive' },
+  { id: 'gpt-4o-mini', name: 'GPT-4o Mini', provider: 'devdive' },
+  { id: 'claude-sonnet-4', name: 'Claude Sonnet 4', provider: 'devdive' },
+]
+```
+
+- **Ollama**: 로컬에서 실행되는 모델 (API 키 불필요)
+- **DevDive Gateway**: 외부 API (API 키 필요, 설정에서 입력)
+
+### 8.3 액션 기능 (Actions)
+
+입력창 좌측의 `+` 버튼 또는 자동 감지로 액션을 선택합니다.
+
+```
+┌──────────────────────────────────────┐
+│  [+ 액션]  메시지를 입력하세요...     │
+│                                      │
+│  ┌─────────────────────────────────┐ │
+│  │ 🔍 웹 검색                       │ │
+│  │    웹에서 정보를 검색합니다      │ │
+│  ├─────────────────────────────────┤ │
+│  │ 🖼 이미지 생성                   │ │
+│  │    프롬프트로 이미지를 생성합니다│ │
+│  ├─────────────────────────────────┤ │
+│  │ 💻 코드 분석                     │ │
+│  │    코드를 분석하고 설명합니다    │ │
+│  ├─────────────────────────────────┤ │
+│  │ 📄 요약                          │ │
+│  │    긴 텍스트를 요약합니다        │ │
+│  └─────────────────────────────────┘ │
+└──────────────────────────────────────┘
+```
+
+**자동 감지 키워드:**
+| 액션 | 감지 키워드 |
+|------|-------------|
+| 웹 검색 | "검색", "찾아", "search", "구글", "최신", "알려" |
+| 이미지 생성 | "이미지", "그림", "그려", "image", "draw" |
+| 코드 분석 | "코드", "분석", "리뷰", "디버그", "에러" |
+| 요약 | "요약", "summarize", "줄여", "핵심", "정리" |
+
+선택된 액션은 입력창에 칩으로 표시되고, `systemPrompt`가 AI에게 전달됩니다.
+
+### 8.4 텍스트 선택 인용
+
+메시지 내 텍스트를 드래그하면 인용 팝업이 나타납니다.
+
+```
+AI: React는 컴포넌트 기반의 UI 라이브러리입니다.
+    ^^^^^^^^^^^^^^^^^^^^^^^^^ (드래그)
+         ┌─────────────┐
+         │ 📝 인용하기  │ ← 클릭
+         └─────────────┘
+
+┌──────────────────────────────────────┐
+│ ┌────────────────────────────────┐   │
+│ │ 📌 "컴포넌트 기반의 UI 라이브러리" │ [✕] │
+│ └────────────────────────────────┘   │
+│                                      │
+│ 이것에 대해 더 자세히 설명해줘...     │
+└──────────────────────────────────────┘
+```
+
+인용 칩이 입력창 위에 표시되고, 메시지와 함께 전송됩니다.
+
+### 8.5 개인화 설정 (Settings)
+
+헤더의 설정 버튼 클릭 시 모달이 열립니다.
+
+**일반 탭:**
+- 테마: 라이트/다크
+- 언어: 자동/한국어/영어/일본어
+
+**개인화 탭:**
+```
+┌────────────────────────────────────────┐
+│ 📝 사용자 프로필                        │
+├────────────────────────────────────────┤
+│ 닉네임: [민수        ]                 │
+│ 직업:   [개발자      ]                 │
+│ 추가정보: [TypeScript 선호]            │
+├────────────────────────────────────────┤
+│ 🎨 응답 스타일                          │
+├────────────────────────────────────────┤
+│ 따뜻함:    [낮음 | 보통 | 높음]         │
+│ 열정:      [낮음 | 보통 | 높음]         │
+│ 이모지:    [적게 | 보통 | 많이]         │
+│ 상세함:    [간결 | 균형 | 상세]         │
+└────────────────────────────────────────┘
+```
+
+설정된 정보는 시스템 프롬프트로 자동 변환됩니다:
+```
+사용자의 이름/닉네임: 민수
+사용자의 직업: 개발자
+사용자 추가 정보: TypeScript 선호
+응답 스타일: 따뜻하고 친근하게, 핵심만 간결하게 응답해주세요.
+```
+
+**데이터 관리 탭:**
+- 대화 기록 내보내기 (JSON)
+- 전체 데이터 삭제
+
+### 8.6 컨텍스트 압축
+
+대화가 길어지면 자동으로 이전 대화를 요약합니다.
+
+```
+┌─────────────────────────────────────────┐
+│ 📋 컨텍스트 요약됨                       │
+│ "사용자는 React 프로젝트에서 상태 관리를 │
+│  Redux에서 Zustand로 마이그레이션 중..."  │
+└─────────────────────────────────────────┘
+```
+
+- **임계값**: 20개 메시지 초과 시 압축
+- **유지 메시지**: 최근 6개 메시지는 원본 유지
+- **압축 저장**: `contextSummary` 필드에 저장
+
+### 8.7 메시지 액션
+
+각 메시지에 호버하면 액션 버튼이 나타납니다.
+
+**사용자 메시지:**
+```
+┌────────────────────────────────────┐
+│ 나: React 상태관리 방법 알려줘     │ [📋 복사] [✏️ 편집]
+└────────────────────────────────────┘
+```
+
+**AI 응답 메시지:**
+```
+┌────────────────────────────────────┐
+│ AI: Redux, Zustand, Jotai 등이...  │ [📋 복사] [🔄 재생성] [🤖 다른 모델]
+└────────────────────────────────────┘
+```
+
+- **복사**: 클립보드에 복사
+- **편집**: 사용자 메시지 수정 후 재전송
+- **재생성**: 동일 질문에 새 응답 생성
+- **다른 모델로 질문**: 다른 LLM에게 동일 질문
+
+### 8.8 다른 모델로 비교하기
+
+"다른 모델로 질문" 클릭 시 모델 선택 드롭다운이 나타납니다.
+
+```
+┌────────────────────────────────────────┐
+│ AI (GPT-4o Mini): Redux는...           │
+│                                        │
+│ ┌─ 다른 모델 비교 ─────────────────────┐│
+│ │ GPT-5 응답:                         ││
+│ │ "상태 관리 방법으로는..."           ││
+│ ├─────────────────────────────────────┤│
+│ │ Claude Sonnet 4 응답:               ││
+│ │ "React에서 상태를 관리할 때는..."    ││
+│ └─────────────────────────────────────┘│
+│                                        │
+│ [◀ 이전] [2/3] [다음 ▶]                │
+└────────────────────────────────────────┘
+```
+
+`alternatives` 배열에 다른 모델의 응답이 저장됩니다.
+
+### 8.9 시작 화면 템플릿
+
+새 세션에서 빈 대화창에 추천 템플릿이 표시됩니다.
+
+```
+┌───────────────────────────────────────────────┐
+│          무엇을 도와드릴까요?                  │
+│                                               │
+│  ┌─────────────┐  ┌─────────────┐            │
+│  │ ✍️ AI 글쓰기 │  │ 💻 코드 리뷰 │            │
+│  │ 블로그, 이메일│  │ 분석 및 개선 │            │
+│  └─────────────┘  └─────────────┘            │
+│  ┌─────────────┐  ┌─────────────┐            │
+│  │ 🌐 번역 도움 │  │ 📋 요약 정리 │            │
+│  │ 자연스러운   │  │ 핵심만 요약  │            │
+│  └─────────────┘  └─────────────┘            │
+└───────────────────────────────────────────────┘
+```
+
+클릭하면 해당 템플릿의 프롬프트가 입력창에 자동 입력됩니다.
+
+### 8.10 API 키 관리
+
+DevDive 프로바이더 사용 시 API 키가 필요합니다.
+
+```
+설정 > 일반 > API 키
+┌─────────────────────────────────────┐
+│ DevDive API Key                     │
+│ [••••••••••••••••••••••••] [저장]   │
+│                                     │
+│ ⚠️ API 키는 브라우저에 저장됩니다    │
+└─────────────────────────────────────┘
+```
+
+- `localStorage`에 암호화 없이 저장
+- 프로덕션에서는 서버 사이드 프록시 권장
+
+---
+
+## 9. API Route 상세 (demo/api/chat)
+
+demo에서 사용하는 API route 구조입니다.
+
+### 요청 형식
+
+```typescript
+interface ChatRequest {
+  messages: {
+    role: 'user' | 'assistant' | 'system'
+    content: string
+  }[]
+  model: string        // 'qwen3:4b', 'gpt-5' 등
+  provider: 'ollama' | 'devdive'
+  apiKey?: string      // DevDive용 API 키
+}
+```
+
+### 응답 형식 (SSE)
+
+```
+data: {"content": "안녕"}
+
+data: {"content": "하세요"}
+
+data: {"content": "!"}
+
+data: [DONE]
+```
+
+### Ollama 호출 예시
+
+```typescript
+// localhost:11434/api/chat로 스트리밍 요청
+const response = await fetch('http://localhost:11434/api/chat', {
+  method: 'POST',
+  body: JSON.stringify({
+    model: 'qwen3:4b',
+    messages: [...],
+    stream: true,
+  }),
+})
+```
+
+### DevDive Gateway 호출 예시
+
+```typescript
+// DevDive Gateway API
+const response = await fetch(
+  `https://prd-gtw.devdive.ai/model/text-generation/v1/${model}`,
+  {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-API-KEY': apiKey,
+    },
+    body: JSON.stringify({
+      prompt: '...',
+      system_prompt: '...',
+      max_tokens: 2000,
+      temperature: 0.7,
+    }),
+  }
+)
+```
+
+---
+
+## 라이선스
+
+MIT