inflearn logo
知識共有
inflearn logo

フルスタックAIチャットボット作り(React 19, NestJS, LangChain.Graph v1.+)

APIを一度呼び出して終わるAIトイプロジェクトはもう卒業! フルスタックAIチャットボットを実際に設計し、デプロイまで考慮した構造で構築した経験をもとに、ストリーミング・Tool呼び出し・メモリ・マルチモーダル・Human in the Loopまで、「サービスとして動作する」AIチャットボットを作る全過程をすべてお教えします。

難易度 初級

受講期間 無制限

React
React
PostgreSQL
PostgreSQL
NestJS
NestJS
LangChain
LangChain
LangGraph
LangGraph
React
React
PostgreSQL
PostgreSQL
NestJS
NestJS
LangChain
LangChain
LangGraph
LangGraph

受講後に得られること

  • ChatGPTのようなリアルタイムストリーミングAIチャットボットを、最初から最後まで直接作ることができます。

  • LangChain/LangGraphのエージェント、ツール呼び出し、並列処理、メモリ管理を実戦プロジェクトで活用する能力を身につけることができます。

  • Human in the Loopパターンを実装することで、AIのツール使用をユーザーが承認・拒否・修正できる安全なエージェントシステムを設計できます。

  • 画像・PDFを処理するマルチモーダルAIチャットボットを実装できます。

  • NestJS + Prisma + PostgreSQLを使用して、チャット履歴を永続的に保存・照会するバックエンドシステムを構築できます。

  • ReactでHTTPストリームをパースし、トークン単位のリアルタイムレンダリング、自動スクロール、Markdownレン더リングなど、ChatGPT級のUXを実装できます。

  • Zustand、TanStack Query、Shadcn UIなど、モダンなReactエコシステムの実践的な活用法を学びます。

メイン画面

マルチモーダル

Human in the loop

Tool use

リアルタイムストリーミング
AIチャットボット自作

API呼び出し以上のサービス実装!


単なるAPI呼び出しから脱却し、AIチャットボットを直接設計してデプロイまでを経験してみてください。
実際のサービスレベルのチャットボット開発能力を養い、次世代AI技術の専門家へと成長することができます。


フルスタックAIチャットボット作成
サービスレベルのAIチャットボット構築経験を体得します。

React 19, NestJS, LangChain, LangGraphなどの最新技術スタックを活用して
リアルタイムストリーミング、Tool呼び出し、マルチモーダル、Human in the Loop機能を実装します。

単なるAPI呼び出しを超えて、会話履歴の管理、ファイル処理、ユーザー承認など
実際のサービスで必要とされるすべての機能を直接設計し、実装します。

React, NestJS, PostgreSQLベースのフルスタックチャットボットを最初から最後まで一緒に構築し、すべてのソースコードを提供します。

実践AIチャットボット
開発経験の完成

Section 1 - 講義紹介および開発環境の設定

本講義の目標を紹介し、React 19ベースのフロントエンドプロジェクトの初期環境設定と、VS Codeのデバッグ環境構築を含みます。

Section 2 - チャットボットUIのデザインおよび実装

Shadcn UIを活用してチャットボットの基本レイアウト、チャットエリア、入力欄などをデザインし、メッセージ送信イベントの処理およびローディング状態を実装します。

Section 3 - バックエンド(NestJS)プロジェクトの設定

NestJSプロジェクトを初期設定し、環境変数、ロギング、DTO検証、およびSwaggerドキュメント生成のための設定を構成します。Chat APIリソースの作成までを扱います。

Section 4 - LangChain 連携およびリアルタイムストリーミング

LangChainをインストールし、OpenAI APIと連携して最初のLLM呼び出しを行います。TanStack Queryを活用したAPI呼び出しと、バックエンドのStream HTTPを通じたリアルタイムな応答ストリーミングの実装について学習します。

Section 5 - フロントエンドの状態管理とリファクタリング

Zustandライブラリを導入してグローバル状態管理を実装し、カスタムフックとコンポーネントの分離を通じてチャットロジックを効率的にリファクタリングします。

Section 6 - LangChain AgentとToolの活用

AI AgentにTool使用能力を付与し、Toolの並列処理、Custom Loggingミドルウェア、streamModeを活用したHTTP-Stream通信を実装します。

Section 7 - Tool実行プロセスの視覚化およびUXの改善

チャットボット画面にTool実行ストリームを視覚的に表示し、Accordion UI、リアルタイムMarkdownレンダリング、自動スクロール機能を実装してユーザーエクスペリエンスを向上させます。

Section 8 - マルチモーダルAIチャットボット(画像/PDF処理)

ファイルアップロードAPIを開発し、画像およびPDFファイル処理のためのマルチモーダル機能をバックエンドとフロントエンドで実装します。

Section 9 - 短期メモリおよび LangGraph の活用

LangGraphのMemorySaverとsummarizationMiddlewareを使用して対話履歴を記憶し、LangSmithで実行フローを追跡します。

Section 10 - Human in the Loopの実装

AIのTool使用をユーザーが承認・拒否・修正できるHuman in the Loopパターンを実装し、ストリームの中断および再開機能を開発します。

Section 11 - チャットルームの分離および独立メモリの適用

