epam/ai-dial-chat

AI DIAL Chatとは？

AI DIAL Chatは、Nx monorepoとして構築されたフルスタックのチャットアプリケーションです。モダンなReactフロントエンドとNestJSバックエンドを組み合わせ、EPAMのAI DIAL Core（同社のLLMサービス）に接続します。このリポジトリは、単なるリンクのリストやチュートリアルではなく、実際のプロダクション環境で使用可能なコードベースです。

コアとなる構成要素

要素	テクノロジー	内容
Frontend (apps/chat)	React 19, TypeScript 6, Vite, Tailwind CSS, i18next	ユーザー向けのUI – チャットウィンドウ、メッセージ作成、サイドバー、テーマサポート、国際化。
Backend (apps/chat-api)	NestJS 11, TypeScript 6, Express 5, Swagger/OpenAPI	ユーザー認証、DIAL Coreへのリクエスト転送、静的アセットの提供、Swaggerドキュメントの提供を行うREST API。
Overlay sandbox (apps/chat-overlay-sandbox)	Vite + tiny host page	チャットをiframe (`@epam/ai-dial-chat-overlay`) として埋め込み、postMessageプロトコルを試すためのテスト用ハーネス。
Shared libraries (libs/…)	Private workspace packages (Nx)	UIプリミティブ、ドメインモデル、OpenAPIクライアント、カタログUI、メッセージリスト、添付ファイル処理、サイドバー、テーマ設定など。すべてのコンポーネントは、単一のモノリスではなく、再利用可能なライブラリに分割されています。
OpenAPI / Postman tooling	`npm run openapi`, `npm run postman`	NestJSコントローラーから、型定義されたAPIクライアント (`libs/chat-api-client`) とPostmanコレクションを生成します。

動作の仕組み

ユーザーがReactアプリを開く (http://localhost:4207)。アプリはChat API (http://localhost:5000/api) とのみ通信します。
Chat APIはリクエストを認証し（Keycloak、Auth0、GoogleなどのOIDCプロバイダー）、チャット関連の呼び出しをEPAM AI DIAL Core（実際にレスポンスを生成するLLMサービス）に転送します。
レスポンスはAPIを経由してReact UIに流れ戻り、ライブラリコンポーネント（メッセージバブル、引用、添付ファイルプレビューなど）を使用してレンダリングされます。
埋め込みシナリオでは、ホストページがOverlayパッケージをiframeとしてロードします。オーバーレイは、定義されたpostMessageハンドシェイク (INIT_READY → READY → READY_TO_INTERACT) を介してホストと通信します。

クイックスタート（概要）

# 1. クローンと依存関係のインストール
git clone <repo-url>
cd ai-dial-chat
npm install

# 2. 環境変数のテンプレートをコピーし、少なくとも1つのOIDCプロバイダーを設定する
cp apps/chat-api/.env.template .env.local
# .env.local を編集 → AUTH_KEYCLOAK_CLIENT_ID, AUTH_KEYCLOAK_SECRET などを設定

# 3. フロントエンドとバックエンドを同時に実行する
npm run start:all   # または、npm run start と npm run start:api を別々のターミナルで実行

フロントエンドは http://localhost:4207 でアクセス可能です。
API (Swagger UI付き) は http://localhost:5000/api/docs でアクセス可能です。

このプロジェクトを使用する対象者

プロダクトチーム：EPAMのDIAL LLMサービスと統合された、完成済みのチャットUIが必要なチーム。
開発者：フルスタックAIチャットアプリの参照実装を探している開発者。モノレポ構成、Nx tooling、生成されたOpenAPIクライアントはすべて再利用可能なパターンです。
エンタープライズ企業：オーバーレイパッケージを使用して、自社のポータルにチャットを埋め込みたい企業。

主な機能

モジュール式ライブラリ構成 – UI要素（作成、メッセージリスト、カタログ、サイドバーなど）は独立したパッケージであり、スタイリングの変更や置き換えが容易です。
国際化 – i18nextサポート、RTLレイアウト、およびCSSカスタムプロパティを提供するテーマホスト。
複数のアイデンティティプロバイダー – Auth0、Azure AD、Keycloak、Google、Okta、Cognito、など、標準で設定可能です。
Swagger/OpenAPI – 自動生成されたドキュメントと型定義されたクライアント (libs/chat-api-client)。
Overlay統合 – 専用ライブラリ (@epam/ai-dial-chat-overlay) と、迅速なテストのためのサンドボックス。
Nx monorepo tooling – サービスの提供、ビルド、テスト、リンター、およびプロジェクト依存関係の可視化のためのコマンド。

詳細情報の参照先

Architecture diagram – README内の Architecture セクション。
Migration guides – レガシーな development-legacy ブランチからの移行ガイド。
Library READMEs – 各 libs/* フォルダに独自のドキュメントがあります。
Docs folder – テーマのカスタマイズ、オーバーレイの移行、およびAPI仕様に関する詳細なガイド。

TL;DR

AI DIAL Chatは、ReactとNestJSで構築された本物のプロダクショングレードのチャットプラットフォームです。EPAMのAI DIAL Coreと密接に統合されており、モジュール式Nx monorepoとして構成されています。完全な認証、OpenAPI tooling、埋め込み可能なオーバーレイコンポーネントを含んでおり、AIを活用した対話型インターフェースを構築するための強力な出発点となります。