Add Docker Compose Support for UI + Backend Integration

Dockerfile

@@ -31,23 +31,23 @@ COPY package.json /app/package.json
 RUN npm install
 # Copy all files from current directory to working dir in image
 COPY . .
-# Build the assets
-RUN yarn build
+# Build the assets using npm instead of yarn. Allows name in package.json to contain spaces.
+RUN npm run build
 
 # Next.js collects completely anonymous telemetry data about general usage.
 # Learn more here: https://nextjs.org/telemetry
 # Uncomment the following line in case you want to disable telemetry during the build.
-# ENV NEXT_TELEMETRY_DISABLED 1
+# ENV NEXT_TELEMETRY_DISABLED=1
 
 RUN npm run build
 
 # Production image, copy all the files and run next
 FROM base AS runner
 WORKDIR /app
 
-ENV NODE_ENV production
+ENV NODE_ENV=production
 # Uncomment the following line in case you want to disable telemetry during runtime.
-# ENV NEXT_TELEMETRY_DISABLED 1
+# ENV NEXT_TELEMETRY_DISABLED=1
 
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
@@ -70,9 +70,9 @@ USER nextjs
 
 EXPOSE 3000
 
-ENV PORT 3000
+ENV PORT=3000
 # set hostname to localhost
-ENV HOSTNAME "0.0.0.0"
+ENV HOSTNAME="0.0.0.0"
 
 # server.js is created by next build from the standalone output
 # https://nextjs.org/docs/pages/api-reference/next-config-js/output

README.md

@@ -33,32 +33,26 @@ git clone git@github.com:NVIDIA/AIQToolkit.git
 cd AIQToolkit
 ```
 
+### Running the Application
+
+#### Local Development
+
 Install dependencies:
+
 ```bash
 npm ci
 ```
 
-### Running the Application
-
-#### Local Development
 ```bash
 npm run dev
 ```
 The application will be available at `http://localhost:3000`
 
-#### Docker Deployment
-```bash
-# Build the Docker image
-docker build -t AIQ Toolkit-UI .
-
-# Run the container with environment variables from .env
-# Ensure the .env file is present before running this command.
-# Skip --env-file .env if no overrides are needed.
-docker run --env-file .env -p 3000:3000 AIQ Toolkit-UI
-```
-
 ![AIQ Toolkit Web User Interface](public/screenshots/ui_home_page.png)
 
+#### Docker Deployment
+Please see [Usage Examples](#usage-examples) for Docker deployment examples with complete server setups.
+
 ## Configuration
 
 ### HTTP API Connection
@@ -82,12 +76,69 @@ NOTE: Most of the time, you will want to select /chat/stream for intermediate re
 
 ### Simple Calculator Example
 
-#### Setup and Configuration
+#### Option 1: Docker Compose (Recommended)
+For a complete setup with the UI, calculator server, and Phoenix Telemetry:
+
+```bash
+# Make sure you're logged into NVIDIA's container registry
+# The NeMo-Agent-Toolkit calculator server requires this to build image. 
+docker login nvcr.io
+# Username: $oauthtoken
+# Password: <your-nvidia-api-key>
+
+# Make sure you have your NVIDIA API key set
+export NVIDIA_API_KEY=your_api_key_here
+
+docker compose -f compose_calculator.yaml up -d
+```
+
+That's it! This will start:
+- **UI** on `http://localhost:3000`
+- **Calculator Server** on `http://localhost:8000` (with API docs at `/docs`)
+- **Phoenix Telemetry** on `http://localhost:6006`
+
+
+To check containers and logs:
+
+```bash
+docker ps -a
+docker logs aiq-ui
+```
+
+To stop the services:
+```bash
+docker compose -f compose_calculator.yaml down
+```
+
+#### Option 2: Manual Setup (Requires External Server)
+
 1. Set up [AIQ Toolkit Get Started ](https://github.com/NVIDIA/AIQToolkit/blob/main/docs/source/intro/get-started.md)
-2. Start workflow by following the [Simple Calculator Example](https://github.com/NVIDIA/AIQToolkit/blob/main/examples/simple_calculator/README.md)
+2. Start the calculator server by following the [Simple Calculator Example](https://github.com/NVIDIA/AIQToolkit/blob/main/examples/simple_calculator/README.md)
 ```bash
-aiq serve --config_file=examples/simple_calculator/configs/config.yml
+aiq serve --config_file=examples/basic/functions/simple_calculator/configs/config.yml
 ```
+3. Start the UI using one of these approaches:
+
+**Local UI:**
+```bash
+npm run dev
+```
+
+**Docker UI:**
+```bash
+# Build the Docker image
+docker build -t aiqtoolkit-ui .
+
+# Build without using cache (for troubleshooting or after major changes)
+docker build --no-cache -t aiqtoolkit-ui .
+
+# Requires --network=host to access external server
+docker run -d --name aiq-ui --network=host --env-file .env aiqtoolkit-ui
+```
+
+**Important Notes for Manual Docker Setup:**
+- ⚠️ **Security Warning**: Docker with `--network=host` gives the container access to all host network interfaces. Only use this for local development, never in production or shared environments.
+- Both UI options can access the calculator server on `localhost:8000` directly
 
 #### Testing the Calculator
 Interact with the chat interface by prompting the agent with the message:

compose_calculator.yaml

@@ -0,0 +1,52 @@
+services:
+
+# Building the simple_calculator server depends on images from NVIDIA's registry
+# You'll need to log in first, and have your NVIDIA API key ready.
+# Commands as follows:
+# docker login nvcr.io
+# When prompted:
+# Username: $oauthtoken
+# Password: <nvapi-your_actual_api_key_here>
+# Note: the username really is $oauthtoken (no need to change). The password is your NVIDIA API key.
+  aiq-server:
+    build:
+      context: ../NeMo-Agent-Toolkit  # Point to the sibling directory
+      dockerfile: examples/basic/functions/simple_calculator/Dockerfile
+    container_name: aiq-calculator-server
+    ports:
+      - "8000:8000"
+      - "6006:6006"  # Phoenix telemetry service
+    environment:
+      - NVIDIA_API_KEY=${NVIDIA_API_KEY}
+    networks:
+      - aiq-network
+    healthcheck:
+      test: ["CMD-SHELL", "python -c 'import urllib.request; urllib.request.urlopen(\"http://localhost:8000/docs\")' || exit 1"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+  aiq-ui:
+    build:
+      context: .  # Current directory (NeMo-Agent-Toolkit-UI)
+      dockerfile: Dockerfile
+    container_name: aiq-ui
+    ports:
+      - "3000:3000"
+    environment:
+      - NEXT_PUBLIC_WORKFLOW=AIQ Toolkit
+      - NEXT_PUBLIC_HTTP_CHAT_COMPLETION_URL=http://aiq-server:8000/chat/stream
+      - NEXT_PUBLIC_WEBSOCKET_CHAT_COMPLETION_URL=ws://aiq-server:8000/websocket
+      - NEXT_PUBLIC_WEB_SOCKET_DEFAULT_ON=false
+      - NEXT_PUBLIC_CHAT_HISTORY_DEFAULT_ON=false
+      - NEXT_PUBLIC_RIGHT_MENU_OPEN=false
+    networks:
+      - aiq-network
+    depends_on:
+      aiq-server:
+        condition: service_healthy
+
+networks:
+  aiq-network:
+    driver: bridge