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

  1. User opens the React app (http://localhost:4207). The app talks only to the Chat API (http://localhost:5000/api).
  2. 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.
  3. Responses flow back through the API to the React UI, which renders them using the library components (message bubbles, citations, attachment previews, etc.).
  4. For embedded scenarios, a host page can load the Overlay package as an iframe. The overlay communicates with the host via a well‑defined postMessage handshake (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

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-legacy branch.
  • 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