マルチエージェントフローをLangGraph Cloudにデプロイする方法
Fiverr の技術リーダーが、LangGraph Cloud を活用して GPT Researcher のフロントエンドを Next.js で再構築し、マルチエージェントフローの運用方法を公開した。
キーポイント
GPT Researcher の進化と新フロントエンド
従来のシンプルな HTML/CSS から Next.js を使用した高機能なクライアントへ移行し、研究体験を最適化した。
LangGraph Cloud の活用によるマルチエージェント実装
AI エージェントが相互に協調・レビューを行う複雑なフローを、LangChain と LangGraph を用いて構築し、クラウド上でホストした。
コンテキスト認識と推論能力の強化
単なる RAG 実装から脱却し、問題解決のために文脈を考慮し推論を行うエージェントの実現に向けた技術的アプローチを示している。
重要な引用
GPT Researcher is an open-source autonomous agent designed for comprehensive online research on a variety of tasks.
LangGraph: a framework that could enable us to build out complex multi-agent flows where AI agents coordinate with other agents, bringing their unique perspectives and reviewing each other's work.
影響分析・編集コメントを表示
影響分析
この記事は、LangGraph Cloud の具体的な運用事例を示すことで、マルチエージェントシステムの構築とデプロイにおけるベストプラクティスを提示しています。特に、オープンソースプロジェクトがクラウドネイティブなアーキテクチャへ移行する際の参考となり、開発者コミュニティへの技術的インパクトは大きいと言えます。
編集コメント
LangGraph のクラウド機能を実際のビジネスプロジェクトでどう活用するか、具体的なアーキテクチャとフロントエンド連携の事例が得られる貴重な記事です。

※これはFiverrのテクニカルリード、Elisha Kramer氏によるゲストブログ記事です。また、Assaf Elovic氏が作成した主要なgpt-researcher Githubプロジェクトのトップコントリビューターの一人でもあります。
新しいLangGraph Cloud機能を実験した結果、あまりの興奮にこれを記事にする必要を感じました。以下では、LangGraph Cloudホストをデプロイし、GPT Researcherフロントエンド(NextJS)からそれをクエリする方法をご紹介します。
GPT Researcherとは何ですか?
GPT Researcherは、多様なタスクに対する包括的なオンラインリサーチを目的としたオープンソースの自律型エージェントです。このオープンソースは過去1年で人気が高まり、スター数は1万3千以上、4千人以上の開発者コミュニティを有しています。
GPT Researcherは時間とともに進化しており、成功したRAG(Retrieval-Augmented Generation:検索拡張生成)の実装から始まり、現在は人気のあるLangGraphフレームワークを用いたマルチエージェント方式を採用しています。
しかし、まだ欠けている部分がありました。GPT Researcherにはまだトップクラスのフロントエンドアプリケーションがなく、単純なHTMLとCSSに基づいて構築されていました。私たちは、最適なリサーチ体験を提供するために設計されたNextJSで構築された最新のクライアントを紹介できることを嬉しく思います!デモはこちらをご覧ください。
LangGraphはどのように関係しているのか?
コンテキストを認識し、問題について推論できるAIエージェントの構築を試み始めた際、私たちはLangChainライブラリとLangGraphを発見しました。
具体的には、LangGraphの概念に魅了されました。これは、AIエージェントが他のエージェントと協調し、独自の視点を持ち、互いの作業を検証できる複雑なマルチエージェントフローを構築することを可能にするフレームワークです。
LangGraphはまさにそれに完璧に適合しました!そして、新しいフロントエンドをGPT Researcherのクラウドベースバージョンに簡単に接続できるという機能は、真実すぎるほど魅力的に聞こえました。
LangGraph Cloudとは何か?
LangGraph Cloud Hostの概念は、GraphQL API Serverの概念と非常に似ています。
GraphQL API Server:
- データベースへのアクセスを抽象化するのを助けることができます
- サーバー言語のライブラリを活用できます
同様に、LangGraph API Serverも次のことができます:
- LangGraphへのアクセスを抽象化する
- LangGraph内で使用される任意のpipパッケージを活用する
本質的には、LangGraphを組み込んだPythonサーバーをデプロイすることになります。さらに、いくつかの機能が無料で提供されます。以下は、ジョブの実行やグラフの編集を容易にするためにLangGraph Cloudホスト上で自動的に公開されるAPIエンドポイントです。
私たちは何をデプロイしたのか?
私たちの場合、主要な作業はGPT-Researcherの創設者であるAssafによって行われました。彼はLangGraphを活用したマルチエージェントワークフローを構築しました。(この以前の投稿で、その取り組みについて詳しく読むことができます:マルチエージェント連携による究極のAI自動化の構築方法)
LangGraphでこのマルチエージェントフローが構築された後、その後のいくつかの簡単な成果につながりました。数週間後、LangChainのCEOであるHarrisonが介入し、Assafの事前構築済みのLangGraphを簡単にデプロイできるようにするプルリクエストを作成しました:GPT ResearcherのPRはこちら
この PR の優れていた点は、GPT-Researcher LangGraph を API コールを通じてカスタムパラメータでデプロイ、編集、トリガーしやすくしたことでした。素晴らしい!開発環境からスケーラブルな本番対応サービスへ移行するために変更が必要だったファイルはたった 4 つだけでした!
LangGraph API サーバーへのクエリ
前の 2 つのステップのシンプルさを完全に理解するのに時間がかかりました。マルチエージェント LLM ワークフローをトリガーすることがこれほど簡単であるはずがない……ですよね?
結果として、それは実際そうでした。
Assaf と Harrison のコードを基盤とする場合、私たちが行う必要があったのは以下の通りでした。
ステップ 1: Harrison のデプロイメントチュートリアルを見る
ステップ 2: LangSmith GUI の「Deployments」タブを通じてカスタム LangGraph をデプロイする。
私たちの場合、GPT Researcher プロジェクトのフォークを選択し、GPT Researcher の multi_agents ディレクトリ内にある langgraph.json 設定ファイルを指し示しました(以下参照)

