개인 블로그에 AI 챗봇 붙이기: Claude API + RAG

// scripts/build-rag-chunks.ts
const CHUNK_SIZE = 500;
const OVERLAP = 50;
 
function chunkText(text: string): string[] {
  const words = text.split(/\s+/);
  const chunks: string[] = [];
 
  for (let i = 0; i < words.length; i += CHUNK_SIZE - OVERLAP) {
    chunks.push(words.slice(i, i + CHUNK_SIZE).join(" "));
    if (i + CHUNK_SIZE >= words.length) break;
  }
 
  return chunks;
}

{
  "slug": "cloudflare-d1-blog",
  "title": "Cloudflare D1으로 블로그에 좋아요, 댓글, 조회수 붙이기",
  "chunkIndex": 0,
  "content": "왜 Cloudflare였나 블로그를 새로 만들면서..."
}

function findRelevantChunks(chunks: RagChunk[], query: string, limit = 5): RagChunk[] {
  const queryWords = query.toLowerCase().split(/\s+/).filter((w) => w.length > 1);
 
  const scored = chunks.map((chunk) => {
    const text = `${chunk.title} ${chunk.content}`.toLowerCase();
    const score = queryWords.reduce((acc, word) => {
      const matches = text.match(new RegExp(word, "g"));
      return acc + (matches?.length ?? 0);
    }, 0);
    return { chunk, score };
  });
 
  return scored
    .filter((s) => s.score > 0)
    .sort((a, b) => b.score - a.score)
    .slice(0, limit)
    .map((s) => s.chunk);
}

// scripts/build-codebase-summary.ts
// 라우트, 컴포넌트, 게시글 목록, 구현된 기능을 자동 감지

// src/app/api/chat/route.ts
const ABOUT_CONTEXT = [
  "아래는 블로그 작성자 이승우(Seungwoo Lee) 소개예요.",
  "",
  "[경력]",
  ...careers.map((c) => `- ${c.company} ${c.role} (${c.period}): ${c.description}`),
  "",
  "[기술 스택]",
  ...skillCategories.map((c) => `- ${c.label}: ${c.skills.map((s) => s.name).join(", ")}`),
  // 주요 성과, 사이드 프로젝트도 같은 방식으로 이어붙여요
].join("\n");

const client = new Anthropic({ apiKey });
const encoder = new TextEncoder();
 
const stream = new ReadableStream<Uint8Array>({
  async start(controller) {
    const events = await client.messages.create({
      model: "claude-haiku-4-5-20251001",
      max_tokens: 1024,
      system,
      messages: messages.map((m) => ({ role: m.role, content: m.content })),
      stream: true,
    });
    for await (const event of events) {
      if (
        event.type === "content_block_delta" &&
        event.delta.type === "text_delta"
      ) {
        controller.enqueue(encoder.encode(event.delta.text));
      }
    }
    controller.close();
  },
});
 
return new Response(stream, {
  headers: { "Content-Type": "text/plain; charset=utf-8" },
});

const system: Anthropic.Messages.TextBlockParam[] = [
  { type: "text", text: SYSTEM_PROMPT },
  { type: "text", text: ABOUT_CONTEXT, cache_control: { type: "ephemeral" } },
];
 
if (cachedCodebaseSummary) {
  system.push({
    type: "text",
    text: cachedCodebaseSummary,
    cache_control: { type: "ephemeral" },
  } as Anthropic.Messages.TextBlockParam);
}
 
if (contextBlock) {
  system.push({ type: "text", text: contextBlock });
}

// 모바일 바텀시트 - 드래그 제스처
<motion.div
  drag="y"
  dragConstraints={{ top: 0, bottom: 0 }}
  dragElastic={{ top: 0, bottom: 0.6 }}
  onDragEnd={(_, info) => {
    if (info.offset.y > 100 || info.velocity.y > 300) {
      setOpen(false);
    }
  }}
>

// 처음 방식: 응답을 다 받은 뒤 문단별로 순차 fade-in
const blockVariants = {
  hidden: { opacity: 0, y: 6 },
  visible: { opacity: 1, y: 0, transition: { duration: 1 } },
};
 
function AnimatedMarkdown({ content }: { content: string }) {
  return (
    <motion.div
      initial="hidden"
      animate="visible"
      variants={{
        hidden: {},
        visible: { transition: { staggerChildren: 0.12 } },
      }}
    >
      <Markdown
        components={{
          p: ({ children }) => (
            <motion.p variants={blockVariants}>{children}</motion.p>
          ),
        }}
      >
        {content}
      </Markdown>
    </motion.div>
  );
}

const wordTransition = { duration: 0.4, ease: "easeOut" as const };
 
// 마크다운이 렌더한 텍스트를 단어 단위로 감싸 각각 페이드인한다.
// 문단·리스트 같은 블록 구조는 그대로라 레이아웃이 고정된다.
function fadeWords(children: ReactNode): ReactNode {
  if (typeof children === "string") {
    return children.split(/(\s+)/).map((part, i) =>
      part.trim() === "" ? part : (
        <motion.span
          key={i}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={wordTransition}
        >
          {part}
        </motion.span>
      ),
    );
  }
  // 볼드 같은 요소가 섞여 배열로 들어오면 문자열 조각만 재귀로 페이드한다
  if (Array.isArray(children)) {
    return children.map((child, i) =>
      typeof child === "string" ? (
        <Fragment key={i}>{fadeWords(child)}</Fragment>
      ) : (
        child
      ),
    );
  }
  return children;
}
 
const fadeComponents = {
  p: ({ children }) => <p>{fadeWords(children)}</p>,
  li: ({ children }) => <li>{fadeWords(children)}</li>,
};

// 매 프레임 남은 양의 일부만 더 보여줘 글자가 매끄럽게 이어지게 한다
displayed += Math.max(1, Math.ceil(remaining / 40));