← Lecture Note

E

APPENDIX · 부록

학습자 보일러플레이트

GitHub repo 링크

처음부터 똑같이 시작할 수 있는 보일러플레이트입니다. 이 강의 사이트와 동일한 스택으로, Claude Code에 프롬프트로 시켜 0에서 만드는 흐름을 정리했습니다.

1) 프로젝트 시작

npx create-next-app@latest my-agent --ts --tailwind --app --no-src-dir --import-alias "@/*" --use-npm --yes
cd my-agent
npm i -g @anthropic-ai/claude-code   # 없으면
claude                                # 프로젝트 폴더에서 Claude Code 실행

2) 핵심 의존성

npm i @anthropic-ai/sdk openai @supabase/supabase-js react-markdown remark-gfm

3) 권장 디렉토리 구조

app/
  page.tsx                # 홈
  api/{chat,tts,stt}/route.ts   # 에이전트 백엔드
lib/
  llm.ts        # callLLM() — Claude 우선 + OpenAI 폴백
  embed.ts      # text-embedding-3-small + 코사인
  rag.ts        # in-memory 검색 (또는 supabase pgvector)
  supabase.ts
content/
  *.md          # 지식베이스
  embeddings.json   # npm run embed 산출물
components/
  Tutor.tsx     # 음성 챗 위젯
scripts/
  build-embeddings.ts

4) Claude Code 시작 프롬프트 (그대로 붙여넣기)

"Next.js 16 App Router + TS + Tailwind 프로젝트에
1) lib/llm.ts callLLM() (Claude 우선, OpenAI 폴백)
2) text-embedding-3-small 임베딩 + 코사인 in-memory RAG
3) app/api/chat 라우트(RAG + 출처 인용 + 환각 차단)
4) 음성 챗 위젯(ElevenLabs STT/TTS)
까지 만들어줘. 환경변수는 .env.local 로."

5) 배포

vercel link && vercel env pull
vercel --prod

부트스트랩 vs 이 강의

이 강의를 M5(Claude Code 셋업)부터 M13(배포)까지 따라가면, 위 구조가 프롬프트로 채워집니다.
외부 서비스 키는 부록 A, .env.local은 부록 B, 막히면 부록 C.

핵심 정리

스택을 통일(Next 16 · TS · Claude/OpenAI · 코사인 RAG · ElevenLabs · Vercel)하면 어떤 도메인이든 같은 골격으로 시작.
손코딩이 아니라 프롬프트로 채운다 — 그게 이 강의의 방식.

Agent

Agent