epam/ai-dial-chat
A default UI for AI DIAL
What is AI DIAL Chat?
AI DIAL Chat is a full‑stack chat application built as an Nx monorepo. It bundles a modern React front‑end with a NestJS back‑end and connects to EPAM’s AI DIAL Core (the company’s large‑language‑model service). The repo is a real, production‑ready code base – not just a list of links or a tutorial.
Core pieces
| Piece | Technology | What it does |
|---|---|---|
| Frontend (apps/chat) | React 19, TypeScript 6, Vite, Tailwind CSS, i18next | The user‑facing UI – chat window, message composer, sidebars, theme support, internationalisation. |
| Backend (apps/chat‑api) | NestJS 11, TypeScript 6, Express 5, Swagger/OpenAPI | REST API that authenticates users, forwards requests to DIAL Core, serves static assets, and provides Swagger docs. |
| Overlay sandbox (apps/chat‑overlay‑sandbox) | Vite + tiny host page | A test harness that lets you embed the chat as an iframe (@epam/ai-dial-chat-overlay) and try out the postMessage protocol. |
| Shared libraries (libs/…) | Private workspace packages (Nx) | UI primitives, domain models, OpenAPI client, catalog UI, message list, attachment handling, sidebar, theming, etc. All components are split into reusable libraries rather than a single monolith. |
| OpenAPI / Postman tooling | npm run openapi, npm run postman |
Generates a typed API client (libs/chat-api-client) and a Postman collection from the NestJS controllers. |
How it works together
- User opens the React app (
http://localhost:4207). The app talks only to the Chat API (http://localhost:5000/api). - The Chat API authenticates the request (OIDC providers such as Keycloak, Auth0, Google, etc.) and forwards chat‑related calls to EPAM AI DIAL Core – the LLM service that actually generates responses.
- Responses flow back through the API to the React UI, which renders them using the library components (message bubbles, citations, attachment previews, etc.).
- For embedded scenarios, a host page can load the Overlay package as an iframe. The overlay communicates with the host via a well‑defined
postMessagehandshake (INIT_READY → READY → READY_TO_INTERACT).
Getting started (quick‑start summary)
# 1. Clone and install deps
git clone <repo‑url>
cd ai-dial-chat
npm install
# 2. Copy env template and fill in at least one OIDC provider
cp apps/chat-api/.env.template .env.local
# edit .env.local → set AUTH_KEYCLOAK_CLIENT_ID, AUTH_KEYCLOAK_SECRET, etc.
# 3. Run both front‑end and back‑end together
npm run start:all # or run them in separate terminals with npm run start & npm run start:api
- Front‑end will be reachable at http://localhost:4207.
- API (with Swagger UI) at http://localhost:5000/api/docs.
Who might use this?
- Product teams that need a ready‑made chat UI integrated with EPAM’s DIAL LLM service.
- Developers looking for a reference implementation of a full‑stack AI chat app – the monorepo layout, Nx tooling, and generated OpenAPI client are all reusable patterns.
- Enterprises that want to embed the chat in their own portals via the overlay package.
Notable features
- Modular library architecture – UI pieces (composer, message list, catalog, sidebar, etc.) are independent packages, making them easy to restyle or replace.
- Internationalisation – i18next support, RTL layout, and a theme‑host that supplies CSS custom properties.
- Multiple identity providers – out‑of‑the‑box config for Auth0, Azure AD, Keycloak, Google, Okta, Cognito, etc.
- Swagger/OpenAPI – auto‑generated docs and a typed client (
libs/chat-api-client). - Overlay integration – a dedicated library (
@epam/ai-dial-chat-overlay) plus a sandbox for rapid testing. - Nx monorepo tooling – commands for serving, building, testing, linting, and visualising project dependencies.
Where to look for more info
- Architecture diagram – in the README under Architecture.
- Migration guides – for moving from the legacy
development-legacybranch. - Library READMEs – each
libs/*folder has its own documentation. - Docs folder – detailed guides on theme customization, overlay migration, and API specs.
TL;DR
AI DIAL Chat is a genuine, production‑grade chat platform built with React and NestJS, tightly integrated with EPAM’s AI DIAL Core. It’s organized as a modular Nx monorepo, includes full authentication support, OpenAPI tooling, and an embeddable overlay component, making it a solid starting point for anyone building AI‑powered conversational interfaces.
Related
- Project
- Project
- Project
- Project
- Project