[FEA] Simple Calculator with Nemo-Agent-Toolkit-UI

examples/getting_started/simple_calculator/.env.docker.ui

@@ -0,0 +1,28 @@
+# Next.js Docker Configuration for Nemo-Agent-Toolkit UI
+#
+# Please see the README.md "Build UI Docker Image" to see full usage. This file defines Next.js build-time environment variables to 
+# connect the agent server with the Nemo-Agent-Toolkit UI. Next.js favors build-time environment variables for performance and security. 
+#
+# Once the UI image is built, a docker compose is run to deploy both the UI + agent server e.g., simple_calculator
+# on the same docker network.
+#
+# Note: Next.js automatically loads environment files in this priority order during the build process:
+# .env.production.local (highest priority)
+# .env.local
+# .env.production ← This is what we'd use (this file gets renamed to .env.production)
+# .env (lowest priority)
+
+# Note: nemoagenttoolkit-server below corresponds to the service defined in the docker compose file.
+NEXT_PUBLIC_HTTP_CHAT_COMPLETION_URL=http://nemoagenttoolkit-server:8000/generate
+NEXT_PUBLIC_HTTP_CHAT_COMPLETION_URL_STREAMING=http://nemoagenttoolkit-server:8000/chat/stream
+NEXT_PUBLIC_HTTP_FILE_UPLOAD_URL=http://nemoagenttoolkit-server:8000/files/upload
+NEXT_PUBLIC_HTTP_DELETE_CONVERSATION_URL=http://nemoagenttoolkit-server:8000/conversations
+
+# WebSocket URLs using Docker service name  
+NEXT_PUBLIC_WEBSOCKET_CHAT_COMPLETION_URL=ws://nemoagenttoolkit-server:8000/websocket
+NEXT_PUBLIC_WS_CHAT_COMPLETION_URL=ws://nemoagenttoolkit-server:8000/chat/stream
+
+# Default feature flags
+NEXT_PUBLIC_CHAT_HISTORY_DEFAULT_ON=true
+NEXT_PUBLIC_WEB_SOCKET_DEFAULT_ON=false
+NEXT_PUBLIC_ENABLE_INTERMEDIATE_STEPS=true

examples/getting_started/simple_calculator/README.md

@@ -31,6 +31,7 @@ This example demonstrates an end-to-end (E2E) agentic workflow using the NeMo Ag
   - [Run the Docker Container](#run-the-docker-container)
   - [Test the API](#test-the-api)
   - [Expected API Output](#expected-api-output)
+  - [Deployment with UI](#deployment-with-ui)
 
 ---
 
@@ -61,7 +62,6 @@ If you have not already done so, follow the [Obtaining API Keys](../../../docs/s
 
 ```bash
 export NVIDIA_API_KEY=<YOUR_API_KEY>
-export OPENAI_API_KEY=<YOUR_API_KEY>  # OPTIONAL
 ```
 
 ### Run the Workflow
@@ -87,7 +87,7 @@ For a production deployment, use Docker:
 
 Prior to building the Docker image ensure that you have followed the steps in the [Installation and Setup](#installation-and-setup) section, and you are currently in the NeMo Agent toolkit virtual environment.
 
-From the root directory of the Simple Calculator repository, build the Docker image:
+From the root directory of the NeMo-Agent-Toolkit repository, build the Docker image:
 
 ```bash
 docker build --build-arg NAT_VERSION=$(python -m setuptools_scm) -t simple_calculator -f examples/getting_started/simple_calculator/Dockerfile .
@@ -97,7 +97,7 @@ docker build --build-arg NAT_VERSION=$(python -m setuptools_scm) -t simple_calcu
 Deploy the container:
 
 ```bash
-docker run -p 8000:8000 -p 6006:6006 -e NVIDIA_API_KEY -e OPENAI_API_KEY simple_calculator
+docker run --name simple_calculator_container -p 8000:8000 -p 6006:6006 -e NVIDIA_API_KEY simple_calculator
 ```
 
 Note, a phoenix telemetry service will be exposed at port 6006.
@@ -122,3 +122,78 @@ The API response should be similar to the following:
   "value": "No, the product of 2 * 4 (which is 8) is less than the current hour of the day (which is 16)."
 }
 ```
+
+To stop and remove the container:
+
+```bash
+docker stop simple_calculator_container
+docker rm simple_calculator_container
+```
+
+### Deployment with UI
+
+The example can be run with the NeMo-Agent-Toolkit UI. After building the simple_calculator image previously, this will build the UI docker image, and deploy both with network connectivity via a docker compose file. 
+
+**Prerequisites:**
+- You must have the built `simple_calculator` image (see [Build the Docker Image](#build-the-docker-image) above)
+
+#### Build UI Docker Image
+
+```bash
+export WORKPATH=~/Projects  # Set this to the parent directory containing NeMo-Agent-Toolkit
+
+git clone git@github.com:NVIDIA/NeMo-Agent-Toolkit-UI.git $WORKPATH/NeMo-Agent-Toolkit-UI
+
+cd $WORKPATH/NeMo-Agent-Toolkit-UI
+
+# Set Next.js build environment variables for UI 
+cp $WORKPATH/NeMo-Agent-Toolkit/examples/getting_started/simple_calculator/.env.docker.ui .env.production
+
+docker build -t nemoagenttoolkit-ui .
+```
+
+#### Deploy Simple LLM Calculator + UI
+
+After building the UI image above use docker compose to deploy:
+
+```bash
+cd $WORKPATH/NeMo-Agent-Toolkit/examples/getting_started/simple_calculator
+
+docker compose -f compose_calculator.yaml up -d
+```
+
+This will:
+- Build and start the calculator server on port 8000
+- Build and start the web UI on port 3000
+- Create a secure bridge network for container communication
+
+#### Verify Deployment
+
+1. **Check service status:**
+   ```bash
+   docker compose ps -a
+   ```
+
+2. **View logs:**
+   ```bash
+   docker logs nemoagenttoolkit-server
+   docker logs nemoagenttoolkit-ui
+   ```
+
+3. **Access the services:**
+   - Web UI: http://localhost:3000
+   - API Documentation: http://localhost:8000/docs
+
+Interact with the chat interface by prompting the agent with the message:
+```
+Is 4 + 4 greater than the current hour of the day?
+```
+
+![AIQ Toolkit Web UI Workflow Result](https://github.com/NVIDIA/NeMo-Agent-Toolkit-UI/raw/main/public/screenshots/ui_generate_example.png)
+
+#### Stop the Services
+
+To stop all services:
+```bash
+docker compose -f compose_calculator.yaml down
+```

examples/getting_started/simple_calculator/compose_calculator.yaml

@@ -0,0 +1,32 @@
+services:
+
+  nemoagenttoolkit-server:
+    image: simple_calculator
+    container_name: nemoagenttoolkit-server
+    ports:
+      - "8000:8000"
+    environment:
+      - NVIDIA_API_KEY=${NVIDIA_API_KEY}
+    networks:
+      - nemoagenttoolkit-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
+
+  nemoagenttoolkit-ui:
+    image: nemoagenttoolkit-ui
+    container_name: nemoagenttoolkit-ui
+    ports:
+      - "3000:3000"
+    networks:
+      - nemoagenttoolkit-network
+    depends_on:
+      nemoagenttoolkit-server:
+        condition: service_healthy
+
+networks:
+  nemoagenttoolkit-network:
+    driver: bridge