ステップ 3: LangGraph Cloud デプロイメントに環境変数を追加する。
以下の設定で十分です:

上記のスクリーンショットから、LangGraph Cloud が自動的に「トレーシングプロジェクト」を作成することがわかります。
つまり、MVP マルチエージェントフローで得たのと同じ LangSmith によるトレーシングの恩恵を受けられるということです。その外観は以下の通りです:

そして、以下のような強力なツールが提供されます:
- ユーザーがバックエンドのデータフローを可視化し、検査できるようにする
- 品質保証のためのデバッグ - つまり、AI フローの入力または出力のどこを改善できるか
ステップ 4:新しくデプロイされた LangGraph をクエリする。
以下は React コードの例です:
import { getHost } from '../../helpers/getHost';
import { Client } from "@langchain/langgraph-sdk";
import { task } from '../../config/task';
export async function startLanggraphResearch(newQuestion, report_source) {
// 質問を更新する
task.task.query = newQuestion;
task.task.source = report_source;
const host = getHost({purpose: 'langgraph-gui'});
const client = new Client({apiUrl: host});
// すべてのアシスタントを一覧表示
const assistants = await client.assistants.search({
metadata: null,
offset: 0,
limit: 10,
});
const agent = assistants[0];
// 新しいスレッドを開始
const thread = await client.threads.create();
// ストリーミング実行を開始
const input = task;
const streamResponse = client.runs.stream(
thread["thread_id"],
agent["assistant_id"],
{
input,
},
);
return {streamResponse, host, thread_id: thread["thread_id"]};
}
ファイルの先頭でインポートされている task オブジェクトは、API リクエストオブジェクトと見なすことができます。これは Assaf の LangGraph で利用されている task.json ファイル と実質的に同一です。
getHost 関数は、langgraph-cli サービスの場合は localhost:8123 を、またはデプロイした LangGraph Cloud サーバーのドメインを返します。
これでほぼ完了です。上記のコードにより、LangGraph サーバー上で実行をトリガーすることが可能になり、そのプロセスは LangSmith ユーザーインターフェース上で完全に可視化できます。以下は、マルチエージェントフローが処理を進める際に、ユーザーに対して各タスクごとの LangGraph State のステータスを表示する上記コードの続きです。
const langsmithGuiLink = https://smith.langchain.com/studio/thread/${thread_id}?baseUrl=${host};
let previousChunk = null;
for await (const chunk of streamResponse) {
console.log(chunk);
if (chunk.data.report != null && chunk.data.report != "Full report content here") {
setOrderedData((prevOrder) => [...prevOrder, { ...chunk.data, output: chunk.data.report, type: 'report' }]);
setLoading(false);
} else if (previousChunk) {
const differences = findDifferences(previousChunk, chunk);
setOrderedData((prevOrder) => [...prevOrder, { type: 'differences', content: 'differences', output: JSON.stringify(differences) }]);
}
previousChunk = chunk;
}
}
以前のコードスニペットで、クライアントの runs.stream メソッドを利用している点にご注目ください。
これは、LangGraph API サーバーがチャンク単位で更新情報をフィードバックすることを意味します。これらのチャンクには、現在実行中のジョブの更新された状態や、デプロイ済みの LangGraph サーバー上で Python スクリプトが遭遇した任意のカスタムエラーが含まれる可能性があります。
私たちの場合、ユーザーに LangGraph API ジョブのカスタムプレイバイプレイ(逐次経過)を表示したかったため、2 つの JavaScript オブジェクト間の差分を計算する役割を持つ findDifferences 関数も追加しました。
グラフがレポートの完了を示した場合、そのレポートがユーザーに表示されます。
グラフにリアルタイムでのフィールド編集があった場合、グラフ内のそれらの差分がユーザーに表示されます。
まとめ
このブログ記事では、React と LangGraph Cloud を介して LangGraph マルチエージェントフローをトリガーする方法を示しました。これらのフローは人間の推論を模倣するため、非常に複雑です。しかし、上記のウォークスルーで示されたように、エレガントな API がプロセスを簡素化し、すべてが容易に整うようにします。
関連コンテンツ
image.png)
エージェントアーキテクチャ (Agent Architecture)
LangSmith
オープンソース (Open Source)
LangSmith と LangChain OSS が EU AI Act(EU 人工知能法)の要件を満たすのをどのように支援するか


