TypeScript で LangGraph 入門① ～LangChain と LangGraph～

はじめに

最近 LangGraph を使って AI エージェントを開発する機会があり、ある程度知見が溜まってきたので、少しずつ紹介していこうと思います。

LangChain や LangGraph に興味がある方や、TypeScript で AI エージェントを作ってみたい方の参考になれば幸いです。

この記事では LangChain と LangGraph について、それぞれ簡単にどのようなライブラリなのか紹介します。

LangChain とは

LangGraph は LangChain を拡張するライブラリなので、先に LangChain について説明します。

LangChain は ChatGPT などの LLM を組み込んだアプリケーションを 開発 するためのライブラリです。

LangChain は以下のように、鎖のように処理をつなげていくことでアプリケーションを作成します。

const chain = prompt.pipe(処理1).pipe(処理2).pipe(処理3)

様々な OpenAI の GPT系モデルや Anthropic の Claude などの API に対応したライブラリが用意されていて、モデルの種類を問わず同じような記述で使用できます。

GPT-4o

import { ChatOpenAI } from "@langchain/openai"

const model = new ChatOpenAI({
  apiKey: process.env.OPENAI_API_KEY,
  modelName: "gpt-4o",
})
const response = await model.invoke(new HumanMessage("Hello world!"))

Claude 3.7

import { ChatAnthropic } from "@langchain/anthropic"

const model = new ChatAnthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
  model: "claude-3-7-sonnet-20250219",
})
const response = await model.invoke(new HumanMessage("Hello world!"))

LangGraph とは

LangGraph は LangChain より柔軟に LLM を組み込んだアプリケーションが作成できるライブラリです。

LangChain が鎖状にアプリケーションを作成していくのに対し、 LangGraph はグラフ（有効グラフ）を作るようにアプリケーションを作成していきます。

下記の例では初めに agent ノードが実行され、条件に応じて tools ノードか __end__ (終了ノード) に分岐し、tools ノード に分岐した場合は tools ノード実行後、また agent ノードが実行されます。

const workflow = new StateGraph(MessagesAnnotation)
  .addNode("agent", callModel)
  .addEdge("__start__", "agent")
  .addNode("tools", toolNode)
  .addEdge("tools", "agent")
  .addConditionalEdges("agent", shouldContinue)

ちなみに、上記の図は LangGraph の機能で自動で出力したものです。（色だけ変更しました）

const app = workflow.compile()
app.getGraphAsync().then((graph) => console.log(graph.drawMermaid()))
/*
$ tsx main.ts
%%{init: {'flowchart': {'curve': 'linear'}}}%%
graph TD;
        __start__([<p>__start__</p>]):::first
        agent(agent)
        tools(tools)
        __end__([<p>__end__</p>]):::last
        __start__ --> agent;
        tools --> agent;
        agent -.-> tools;
        agent -.-> __end__;
        classDef default fill:#f2f0ff,line-height:1.2;
        classDef first fill-opacity:0;
        classDef last fill:#bfb6fc;
*/

LangGraph は Python と JavaScript(TypeScript) に対応しています。

以降の記事では TypeScript で LangGraph を使って AI エージェントを開発するために必要な知識を紹介していきます。

次の記事: LangGraph の 状態管理（予定）