This is the official frontend user interface component for NeMo Agent Toolkit, an open-source library for building AI agents and workflows.

This project builds upon the work of:

• chatbot-ui by Mckay Wrigley
• chatbot-ollama by Ivan Fioravanti

• 🎨 Modern and responsive user interface
• 🔄 Real-time streaming responses
• 🤝 Human-in-the-loop workflow support
• 🌙 Light/Dark theme
• 🔌 WebSocket and HTTP API integration
• 🐳 Docker support

• NeMo Agent Toolkit installed and configured
• Git
• Node.js (v18 or higher)
• npm or Docker

Clone the repository:

git clone git@github.com:NVIDIA/NeMo-Agent-Toolkit-UI.git
cd NeMo-Agent-Toolkit-UI

Install dependencies:

npm ci

npm run dev

The application will be available at http://localhost:3000

# Build the Docker image
docker build -t nemo-agent-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 nemo-agent-toolkit-ui

The application uses a unified proxy architecture for improved security. All configuration is done via environment variables in a .env file.

Backend Configuration (Required):

• NAT_BACKEND_URL - Required - Full backend URL including protocol (e.g., http://127.0.0.1:8000 or https://api.example.com)
  • This is server-only and never exposed to the browser
  • Used for both HTTP API and WebSocket connections
  • Replaces the old NEXT_PUBLIC_NAT_BACKEND_ADDRESS variable

Application Configuration:

• NEXT_PUBLIC_NAT_WORKFLOW - Application workflow name displayed in the UI
• NEXT_PUBLIC_NAT_DEFAULT_ENDPOINT - Default endpoint selection

Feature Toggles:

• NEXT_PUBLIC_NAT_WEB_SOCKET_DEFAULT_ON - Enable WebSocket mode by default (true/false)
• NEXT_PUBLIC_NAT_CHAT_HISTORY_DEFAULT_ON - Enable chat history persistence by default (true/false)
• NEXT_PUBLIC_NAT_RIGHT_MENU_OPEN - Show right menu panel by default (true/false)
• NEXT_PUBLIC_NAT_ENABLE_INTERMEDIATE_STEPS - Show AI reasoning steps by default (true/false)
• NEXT_PUBLIC_NAT_ADDITIONAL_VIZ_DEFAULT_ON - View settings and toggles not part of the core functionality (true/false)
• NEXT_PUBLIC_NAT_SHOW_DATA_STREAM_DEFAULT_ON - Show data stream display by default (true/false)

Proxy Configuration

• PORT - Public gateway port that the browser connects to (default: 3000, auto-detects if busy)
• NEXT_INTERNAL_URL - Internal Next.js dev server URL (default: http://localhost:3001)
• HTTP_PUBLIC_PATH - Public HTTP path prefix for API requests (default: /api)
• WS_PUBLIC_PATH - Public WebSocket path (default: /ws)

Optional Configuration:

• NAT_DEFAULT_MODEL - Default AI model identifier for server-side rendering
• NAT_MAX_FILE_SIZE_STRING - Maximum file upload size for all operations (e.g., '5mb', '10mb', '1gb')
• NEXT_TELEMETRY_DISABLED - Disable Next.js telemetry data collection (1 to disable)
• NEXT_PUBLIC_MCP_PATH - MCP client API path (defaults to /mcp/client/tool/list)

Settings can be configured by selecting the Settings icon located on the bottom left corner of the home page.

The UI supports two communication modes:

HTTP/REST (Default)

• Standard request-response pattern
• OpenAI Chat Completions compatible
• Supports both streaming and non-streaming responses
• Best for: Simple request-response workflows, stateless interactions

WebSocket (Real-time)

• Bidirectional persistent connections
• Required for Human-in-the-Loop (HITL) workflows
• Enables server-initiated messages and interruptions
• Best for: Interactive workflows, multi-turn conversations, HITL scenarios

For detailed WebSocket integration and message formats, refer to the WebSocket Documentation in the NeMo Agent Toolkit documentation.

Appearance:

• Theme: Switch between Light and Dark mode

API Configuration:

• HTTP Endpoint: Select API endpoint type:
  • Chat Completions — Streaming - Real-time OpenAI Chat Completions compatible API endpoint with streaming responses
  • Chat Completions — Non-Streaming - Standard OpenAI Chat Completions compatible API endpoint
  • Generate — Streaming - Text generation with streaming
  • Generate — Non-Streaming - Standard text generation
  • Context-Aware RAG — Non-Streaming (Experimental) - Experimental integration with Context-Aware RAG backend
• Optional Generation Parameters: OpenAI Chat Completions compatible JSON parameters that can be added to the request body (available for chat endpoints)

WebSocket Configuration: The WebSocket path defaults to websocket.

• WebSocket Schema: Select schema for real-time connections:
  • Chat Completions — Streaming - Streaming chat over WebSocket
  • Chat Completions — Non-Streaming - Non-streaming chat over WebSocket
  • Generate — Streaming - Streaming generation over WebSocket
  • Generate — Non-Streaming - Non-streaming generation over WebSocket

Note: For intermediate results streaming, use Chat Completions — Streaming (/chat/stream) or Generate — Streaming (/generate/stream).

Note: This is an experimental feature

The live data streaming feature allows visualization of real-time text updates across multiple streams. This is useful for monitoring ongoing processes or displaying live transcription or streaming data.

For more detail, see the README for live data streaming.

This example demonstrates an agent workflow using HTTP streaming with intermediate step visualization.

First, install and configure NeMo Agent Toolkit, then start the simple calculator workflow:

# Start the NeMo Agent Toolkit backend with the calculator example
nat serve --config_file=examples/getting_started/simple_calculator/configs/config.yml

For detailed setup instructions, see the Simple Calculator Example in the NeMo Agent Toolkit repository.

Open the settings panel (gear icon in bottom left) and configure:

• HTTP Endpoint: Select Chat Completions — Streaming (OpenAI compatible, default setting) to enable real-time streaming responses
• Enable Intermediate Steps: Toggle on to see the agent's reasoning process

Interact with the chat interface by prompting the agent with the message:

Is 4 + 4 greater than the current hour of the day?

The agent will:

1. Break down the problem into steps
2. Call the calculator tool to compute 4 + 4 = 8
3. Get the current time
4. Compare the values and provide an answer

Expected Result: The UI displays both the intermediate reasoning steps and the final answer, showing how the agent solves the problem step-by-step.

This example demonstrates bidirectional real-time communication using WebSockets, allowing human intervention during agent execution.

Start the HITL-enabled calculator workflow:

# Start the NeMo Agent Toolkit backend with HITL support
nat serve --config_file=examples/HITL/simple_calculator_hitl/configs/config-hitl.yml

For complete setup instructions, see the HITL Example in the NeMo Agent Toolkit repository.

Enable WebSocket for bidirectional real-time communication:

1. Open the panel on the top right of the webpage
2. Toggle the WebSocket button to ON
3. You will see a notification that says "websocket connected" when successfully connected
4. In settings, ensure WebSocket Schema is set to Chat Completions — Streaming

Step 1: Interact with the chat by submitting the prompt below:

Is 4 + 4 greater than the current hour of the day?

Step 2: The agent will pause and request your input via an interactive modal:

Step 3: Enter your response in the human-in-the-loop modal (e.g., "yes" or "no") and click Submit.

Expected Result: The agent receives your input and continues execution, displaying intermediate reasoning steps and the final answer. The result will be identical to what was demonstrated in the Quick Start: Simple Calculator Example above.

This project is licensed under the MIT License - see the LICENSE file for details. The project includes code from chatbot-ui and chatbot-ollama, which are also MIT licensed.