epam/ai-dial-chat

AI DIAL Chat는 무엇인가요?

AI DIAL Chat은 전체 스택 채팅 애플리케이션으로, Nx 모노레포로 구축되었습니다. 현대적인 React 프론트엔드와 NestJS 백엔드를 통합하여 EPAM의 AI DIAL Core(회사의 대규모 언어 모델 서비스)와 연결됩니다. 이 저장소는 단순한 링크 목록이나 튜토리얼이 아니라, 실제 운영 가능한 코드베이스입니다.

핵심 구성 요소

구성 요소	기술 스택	기능
프론트엔드 (apps/chat)	React 19, TypeScript 6, Vite, Tailwind CSS, i18next	사용자 인터페이스 – 채팅 창, 메시지 작성기, 사이드바, 테마 지원, 다국어화
백엔드 (apps/chat‑api)	NestJS 11, TypeScript 6, Express 5, Swagger/OpenAPI	사용자 인증, DIAL Core로 요청 전달, 정적 자산 제공, Swagger 문서 제공
오버레이 샌드박스 (apps/chat‑overlay‑sandbox)	Vite + 작은 호스트 페이지	채팅을 iframe(`@epam/ai-dial-chat-overlay`)으로 임베드하고 postMessage 프로토콜을 테스트할 수 있는 테스트 환경
공유 라이브러리 (libs/…)	개인 워크스페이스 패키지 (Nx)	UI 기본 요소, 도메인 모델, OpenAPI 클라이언트, 카탈로그 UI, 메시지 목록, 첨부 파일 처리, 사이드바, 테마 등. 모든 컴포넌트는 단일 모노리스가 아니라 재사용 가능한 라이브러리로 분리되어 있습니다.
OpenAPI / Postman 도구	`npm run openapi`, `npm run postman`	NestJS 컨트롤러에서 타입화된 API 클라이언트(`libs/chat-api-client`)와 Postman 컬렉션을 생성합니다.

작동 방식

사용자가 React 앱을 엽니다 (http://localhost:4207). 앱은 오직 채팅 API(http://localhost:5000/api)와만 통신합니다.
채팅 API는 요청을 인증합니다 (Keycloak, Auth0, Google 등 OIDC 제공자). 채팅 관련 요청은 EPAM AI DIAL Core(실제 응답을 생성하는 LLM 서비스)로 전달됩니다.
응답은 API를 통해 다시 React UI로 흐르며, 라이브러리 컴포넌트(메시지 버블, 인용, 첨부 파일 미리보기 등)를 사용해 렌더링됩니다.
임베드 시나리오에서는 호스트 페이지가 오버레이 패키지를 iframe으로 로드할 수 있습니다. 오버레이는 postMessage 핸드셰이크(INIT_READY → READY → READY_TO_INTERACT)를 통해 호스트와 통신합니다.

시작하기 (빠른 시작 요약)

# 1. 저장소 복제 및 종속성 설치
git clone <repo‑url>
cd ai-dial-chat
npm install

# 2. 환경 템플릿 복사 및 적어도 하나의 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 도구, 생성된 OpenAPI 클라이언트는 모두 재사용 가능한 패턴입니다.
자체 포털에 채팅을 임베드하고자 하는 기업 – 오버레이 패키지를 통해 가능합니다.

주목할 만한 기능

모듈화된 라이브러리 아키텍처 – 작성기, 메시지 목록, 카탈로그, 사이드바 등 UI 요소는 독립된 패키지로 분리되어 있어 스타일을 쉽게 변경하거나 교체할 수 있습니다.
다국어화 – i18next 지원, RTL 레이아웃, CSS 사용자 정의 속성을 제공하는 테마 호스트.
다중 인증 제공자 – Auth0, Azure AD, Keycloak, Google, Okta, Cognito 등에 대해 기본 설정이 제공됩니다.
Swagger/OpenAPI – 자동 생성된 문서와 타입화된 클라이언트(libs/chat-api-client).
오버레이 통합 – 전용 라이브러리(@epam/ai-dial-chat-overlay)와 빠른 테스트를 위한 샌드박스 제공.
Nx 모노레포 도구 – 프로젝트를 서빙, 빌드, 테스트, 린트, 종속성 시각화하는 명령어 제공.

더 많은 정보를 찾는 곳

아키텍처 다이어그램 – README의 Architecture 섹션에 있음.
마이그레이션 가이드 – 기존 development-legacy 브랜치에서 마이그레이션하는 경우.
라이브러리 README – 각 libs/* 폴더에는 자체 문서가 있습니다.
Docs 폴더 – 테마 커스터마이징, 오버레이 마이그레이션, API 사양에 대한 자세한 가이드.

TL;DR

AI DIAL Chat은 React와 NestJS로 구축된 진정한 운영 수준의 채팅 플랫폼이며, EPAM의 AI DIAL Core와 밀접하게 통합되어 있습니다. 모듈화된 Nx 모노레포로 구성되어 있으며, 완전한 인증 지원, OpenAPI 도구, 임베드 가능한 iframe 오버레이를 포함하고 있어, AI 기반 대화형 인터페이스를 구축하는 누구에게나 견고한 시작점이 됩니다.