J. Talbot,
B. Weng
2026 年 4 月 27 日
7
分 (min)
image.png)
エージェントアーキテクチャ (Agent Architecture)
パートナー (Partner)
エージェント型エンジニアリング:AIエージェントの群れがソフトウェアエンジニアリングを再定義する方法


R. Kumar,
P. Ramagopal
2026年4月17日
6分

エージェントアーキテクチャ
ディープエージェント(Deep Agents)
オープンソース
バックグラウンドでサブエージェントを実行する


H. Lovell,
C. Francis
2026年4月16日
4分
エージェントが実際に何を行っているかを確認する
LangSmith(当社のエージェントエンジニアリングプラットフォーム)は、開発者がすべてのエージェントの意思決定をデバッグし、評価の変更を確認し、ワンクリックでデプロイできるように支援します。
原文を表示

*Note: This is a guest blog post by Elisha Kramer, Tech Lead at Fiverr. He is also one of the top contributors of the leading gpt-researcher Github project by Assaf Elovic.*
After experimenting with the new LangGraph Cloud feature, we were so excited that we had to write about it. Below, we’ll show of how we deployed our LangGraph Cloud Host & queried it from the GPT Researcher frontend (NextJS).
What is GPT Researcher?
GPT Researcher is an open-source autonomous agent designed for comprehensive online research on a variety of tasks. The open source has grown in popularity over the past year, with over 13K stars and a community of 4K+ developers.
GPT Researcher has also been evolved over time, starting as a successful RAG implementation and now using multi-agents with the popular LangGraph framework.
But there was still a missing piece. GPT Researcher didn't yet have a top-standard front-end application and was still built on simple HTML and CSS. We’re excited to introduce our latest client built with NextJS, designed to provide an optimal research experience! Check out a demo here.
How does LangGraph tie into the picture?
As we started trying to build context-aware AI agents capable of reasoning through problems, we discovered the LangChain library and LangGraph.
Specifically, we were hooked on the concept of LangGraph: a framework that could enable us to build out complex multi-agent flows where AI agents coordinate with other agents, bringing their unique perspectives and reviewing each other's work.
LangGraph turned out to be a great fit for that! And the ability to easily connect our new frontend to a cloud-based version of GPT Researcher sounded too good to be true.
What is LangGraph Cloud?
The concept behind the LangGraph Cloud Host is very similar to the concept behind a GraphQL API Server.
A GraphQL API Server:
- Can help abstract away access to a database
- Can leverage any library of the Server Language
So too, a LangGraph API Server can:
- Abstract away access to a LangGraph
- Leverage any pip package used within your LangGraph
Essentially, you’re deploying a Python server with your LangGraph baked into it. And while you’re at it, you get a bunch of stuff for free; here are the API endpoints automatically exposed on your LangGraph Cloud Host to enable easy job-triggering & graph edits.
What did we deploy?
In our case, the brunt of the work was done by Assaf, founder of GPT-Researcher, when he built a multi-agent workflow leveraging LangGraph. (Feel free to read up on that adventure in this earlier post: How to Build the Ultimate AI Automation with Multi-Agent Collaboration.)
Once that multi-agent flow was built with LangGraph, it set the stage for some easy wins down the road. Several weeks later, Harrison (CEO of LangChain) stepped in & created a pull request to enable us to easily deploy Assaf’s pre-built LangGraph: Here’s the GPT Researcher PR.
The beauty of that PR was that it made our GPT-Researcher LangGraph easily available to deploy, edit & trigger with custom parameters via an API Call. Wow! Only 4 changed files to go from our dev environment to a scalable production-ready service!
Querying the LangGraph API Server
It took me a while to fully appreciate the simplicity of the previous 2 steps. It couldn’t be that easy to trigger a multi-agent LLM workflow... could it?
Turns out, it was.
Building on top of Assaf & Harrison’s code, all we needed to do was the following.
Step 1: Watch Harrison’s deployment tutorial
Step 2: Deploy our custom LangGraph via the LangSmith GUI’s “Deployments” tab.
In our case, I selected my fork of the GPT Researcher Project & pointing to my langgraph.json config file within GPT Researcher’s multi_agents directory (see below)

