[FEA] Simple Calculator with Nemo-Agent-Toolkit-UI #497
Conversation
…e_calculator Signed-off-by: Ed Lee <[email protected]>
Signed-off-by: Ed Lee <[email protected]>
…nt-Toolkit into simple_calculator_w_ui
…Agent-Toolkit-UI Signed-off-by: Ed Lee <[email protected]>
Signed-off-by: Ed Lee <[email protected]>
Signed-off-by: Ed Lee <[email protected]>
Signed-off-by: Ed Lee <[email protected]>
Signed-off-by: Ed Lee <[email protected]>
Signed-off-by: Ed Lee <[email protected]>
Signed-off-by: Ed Lee <[email protected]>
Signed-off-by: Ed Lee <[email protected]>
edlee123
changed the title
edlee123
changed the title
WalkthroughAdds Docker Compose deployment for the simple_calculator with UI, introduces a Next.js UI environment file for containerized networking, and updates the README with end-to-end UI+API deployment steps, commands, and teardown. Includes service healthcheck configuration and explicit ports, container names, and shared network. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant User
participant UI as nemoagenttoolkit-ui (Next.js)
participant Server as nemoagenttoolkit-server (API)
participant Compose as docker compose
Note over Compose: docker compose up -f compose_calculator.yaml
Compose->>Server: Start container (simple_calculator)
Server->>Server: Healthcheck GET /docs (periodic)
Compose->>UI: Start container (after Server healthy)
Note over UI,Server: Shared network: nemoagenttoolkit-network
User->>UI: Open http://localhost:3000
UI->>Server: HTTP POST /generate<br/>WS ws://.../websocket or /chat/stream
Server-->>UI: Responses / streamed tokens
UI-->>User: Render results
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested labels
Pre-merge checks (3 passed, 2 warnings)❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. ✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (9)
examples/getting_started/simple_calculator/compose_calculator.yaml (3)
12-17: Tighten healthcheck with a socket timeout (or curl) to avoid hangs.urllib without an explicit timeout can block until the container receives SIGKILL at the Docker timeout. Set a per-request timeout for faster, deterministic failures.
- healthcheck: - test: ["CMD-SHELL", "python -c 'import urllib.request; urllib.request.urlopen(\"http://localhost:8000/docs\")' || exit 1"] + healthcheck: + test: ["CMD-SHELL", "python -c 'import urllib.request; urllib.request.urlopen(\"http://localhost:8000/docs\", timeout=5)' || exit 1"] interval: 30s timeout: 10s retries: 3 start_period: 40s
3-11: Add a restart policy for resilience.Examples benefit from auto-restart on transient failures or host reboots.
nemoagenttoolkit-server: image: simple_calculator container_name: nemoagenttoolkit-server + restart: unless-stopped @@ nemoagenttoolkit-ui: image: nemoagenttoolkit-ui container_name: nemoagenttoolkit-ui + restart: unless-stoppedAlso applies to: 19-28
26-28: Optional: UI healthcheck.If the UI exposes a lightweight endpoint (e.g., GET / or /api/health), consider adding a healthcheck for symmetry and better diagnostics.
examples/getting_started/simple_calculator/.env.docker.ui (2)
16-19: Satisfy dotenv-linter key ordering warnings.Reorder keys alphabetically to silence UnorderedKey warnings.
-NEXT_PUBLIC_HTTP_FILE_UPLOAD_URL=http://localhost:8000/files/upload -NEXT_PUBLIC_HTTP_DELETE_CONVERSATION_URL=http://localhost:8000/conversations +NEXT_PUBLIC_HTTP_DELETE_CONVERSATION_URL=http://localhost:8000/conversations +NEXT_PUBLIC_HTTP_FILE_UPLOAD_URL=http://localhost:8000/files/upload @@ -NEXT_PUBLIC_WEB_SOCKET_DEFAULT_ON=false -NEXT_PUBLIC_ENABLE_INTERMEDIATE_STEPS=true +NEXT_PUBLIC_ENABLE_INTERMEDIATE_STEPS=true +NEXT_PUBLIC_WEB_SOCKET_DEFAULT_ON=falseAlso applies to: 26-28
1-14: HTTPS note for production.When serving over HTTPS, these should use wss:// and https:// (or be proxied through the UI’s origin) to avoid mixed-content errors.
examples/getting_started/simple_calculator/README.md (4)
183-186: Fix markdownlint bare-URL warnings by linking text.Replace bare URLs with proper links.
-3. **Access the services:** - - Web UI: http://localhost:3000 - - API Documentation: http://localhost:8000/docs +3. **Access the services:** + - Web UI: [http://localhost:3000](http://localhost:3000) + - API Documentation: [http://localhost:8000/docs](http://localhost:8000/docs)
188-190: Add a code block language.Silence MD040 by specifying a language; “text” is fine here.
-``` +```text Is 4 + 4 greater than the current hour of the day?--- `165-176`: **Add a short note that images must exist before compose up.** Preempt user confusion when images aren’t found. ```diff #### Deploy Simple LLM Calculator + UI @@ -After building the UI image above use docker compose to deploy: +After building the UI image above (and the simple_calculator image earlier), use docker compose to deploy. If images aren’t present locally, build them first or run with `--build`.
183-191: Call out CORS as a common pitfall.UI (port 3000) calls API (port 8000) from the browser. Ensure the API enables CORS for the UI origin.
3. **Access the services:** - Web UI: [http://localhost:3000](http://localhost:3000) - API Documentation: [http://localhost:8000/docs](http://localhost:8000/docs) Interact with the chat interface by prompting the agent with the message: @@  + +Note: If the UI cannot reach the API, verify that the API container enables CORS for the UI origin (http://localhost:3000) or proxy API calls through the UI server.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
examples/getting_started/simple_calculator/.env.docker.ui(1 hunks)examples/getting_started/simple_calculator/README.md(4 hunks)examples/getting_started/simple_calculator/compose_calculator.yaml(1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{py,sh,md,yml,yaml,toml,ini,json,ipynb,txt,rst}
📄 CodeRabbit inference engine (.cursor/rules/general.mdc)
**/*.{py,sh,md,yml,yaml,toml,ini,json,ipynb,txt,rst}: Every file must start with the standard SPDX Apache-2.0 header; keep copyright years up‑to‑date
All source files must include the SPDX Apache‑2.0 header; do not bypass CI header checks
Files:
examples/getting_started/simple_calculator/compose_calculator.yamlexamples/getting_started/simple_calculator/README.md
**/*
⚙️ CodeRabbit configuration file
**/*: # Code Review Instructions
- Ensure the code follows best practices and coding standards. - For Python code, follow
PEP 20 and
PEP 8 for style guidelines.- Check for security vulnerabilities and potential issues. - Python methods should use type hints for all parameters and return values.
Example:def my_function(param1: int, param2: str) -> bool: pass- For Python exception handling, ensure proper stack trace preservation:
- When re-raising exceptions: use bare
raisestatements to maintain the original stack trace,
and uselogger.error()(notlogger.exception()) to avoid duplicate stack trace output.- When catching and logging exceptions without re-raising: always use
logger.exception()
to capture the full stack trace information.Documentation Review Instructions - Verify that documentation and comments are clear and comprehensive. - Verify that the documentation doesn't contain any TODOs, FIXMEs or placeholder text like "lorem ipsum". - Verify that the documentation doesn't contain any offensive or outdated terms. - Verify that documentation and comments are free of spelling mistakes, ensure the documentation doesn't contain any
words listed in the
ci/vale/styles/config/vocabularies/nat/reject.txtfile, words that might appear to be
spelling mistakes but are listed in theci/vale/styles/config/vocabularies/nat/accept.txtfile are OK.Misc. - All code (except .mdc files that contain Cursor rules) should be licensed under the Apache License 2.0,
and should contain an Apache License 2.0 header comment at the top of each file.
- Confirm that copyright years are up-to date whenever a file is changed.
Files:
examples/getting_started/simple_calculator/compose_calculator.yamlexamples/getting_started/simple_calculator/README.md
examples/**/*
⚙️ CodeRabbit configuration file
examples/**/*: - This directory contains example code and usage scenarios for the toolkit, at a minimum an example should
contain a README.md or file README.ipynb.
- If an example contains Python code, it should be placed in a subdirectory named
src/and should
contain apyproject.tomlfile. Optionally, it might also contain scripts in ascripts/directory.- If an example contains YAML files, they should be placed in a subdirectory named
configs/. - If an example contains sample data files, they should be placed in a subdirectory nameddata/, and should
be checked into git-lfs.
Files:
examples/getting_started/simple_calculator/compose_calculator.yamlexamples/getting_started/simple_calculator/README.md
**/README.{md,ipynb}
📄 CodeRabbit inference engine (.cursor/rules/general.mdc)
Each documentation README must follow the NeMo Agent toolkit naming rules and must not use deprecated names
Files:
examples/getting_started/simple_calculator/README.md
**/*.{py,md}
📄 CodeRabbit inference engine (.cursor/rules/general.mdc)
Never hard‑code version numbers in code or docs; versions are derived by setuptools‑scm
Files:
examples/getting_started/simple_calculator/README.md
🪛 dotenv-linter (3.3.0)
examples/getting_started/simple_calculator/.env.docker.ui
[warning] 19-19: [UnorderedKey] The NEXT_PUBLIC_HTTP_DELETE_CONVERSATION_URL key should go before the NEXT_PUBLIC_HTTP_FILE_UPLOAD_URL key
(UnorderedKey)
[warning] 28-28: [UnorderedKey] The NEXT_PUBLIC_ENABLE_INTERMEDIATE_STEPS key should go before the NEXT_PUBLIC_WEB_SOCKET_DEFAULT_ON key
(UnorderedKey)
🪛 markdownlint-cli2 (0.17.2)
examples/getting_started/simple_calculator/README.md
184-184: Bare URL used
(MD034, no-bare-urls)
185-185: Bare URL used
(MD034, no-bare-urls)
188-188: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🔇 Additional comments (1)
examples/getting_started/simple_calculator/.env.docker.ui (1)
21-24: Confirm variable naming and duplication.Both NEXT_PUBLIC_WEBSOCKET_CHAT_COMPLETION_URL and NEXT_PUBLIC_WS_CHAT_COMPLETION_URL exist and point to different endpoints (/websocket vs /chat/stream). Verify the UI actually consumes both and that the semantics are intentional.
| # 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 | ||
|
|
There was a problem hiding this comment.
Fix: Docker service DNS isn’t resolvable by the end-user’s browser. Use localhost for client-visible URLs.
NEXT_PUBLIC_* variables are embedded in the client bundle, so the browser will try to reach ws/http hosts directly. nemoagenttoolkit-server is only resolvable inside the Docker network, not from the host. This will cause the UI to fail to connect.
Minimal fix (host-accessible endpoints):
-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
+NEXT_PUBLIC_HTTP_CHAT_COMPLETION_URL=http://localhost:8000/generate
+NEXT_PUBLIC_HTTP_CHAT_COMPLETION_URL_STREAMING=http://localhost:8000/chat/stream
+NEXT_PUBLIC_HTTP_FILE_UPLOAD_URL=http://localhost:8000/files/upload
+NEXT_PUBLIC_HTTP_DELETE_CONVERSATION_URL=http://localhost:8000/conversations
@@
-NEXT_PUBLIC_WEBSOCKET_CHAT_COMPLETION_URL=ws://nemoagenttoolkit-server:8000/websocket
-NEXT_PUBLIC_WS_CHAT_COMPLETION_URL=ws://nemoagenttoolkit-server:8000/chat/stream
+NEXT_PUBLIC_WEBSOCKET_CHAT_COMPLETION_URL=ws://localhost:8000/websocket
+NEXT_PUBLIC_WS_CHAT_COMPLETION_URL=ws://localhost:8000/chat/streamAlternative (more robust): keep internal server URL in a non-public var and proxy via Next.js rewrites (so the browser hits /api/* on port 3000). If you want this, I can provide a next.config.js/mjs patch.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| # 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 | |
| # Note: nemoagenttoolkit-server below corresponds to the service defined in the docker compose file. | |
| NEXT_PUBLIC_HTTP_CHAT_COMPLETION_URL=http://localhost:8000/generate | |
| NEXT_PUBLIC_HTTP_CHAT_COMPLETION_URL_STREAMING=http://localhost:8000/chat/stream | |
| NEXT_PUBLIC_HTTP_FILE_UPLOAD_URL=http://localhost:8000/files/upload | |
| NEXT_PUBLIC_HTTP_DELETE_CONVERSATION_URL=http://localhost:8000/conversations | |
| # WebSocket URLs using Docker service name | |
| NEXT_PUBLIC_WEBSOCKET_CHAT_COMPLETION_URL=ws://localhost:8000/websocket | |
| NEXT_PUBLIC_WS_CHAT_COMPLETION_URL=ws://localhost:8000/chat/stream |
🧰 Tools
🪛 dotenv-linter (3.3.0)
[warning] 19-19: [UnorderedKey] The NEXT_PUBLIC_HTTP_DELETE_CONVERSATION_URL key should go before the NEXT_PUBLIC_HTTP_FILE_UPLOAD_URL key
(UnorderedKey)
🤖 Prompt for AI Agents
In examples/getting_started/simple_calculator/.env.docker.ui around lines 15 to
24, the NEXT_PUBLIC_* URLs point to the Docker service name
(nemoagenttoolkit-server) which is not resolvable by the browser; update these
client-visible NEXT_PUBLIC_HTTP_* and NEXT_PUBLIC_WEBSOCKET_* entries to use
localhost (and the host-mapped ports) so the browser can reach the server (e.g.,
http://localhost:8000 and ws://localhost:8000), or alternatively remove public
URLs and expose an internal non-public var for the Docker service while adding a
Next.js proxy/rewrite (keep internal var like
INTERNAL_SERVER_URL=nemoagenttoolkit-server:8000 and configure rewrites) if you
prefer to proxy via the Next.js app.
| @@ -0,0 +1,32 @@ | |||
| services: | |||
There was a problem hiding this comment.
Add SPDX Apache-2.0 header to satisfy CI policy.
All YAML files must start with the standard SPDX header. Please prepend the header as YAML comments.
+##
+# SPDX-FileCopyrightText: Copyright (c) 2025, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+# SPDX-License-Identifier: Apache-2.0
+##
services:📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| services: | |
| ## | |
| # SPDX-FileCopyrightText: Copyright (c) 2025, NVIDIA CORPORATION & AFFILIATES. All rights reserved. | |
| # SPDX-License-Identifier: Apache-2.0 | |
| ## | |
| services: |
🤖 Prompt for AI Agents
In examples/getting_started/simple_calculator/compose_calculator.yaml around
lines 1 to 1, the file is missing the required SPDX header; prepend the standard
SPDX header as YAML comments at the very top of the file (e.g. add one or more
comment lines that include "SPDX-License-Identifier: Apache-2.0") so the file
begins with the SPDX Apache-2.0 identifier before any other content.
Description
This PR allows users to interact with the simple calculator agent via a web UI, not just command line API. It provides deployment instructions and configuration to enable running the simple_calculator example with the NeMo-Agent-Toolkit-UI.
This PR closes NVIDIA/NeMo-Agent-Toolkit-UI#23.
Key Changes
README.md: Added a new "Deployment with UI" section with step-by-step instructions for building and running the UI with Docker Compose.
Docker Compose: Added a compose_calculator.yaml file to orchestrate both the calculator server and the UI on a shared Docker network.
UI Configuration: Provided Next.js build configuration for NeMo-Agent-Toolkit-UI that configures the http, websocket connection between calculator server and UI (Next.js encourages build time environment variables).
By Submitting this PR I confirm:
Summary by CodeRabbit
New Features
Documentation