Chat IDごとに独立した短期メモリを適用してチャットルームを分離し、新しいチャット生成のためのHomePageとChatPageを実装します。

Section 12 - PostgreSQL データベースの設定

Dockerを使用してPostgreSQLコンテナを実行し、DBeaverを通じてデータベースの接続および管理のための環境を構築します。

Section 13 - Prisma ORMを活用したデータの永続化

Prisma ORMを設定し、PostgreSQLと連動させて、チャットスレッド、メッセージ、Toolの結果などの対話データを永続的に保存・照会する機能を実装します。

もはや単なるAPI呼び出しにとどまらないでください。
実際のサービスとして動作するフルスタックAIチャットボット開発能力を備えた専門家へと成長しましょう。

受講前のご注意事項


実習環境

  • OS:Windows、macOS、Linuxのすべてに対応しています。

  • 開発ツール:Node.js(v18以上推奨)、pnpm、Docker Desktop、VS Codeが必須です。

  • PCスペック:スムーズな開発環境のために、8GB以上のRAMを推奨します。

前提知識および注意事項

  • ReactおよびTypeScriptの基本文法の理解が必要です。

  • NestJSまたはExpress.jsなど、Node.jsベースのバックエンドフレームワークの経験があれば尚良いです。

  • API呼び出しの経験があれば、実習に非常に役立ちます。

  • LangChain、LangGraphに関する事前知識がなくても大丈夫です。

学習資料

  • 講義ごとにすべてのソースコードを提供します。

  • 実際のサービス開発に必要な最新ライブラリの活用法を学びます。


こんな方に
おすすめです

学習対象は
誰でしょう?

  • LangChain/LangGraphを実際のサービスに適用したいバックエンド開発者

  • ChatGPTのようなAIチャットボットサービスを自分で作ってみたいフロントエンド開発者

  • LLM APIは使ったことがあるが、フルスタックのチャットボットプロジェクトの経験がない開発者

  • AIエージェントのHuman in the Loop、メモリ、ストリーミングなどの高度なパターンを学びたい開発者

  • React + NestJSベースの実践フルスタックプロジェクトポートフォリオを作りたい就活生またはジュニア開発者

  • 社内でAIチャットボットのPoCやプロトタイプを迅速に構築する必要がある実務担当者

前提知識、
必要でしょうか?

  • JavaScript / TypeScriptの基礎 — 変数、関数、async/await、モジュールシステムなどの基本文法を理解している必要があります。

  • Reactの基礎 — コンポーネント、props、useState、useEffectなどの基本的なフックの使用経験があると望ましいです。

  • Node.jsの基礎 — npm/pnpmパッケージのインストール、ターミナルの使用に慣れていると望ましいです。

  • REST APIの概念 — HTTPメソッド(GET、POSTなど)とリクエスト/レスポンスの構造を理解していれば、スムーズに進めることができます。

  • NestJSやExpressの経験 — なくても講義で初期設定から扱いますが、あればよりスムーズです。

こんにちは
Kaburiです。

867

受講生

72

受講レビュー

29

回答

5.0

講座評価

4

講座

病院・クリニック向けソフトウェア開発企業 | 2015年 〜 現在

C#関連講義YouTube運営:カブリコーダー(https://www.youtube.com/@kaburi-coder) 2022 ~

 

現在使用している主な技術スタックは以下の通りです。

  • プログラミング言語: C#, TypeScript, Dart, Python, VB.NET

  • デスクトップアプリケーション: WinForms, WPF

  • モバイルアプリ開発: Flutter

  • Web開発: React, Next.js, Express, NestJS

  • Gen AI: LangChain, LangGraph

  • コンテナおよびオーケストレーション: Docker, Kubernetes, Helm, ArgoCD ..

  • CI/CD: GitHub Actions

  • DataBase: MySql, Postgresql, MongoDB, SQLITE など

2015年から現在まで、ソフトウェア開発分野において様々なプロジェクトを成功に導いてきた経験を保有しています。

技術リーダーとしてチームを牽引し、効率的な開発プロセスを維持しながら、最新の技術スタックを積極的に導入することで、ソフトウェアの品質とユーザーエクスペリエンスの向上に注力しています。

現在はデスクトップとウェブの統合開発を主導すると同時に、社内スタッフの教育を担当しています。

また、ユーザーフレンドリーなアプリケーションの開発やデプロイの自動化、DevOpsの導入を通じて、プロジェクトの全般的な成功に貢献しています。

継続的な自己啓発を通じて変化する技術環境に柔軟に対応し、高い情熱を持って新たな挑戦に取り組んでいます。

もっと見る

カリキュラム

全体

85件 ∙ (7時間 30分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

2件

5.0

2件の受講レビュー

  • devbong님의 프로필 이미지
    devbong

    受講レビュー 6

    平均評価 5.0

    5

    31% 受講後に作成

    • arammyy94님의 프로필 이미지
      arammyy94

      受講レビュー 4

      平均評価 5.0

      5

      60% 受講後に作成

      • kaburi
        知識共有者

        初めての受講評ありがとうございます!

    Kaburiの他の講座

    知識共有者の他の講座を見てみましょう!

    似ている講座

    同じ分野の他の講座を見てみましょう!

    期間限定セール

    ¥11,794

    29%

    ¥16,619