Step 3: Add my environment variables to my LangGraph Cloud deployment.
These should suffice:

Notice in the screenshot above that LangGraph Cloud will automatically create a “Tracing Project” for me.
That means we get the same LangSmith tracing benefits that we got with our MVP multi-agents flow. Here’s what it looks like:

And here’s what you get — a powerful tool for:
- Enabling users to visualize and inspect the backend data flow
- Quality assurance debugging - i.e. where can the input or output of our AI flows use improvement
Step 4: Query the newly deployed LangGraph.
Here’s a sample of the React Code:
import { getHost } from '../../helpers/getHost';
import { Client } from "@langchain/langgraph-sdk";
import { task } from '../../config/task';
export async function startLanggraphResearch(newQuestion, report_source) {
// Update the task query with the new question
task.task.query = newQuestion;
task.task.source = report_source;
const host = getHost({purpose: 'langgraph-gui'});
const client = new Client({apiUrl: host});
// List all assistants
const assistants = await client.assistants.search({
metadata: null,
offset: 0,
limit: 10,
});
const agent = assistants[0];
// Start a new thread
const thread = await client.threads.create();
// Start a streaming run
const input = task;
const streamResponse = client.runs.stream(
thread["thread_id"],
agent["assistant_id"],
{
input,
},
);
return {streamResponse, host, thread_id: thread["thread_id"]};
}The task object imported at the top of the file can be thought of as our API Request object. It’s practically identical to the task.json file leveraged by Assaf’s LangGraph.
The getHost function either returns localhost:8123 (for the langgraph-cli service) or the domain of the LangGraph Cloud Server we deployed on.
And that’s pretty much all there is to it. The above code enables us to trigger a run on the LangGraph server - which is fully observable on the LangSmith User Interface! Here’s the continuation of the above code which displays to the user the status of our LangGraph State (per task) as our multi-agent flow runs through its paces:
const langsmithGuiLink = `https://smith.langchain.com/studio/thread/${thread_id}?baseUrl=${host}`;
let previousChunk = null;
for await (const chunk of streamResponse) {
console.log(chunk);
if (chunk.data.report != null && chunk.data.report != "Full report content here") {
setOrderedData((prevOrder) => [...prevOrder, { ...chunk.data, output: chunk.data.report, type: 'report' }]);
setLoading(false);
} else if (previousChunk) {
const differences = findDifferences(previousChunk, chunk);
setOrderedData((prevOrder) => [...prevOrder, { type: 'differences', content: 'differences', output: JSON.stringify(differences) }]);
}
previousChunk = chunk;
}
}Notice in an earlier code snippet that we leveraged the client.runs.stream method.
That means that the LangGraph API Server will feed us back updates in chunks. Those chunks can contain: the updated state of the Job currently running or any custom errors our python scripts encountered on our deployed LangGraph server.
In our case, we wanted to show our users a custom play-by-play of the LangGraph API Job - therefore, we also added a findDifferences function whose role is to calculate the difference between two JavaScript objects.
If the Graph completes the report, that report is displayed to the user.
If the Graph had some field edits in real-time, those differences in the Graph are displayed to the user.
Summary
In this blog post, we show how we triggered our LangGraph multi-agent flows via React & LangGraph Cloud. These flows mimic human reasoning, making them quite complex. However, as demonstrated in the walkthrough above, an elegant API simplifies the process and makes everything fall into place effortlessly.
Related content
.png)
Agent Architecture
LangSmith
Open Source
How LangSmith and LangChain OSS Help You Meet EU AI Act Requirements


J. Talbot,
B. Weng
April 27, 2026
7
min
.png)
Agent Architecture
Partner
Agentic Engineering: How Swarms of AI Agents Are Redefining Software Engineering


R. Kumar,
P. Ramagopal
April 17, 2026
6
min

Agent Architecture
Deep Agents
Open Source
Running Subagents in the Background


H. Lovell,
C. Francis
April 16, 2026
4
min
See what your agent is really doing
LangSmith, our agent engineering platform, helps developers debug every agent decision, eval changes, and deploy in one click.
関連記事
今日のまとめ
AI日報で今日の重要ニュースをまとめ読み