@kood/claude-code 0.2.5 → 0.3.1

package/templates/tanstack-start/docs/library/ai-sdk/hooks.md

@@ -1,472 +0,0 @@
-# AI SDK - React Hooks
-
-> **상위 문서**: [AI SDK](./index.md)
-
----
-
-## 개요
-
-AI SDK는 React 애플리케이션을 위한 훅을 제공합니다:
-- `useChat`: 채팅 인터페이스
-- `useCompletion`: 텍스트 완성
-- `useObject`: 구조화된 객체 생성 (실험적)
-
-```bash
-npm install @ai-sdk/react
-```
-
----
-
-## useChat
-
-채팅 인터페이스를 쉽게 구현할 수 있는 훅입니다.
-
-### 기본 사용
-
-```tsx
-'use client'
-
-import { useChat } from '@ai-sdk/react'
-
-export default function Chat() {
-  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
-    api: '/api/chat',
-  })
-
-  return (
-    <div>
-      {messages.map((m) => (
-        <div key={m.id}>
-          <strong>{m.role}:</strong> {m.content}
-        </div>
-      ))}
-
-      <form onSubmit={handleSubmit}>
-        <input
-          value={input}
-          onChange={handleInputChange}
-          placeholder="Type a message..."
-          disabled={isLoading}
-        />
-        <button type="submit" disabled={isLoading}>
-          {isLoading ? 'Sending...' : 'Send'}
-        </button>
-      </form>
-    </div>
-  )
-}
-```
-
-### 반환값
-
-```typescript
-const {
-  // 메시지 관련
-  messages,           // Message[] - 전체 메시지 목록
-  setMessages,        // 메시지 직접 설정
-
-  // 입력 관련
-  input,              // string - 현재 입력값
-  setInput,           // 입력값 직접 설정
-  handleInputChange,  // 입력 변경 핸들러
-
-  // 제출 관련
-  handleSubmit,       // 폼 제출 핸들러
-  append,             // 메시지 추가 및 전송
-  reload,             // 마지막 응답 재생성
-
-  // 상태 관련
-  isLoading,          // 응답 대기 중
-  error,              // 에러 객체
-  stop,               // 스트리밍 중단
-} = useChat()
-```
-
-### 메시지 타입
-
-```typescript
-interface Message {
-  id: string
-  role: 'user' | 'assistant' | 'system'
-  content: string
-  createdAt?: Date
-  toolInvocations?: ToolInvocation[]
-}
-```
-
-### API Route 설정
-
-```typescript
-// app/api/chat/route.ts
-import { streamText, convertToModelMessages } from 'ai'
-import { openai } from '@ai-sdk/openai'
-
-export async function POST(req: Request) {
-  const { messages } = await req.json()
-
-  const result = streamText({
-    model: openai('gpt-4o'),
-    messages: convertToModelMessages(messages),
-  })
-
-  return result.toUIMessageStreamResponse()
-}
-```
-
----
-
-## useChat 고급 기능
-
-### 초기 메시지
-
-```tsx
-const { messages } = useChat({
-  api: '/api/chat',
-  initialMessages: [
-    { id: '1', role: 'assistant', content: 'Hello! How can I help you?' },
-  ],
-})
-```
-
-### 동적 요청 데이터
-
-```tsx
-const [temperature, setTemperature] = useState(0.7)
-
-const { messages, handleSubmit } = useChat({
-  api: '/api/chat',
-  body: {
-    temperature,
-    userId: 'user-123',
-  },
-  headers: {
-    Authorization: `Bearer ${token}`,
-  },
-})
-```
-
-서버에서 추가 데이터 접근:
-
-```typescript
-// app/api/chat/route.ts
-export async function POST(req: Request) {
-  const { messages, temperature, userId } = await req.json()
-
-  const result = streamText({
-    model: openai('gpt-4o'),
-    messages: convertToModelMessages(messages),
-    temperature, // 동적 파라미터 사용
-  })
-
-  return result.toUIMessageStreamResponse()
-}
-```
-
-### 콜백 함수
-
-```tsx
-const { messages } = useChat({
-  api: '/api/chat',
-  onResponse: (response) => {
-    console.log('Received response:', response)
-  },
-  onFinish: (message) => {
-    console.log('Finished:', message)
-  },
-  onError: (error) => {
-    console.error('Error:', error)
-    toast.error('Something went wrong')
-  },
-})
-```
-
-### 메시지 직접 추가
-
-```tsx
-const { append } = useChat()
-
-// 사용자 메시지 추가 및 전송
-const handleClick = async () => {
-  await append({
-    role: 'user',
-    content: 'Tell me a joke',
-  })
-}
-```
-
-### 스트리밍 중단
-
-```tsx
-const { stop, isLoading } = useChat()
-
-return (
-  <button onClick={stop} disabled={!isLoading}>
-    Stop generating
-  </button>
-)
-```
-
-### 마지막 응답 재생성
-
-```tsx
-const { reload, messages } = useChat()
-
-return (
-  <button onClick={reload} disabled={messages.length === 0}>
-    Regenerate response
-  </button>
-)
-```
-
-### UI 업데이트 쓰로틀링
-
-대량의 스트리밍 데이터가 있을 때 성능 최적화:
-
-```tsx
-const { messages } = useChat({
-  api: '/api/chat',
-  experimental_throttle: 50, // 50ms마다 UI 업데이트
-})
-```
-
----
-
-## useCompletion
-
-단순 텍스트 완성을 위한 훅입니다.
-
-### 기본 사용
-
-```tsx
-'use client'
-
-import { useCompletion } from '@ai-sdk/react'
-
-export default function Completion() {
-  const { completion, input, handleInputChange, handleSubmit, isLoading } = useCompletion({
-    api: '/api/completion',
-  })
-
-  return (
-    <div>
-      <form onSubmit={handleSubmit}>
-        <input
-          value={input}
-          onChange={handleInputChange}
-          placeholder="Enter a prompt..."
-        />
-        <button type="submit" disabled={isLoading}>
-          Complete
-        </button>
-      </form>
-
-      <div>{completion}</div>
-    </div>
-  )
-}
-```
-
-### 반환값
-
-```typescript
-const {
-  completion,         // string - 생성된 텍스트
-  complete,           // 직접 완성 요청
-  input,              // string - 현재 입력값
-  setInput,           // 입력값 설정
-  handleInputChange,  // 입력 변경 핸들러
-  handleSubmit,       // 폼 제출 핸들러
-  isLoading,          // 로딩 상태
-  error,              // 에러 객체
-  stop,               // 스트리밍 중단
-  setCompletion,      // 완성 텍스트 직접 설정
-} = useCompletion()
-```
-
-### API Route
-
-```typescript
-// app/api/completion/route.ts
-import { streamText } from 'ai'
-import { openai } from '@ai-sdk/openai'
-
-export async function POST(req: Request) {
-  const { prompt } = await req.json()
-
-  const result = streamText({
-    model: openai('gpt-4o'),
-    prompt,
-  })
-
-  return result.toUIMessageStreamResponse()
-}
-```
-
-### 프로그래매틱 호출
-
-```tsx
-const { complete, completion } = useCompletion({
-  api: '/api/completion',
-})
-
-const handleClick = async () => {
-  await complete('Write a haiku about programming')
-}
-```
-
-### 콜백
-
-```tsx
-const { completion } = useCompletion({
-  onResponse: (response) => {
-    console.log('Response received')
-  },
-  onFinish: (prompt, completion) => {
-    console.log('Finished:', completion)
-  },
-  onError: (error) => {
-    console.error('Error:', error)
-  },
-})
-```
-
----
-
-## useObject (실험적)
-
-구조화된 객체를 스트리밍으로 생성합니다.
-
-### 기본 사용
-
-```tsx
-'use client'
-
-import { experimental_useObject as useObject } from '@ai-sdk/react'
-import { z } from 'zod'
-
-const schema = z.object({
-  name: z.string(),
-  age: z.number(),
-  hobbies: z.array(z.string()),
-})
-
-export default function ObjectGenerator() {
-  const { object, submit, isLoading, error } = useObject({
-    api: '/api/generate-object',
-    schema,
-  })
-
-  return (
-    <div>
-      <button onClick={() => submit('Generate a random person')} disabled={isLoading}>
-        Generate
-      </button>
-
-      {object && (
-        <pre>{JSON.stringify(object, null, 2)}</pre>
-      )}
-    </div>
-  )
-}
-```
-
-### API Route
-
-```typescript
-// app/api/generate-object/route.ts
-import { streamObject } from 'ai'
-import { openai } from '@ai-sdk/openai'
-import { z } from 'zod'
-
-const schema = z.object({
-  name: z.string(),
-  age: z.number(),
-  hobbies: z.array(z.string()),
-})
-
-export async function POST(req: Request) {
-  const { prompt } = await req.json()
-
-  const result = streamObject({
-    model: openai('gpt-4o'),
-    schema,
-    prompt,
-  })
-
-  return result.toTextStreamResponse()
-}
-```
-
----
-
-## 도구 호출 표시
-
-채팅에서 도구 호출을 표시하는 방법:
-
-```tsx
-'use client'
-
-import { useChat } from '@ai-sdk/react'
-
-export default function Chat() {
-  const { messages } = useChat({
-    api: '/api/chat',
-  })
-
-  return (
-    <div>
-      {messages.map((m) => (
-        <div key={m.id}>
-          <strong>{m.role}:</strong>
-
-          {/* 텍스트 콘텐츠 */}
-          {m.content}
-
-          {/* 도구 호출 표시 */}
-          {m.toolInvocations?.map((tool, i) => (
-            <div key={i} className="tool-call">
-              <strong>Tool: {tool.toolName}</strong>
-              <pre>Input: {JSON.stringify(tool.args, null, 2)}</pre>
-              {tool.state === 'result' && (
-                <pre>Result: {JSON.stringify(tool.result, null, 2)}</pre>
-              )}
-            </div>
-          ))}
-        </div>
-      ))}
-    </div>
-  )
-}
-```
-
----
-
-## 스트림 프로토콜
-
-AI SDK v5에서는 기본 스트림 프로토콜이 변경되었습니다:
-
-```tsx
-// v5 기본값 (data protocol)
-const { messages } = useChat()
-
-// 레거시 텍스트 프로토콜 사용
-const { messages } = useChat({
-  streamProtocol: 'text',
-})
-```
-
----
-
-## 타입 안전성
-
-```typescript
-import { useChat, Message } from '@ai-sdk/react'
-
-// 메시지 타입 확장
-interface CustomMessage extends Message {
-  customField?: string
-}
-
-// 타입 지정
-const { messages } = useChat<CustomMessage>()
-```

