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はその長さです - 短い動画ではチャンク分割のステップを完全にスキップするかどうかの判断に使えます。

長い文字起こしは、1つのプロンプトで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個のチャンクの文字起こしを1つずつ要約すると、10個すべてを同時に要約するのに比べて10倍の時間がかかります。

チャンクの要約は今や1つのプロンプトに一緒に収まるほど短いので、2つ目のチェーンでそれらを最終結果にまとめます:

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パターンが内部で行っていることそのものです - 古い形式のヘルパーチェーンを使う代わりにここで明示的に書いているのは、要約チェーンのヘルパーAPIがLangChainのバージョン間で変わってきたため、シンプルなLCELプリミティブの方が構築する土台として安定しているからです。

上記の文字起こし取得ステップは、このパイプラインの中で本番環境になると本当に難しくなる唯一の部分です - 自前でホストするスクレイピングライブラリは、クラウドサーバーにデプロイした途端にブロックされることがよくあります。ホスト型のYouTube文字起こしAPIは、まさにこのステップを機能させ続けるために作られており、パイプラインの残りの部分はそれを気にする必要がありません。