NVIDIA/NeMo-Agent-Toolkit-UI

NVIDIA/NeMo-Agent-Toolkit-UI

Description: The NVIDIA NeMo Agent Toolkit UI streamlines interacting with NeMo Agent Toolkit workflows in an easy-to-use web application.

Language: TypeScript

License: NOASSERTION

Stars: 100

Forks: 56

Open issues: 13

Created: 2025-03-07T21:21:51Z

Pushed: 2026-06-10T21:12:47Z

Default branch: main

Fork: no

Archived: no

README:

NeMo Agent Toolkit - UI

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

Features

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

Getting Started

Prerequisites

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

Installation

Clone the repository:

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

Install dependencies:

npm ci

Running the Application

Local Development

npm run dev

The application will be available at the proxy port configured in your PORT environment variable (default: http://localhost:3000)

> Important: Check terminal startup logs for the actual web application URL (e.g., http://localhost:3000). If the configured port conflicts, an alternate port will be assigned. Do not access the internal Next.js port directly (default: 3099) as API and WebSocket communication will fail.

Docker Deployment

# 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


Configuration

Environment Variables

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_GREETING_TITLE - Optional custom greeting title shown on empty chat
• NEXT_PUBLIC_NAT_GREETING_SUBTITLE - Optional custom greeting subtitle shown on empty chat
• NEXT_PUBLIC_NAT_INPUT_PLACEHOLDER - Optional custom placeholder text for the chat input field
• NEXT_PUBLIC_NAT_DISCLAIMER_MESSAGE - Optional custom disclaimer message shown below chat input field
• NEXT_PUBLIC_NAT_WELCOME_MESSAGE_ON - Enable welcome message (see [Welcome Message Customization](#welcome-message-customization))
• NEXT_PUBLIC_NAT_PROMPT_SUGGESTIONS_ON - Enable prompt suggestions feature (see [Prompt Suggestions Customization](#prompt-suggestions-customization))

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:3099). Must match the port in package.json.
• 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)

Welcome Message Customization

This application can optionally display a welcome message on the initial chat screen. Follow the instructions below to enable and customize the message:

1. Enable the welcome message by setting the environment variable:

NEXT_PUBLIC_NAT_WELCOME_MESSAGE_ON=true

2. Copy the example file:

cp public/content/welcome.md.example public/content/welcome.md

3. Edit public/content/welcome.md to customize the welcome message with your own content, features, and instructions. The message is rendered with Markdown support, allowing you to use headings, lists, bold/italic text, links, and other Markdown features.

• If deploying with Docker, mount your custom welcome message:

docker run -v /path/to/your/welcome.md:/app/public/content/welcome.md -p 3000:3000 nemo-agent-toolkit-ui

Prompt Suggestions Customization

This application can optionally display a prompt suggestions feature that suggests prompts to users. Follow the instructions below to enable and customize it:

1. Enable the prompt suggestions by setting the environment variable:

NEXT_PUBLIC_NAT_PROMPT_SUGGESTIONS_ON=true

2. Copy the example configuration:

cp public/content/promptSuggestions.json.example public/content/promptSuggestions.json

3. Edit public/content/promptSuggestions.json to add your custom categories and prompts. The file uses a simple JSON format with category names as…