package/templates/tanstack-start/docs/library/ai-sdk/index.md

@@ -1,264 +0,0 @@
-# Vercel AI SDK
-
-> **Version**: 4.x / 5.x | TypeScript AI Toolkit
-
----
-
-## 🚀 Quick Reference (복사용)
-
-```typescript
-// 텍스트 생성
-import { generateText, streamText } from 'ai'
-import { openai } from '@ai-sdk/openai'
-
-const { text } = await generateText({
-  model: openai('gpt-4o'),
-  prompt: 'Hello, world!',
-})
-
-// 스트리밍
-const result = streamText({
-  model: openai('gpt-4o'),
-  prompt: 'Write a story.',
-})
-
-for await (const chunk of result.textStream) {
-  console.log(chunk)
-}
-
-// 구조화된 출력
-import { generateObject } from 'ai'
-import { z } from 'zod'
-
-const { object } = await generateObject({
-  model: openai('gpt-4o'),
-  schema: z.object({ name: z.string(), age: z.number() }),
-  prompt: 'Generate a user.',
-})
-
-// React Hook
-import { useChat } from '@ai-sdk/react'
-
-const { messages, input, handleInputChange, handleSubmit } = useChat()
-```
-
----
-
-## 문서 구조
-
-- [프로바이더 설정](./providers.md) - OpenAI, Anthropic, Google 등
-- [OpenRouter](./openrouter.md) - 통합 AI 게이트웨이 (수백 개 모델)
-- [텍스트 생성](./streaming.md) - generateText, streamText
-- [React Hooks](./hooks.md) - useChat, useCompletion
-- [Tool Calling](./tools.md) - 도구 정의 및 호출
-- [구조화된 출력](./structured-output.md) - generateObject, 스키마 기반 출력
-
----
-
-## 설치
-
-```bash
-# 코어 패키지
-npm install ai
-
-# 프로바이더 패키지 (필요한 것만 설치)
-npm install @ai-sdk/openai      # OpenAI
-npm install @ai-sdk/anthropic   # Anthropic (Claude)
-npm install @ai-sdk/google      # Google (Gemini)
-
-# React Hook 사용 시
-npm install @ai-sdk/react
-```
-
----
-
-## 핵심 개념
-
-### 프로바이더 (Providers)
-
-AI 모델 서비스와의 연결을 담당합니다.
-
-```typescript
-import { openai } from '@ai-sdk/openai'
-import { anthropic } from '@ai-sdk/anthropic'
-import { google } from '@ai-sdk/google'
-
-// 모델 인스턴스 생성
-const gpt4 = openai('gpt-4o')
-const claude = anthropic('claude-3-5-sonnet-20241022')
-const gemini = google('gemini-1.5-pro')
-```
-
-### 코어 함수
-
-| 함수 | 용도 | 반환 |
-|------|------|------|
-| `generateText` | 텍스트 생성 (비스트리밍) | `{ text, toolCalls, ... }` |
-| `streamText` | 텍스트 스트리밍 | `{ textStream, ... }` |
-| `generateObject` | 구조화된 객체 생성 | `{ object }` |
-| `streamObject` | 구조화된 객체 스트리밍 | `{ partialObjectStream }` |
-
-### React Hooks
-
-| Hook | 용도 |
-|------|------|
-| `useChat` | 채팅 인터페이스 |
-| `useCompletion` | 텍스트 완성 |
-| `useObject` | 구조화된 객체 생성 (실험적) |
-
----
-
-## 기본 사용법
-
-### 텍스트 생성
-
-```typescript
-import { generateText } from 'ai'
-import { openai } from '@ai-sdk/openai'
-
-const { text, usage } = await generateText({
-  model: openai('gpt-4o'),
-  prompt: 'Explain quantum computing in simple terms.',
-})
-
-console.log(text)
-console.log(`Tokens used: ${usage.totalTokens}`)
-```
-
-### 스트리밍
-
-```typescript
-import { streamText } from 'ai'
-import { openai } from '@ai-sdk/openai'
-
-const result = streamText({
-  model: openai('gpt-4o'),
-  prompt: 'Write a haiku about programming.',
-})
-
-for await (const chunk of result.textStream) {
-  process.stdout.write(chunk)
-}
-```
-
-### 채팅 (메시지 기반)
-
-```typescript
-import { generateText } from 'ai'
-import { openai } from '@ai-sdk/openai'
-
-const { text } = await generateText({
-  model: openai('gpt-4o'),
-  messages: [
-    { role: 'system', content: 'You are a helpful assistant.' },
-    { role: 'user', content: 'What is TypeScript?' },
-  ],
-})
-```
-
----
-
-## TanStack Start 통합
-
-### API Route 설정
-
-```typescript
-// app/api/chat/route.ts
-import { streamText, convertToModelMessages } from 'ai'
-import { openai } from '@ai-sdk/openai'
-
-export async function POST(req: Request) {
-  const { messages } = await req.json()
-
-  const result = streamText({
-    model: openai('gpt-4o'),
-    messages: convertToModelMessages(messages),
-  })
-
-  return result.toUIMessageStreamResponse()
-}
-```
-
-### 클라이언트 컴포넌트
-
-```tsx
-'use client'
-
-import { useChat } from '@ai-sdk/react'
-
-export default function Chat() {
-  const { messages, input, handleInputChange, handleSubmit } = useChat({
-    api: '/api/chat',
-  })
-
-  return (
-    <div>
-      {messages.map((m) => (
-        <div key={m.id}>
-          <strong>{m.role}:</strong> {m.content}
-        </div>
-      ))}
-
-      <form onSubmit={handleSubmit}>
-        <input value={input} onChange={handleInputChange} placeholder="Say something..." />
-        <button type="submit">Send</button>
-      </form>
-    </div>
-  )
-}
-```
-
----
-
-## 환경 변수
-
-```bash
-# .env
-OPENAI_API_KEY=sk-...
-ANTHROPIC_API_KEY=sk-ant-...
-GOOGLE_GENERATIVE_AI_API_KEY=...
-```
-
----
-
-## v5 주요 변경사항
-
-### 스트림 프로토콜 변경
-
-```typescript
-// v4 - text protocol 명시 필요
-const { messages } = useChat({ streamProtocol: 'text' })
-
-// v5 - 기본값이 data protocol
-const { messages } = useChat()
-```
-
-### 프로바이더 초기화 변경
-
-```typescript
-// v4 (deprecated)
-const openai = new OpenAI({ /* ... */ })
-
-// v5
-import { createOpenAI } from '@ai-sdk/openai'
-const openai = createOpenAI({ /* ... */ })
-```
-
-### responseMessages 제거
-
-```typescript
-// v4
-const { text, responseMessages } = await generateText({ ... })
-
-// v5
-const { text, response } = await generateText({ ... })
-const responseMessages = response.messages
-```
-
----
-
-## 참고 자료
-
-- [AI SDK 공식 문서](https://sdk.vercel.ai/docs)
-- [AI SDK GitHub](https://github.com/vercel/ai)
-- [AI SDK 예제](https://github.com/vercel/ai/tree/main/examples)