Build an AI YouTube Video Summarizer with LangChain and Next.js

이 튜토리얼은 현재의 LangChain JS 패키지 분리 구조를 사용합니다 - 핵심 프리미티브, OpenAI 연동, text splitter가 각각 자신만의 패키지에 있습니다:

npm install langchain @langchain/core @langchain/openai @langchain/textsplitters

대시보드에서 키를 발급받고(100 무료 크레딧, 카드 불필요), Next.js 라우트 핸들러에서 자막 엔드포인트를 호출합니다:

// app/api/summarize/route.ts
import { NextResponse } from 'next/server';

async function fetchTranscript(videoId: string) {
  const res = await fetch(
    `https://getyoutubetranscript.com/api/v1/transcript?v=${videoId}`,
    { headers: { Authorization: `Bearer ${process.env.GETYOUTUBETRANSCRIPT_API_KEY}` } }
  );
  const json = await res.json();
  if (!json.success) throw new Error(json.message);
  // json.data.transcript is the full plain-text transcript,
  // json.data.word_count is its length in words.
  return json.data as { transcript: string; word_count: number; title: string };
}

transcript는 전체 순수 텍스트 자막이고 word_count는 그 길이입니다 - 짧은 영상에서 청크 분할 단계를 아예 건너뛸지 결정할 때 유용합니다.

긴 자막은 하나의 프롬프트로 LLM에 보내기 편안한 분량을 쉽게 넘어서므로 먼저 나눕니다. RecursiveCharacterTextSplitter는 문단, 그다음 문장, 그다음 단어 순으로 끊으려 시도해서, 문장 중간에서 잘리지 않고 청크가 읽기 좋게 유지됩니다:

import { RecursiveCharacterTextSplitter } from '@langchain/textsplitters';

const splitter = new RecursiveCharacterTextSplitter({
  chunkSize: 4000,
  chunkOverlap: 200,
});

const chunks = await splitter.splitText(transcript);
// A 20-minute video is usually 1-2 chunks; a 2-hour one might be 8-10.

chunkOverlap은 한 청크의 끝부분 맥락을 조금 다음 청크의 시작 부분에도 남겨서, 경계에서 나뉜 문장이 어느 쪽에서도 손실되지 않게 합니다.

ChatPromptTemplate + 모델 + StringOutputParser를 파이프로 연결하는 것(LangChain의 표현 언어, LCEL)이 체인을 만드는 현재의 안정적인 방법입니다 - 각 청크는 병렬로 자신만의 짧은 요약을 얻습니다:

import { ChatOpenAI } from '@langchain/openai';
import { ChatPromptTemplate } from '@langchain/core/prompts';
import { StringOutputParser } from '@langchain/core/output_parsers';

const model = new ChatOpenAI({ model: 'gpt-4.1-mini', temperature: 0 });

const chunkPrompt = ChatPromptTemplate.fromTemplate(
  'Summarize this part of a video transcript in 3-4 sentences, keeping any concrete facts, numbers, or names:\n\n{chunk}'
);
const chunkChain = chunkPrompt.pipe(model).pipe(new StringOutputParser());

const chunkSummaries = await Promise.all(
  chunks.map((chunk) => chunkChain.invoke({ chunk }))
);

Promise.all로 병렬 실행하는 것은 지연 시간에 중요합니다: 10개 청크짜리 자막을 하나씩 요약하면 10개를 동시에 요약하는 것보다 10배 더 오래 걸립니다.

청크 요약들은 이제 하나의 프롬프트에 함께 들어갈 만큼 짧아졌으므로, 두 번째 체인이 이를 최종 결과로 합칩니다:

const finalPrompt = ChatPromptTemplate.fromTemplate(
  'These are summaries of consecutive parts of the same video transcript, titled "{title}".\n' +
  'Combine them into one coherent summary (a short paragraph, then 3-5 key takeaways as bullet points):\n\n{summaries}'
);
const finalChain = finalPrompt.pipe(model).pipe(new StringOutputParser());

const summary = await finalChain.invoke({
  title,
  summaries: chunkSummaries.join('\n\n'),
});

return NextResponse.json({ summary });

이 2단계 구조(먼저 청크를 요약하고, 그다음 요약들을 요약)는 LangChain 자체의 map-reduce 패턴이 내부적으로 하는 일과 정확히 같습니다 - 레거시 헬퍼 체인을 쓰는 대신 여기서는 명시적으로 풀어썼는데, summarization chain 헬퍼 API가 LangChain 버전마다 바뀌어 왔고 순수한 LCEL 프리미티브가 더 안정적인 기반이기 때문입니다.

위의 자막 가져오기 단계는 이 파이프라인에서 프로덕션 환경에서 실제로 더 어려워지는 유일한 부분입니다 - 자체 호스팅한 스크래핑 라이브러리는 클라우드 서버에 배포하는 순간 차단되는 경우가 흔합니다. 호스팅된 YouTube 자막 API는 바로 이 단계를 계속 작동하게 만들도록 설계되어 있어, 파이프라인의 나머지 부분이 이를 신경 쓸 필요가 없습니다.