Implementation:FlowiseAI Flowise NvidiaNIMDialog

Knowledge Sources	FlowiseAI Flowise
Domains	UI Components, GPU Inference
Last Updated	2026-02-12 07:00 GMT

Overview

NvidiaNIMDialog is a multi-step wizard dialog component that guides users through downloading, pulling, and starting an NVIDIA NIM container for local GPU-accelerated model inference.

Description

This React dialog component implements a three-step stepper workflow for deploying NVIDIA NIM (NVIDIA Inference Microservice) containers. It supports selecting from pre-configured model images (Llama 3.1 8B, DeepSeek R1 Distill Llama 8B, and Mistral Nemo 12B), pulling Docker images from NVIDIA's container registry, and starting containers with configurable host port and memory constraint settings. The component polls the server for image pull and container start status using interval-based polling mechanisms.

Usage

Use this component when providing users with a guided interface to deploy NVIDIA NIM containers locally. It is typically opened from a configuration panel where GPU inference setup is needed, and returns container information via the onComplete callback upon successful deployment.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/dialog/NvidiaNIMDialog.jsx
• Lines: 1-477

Signature

const NvidiaNIMDialog = ({ open, onClose, onComplete }) => {
    // Three-step stepper: 'Download Installer', 'Pull Image', 'Start Container'
    // Manages model selection, image pulling with polling, and container startup
}

Import

import NvidiaNIMDialog from '@/ui-component/dialog/NvidiaNIMDialog'

I/O Contract

Inputs

Name	Type	Required	Description
open	bool	Yes	Controls whether the dialog is visible
onClose	func	Yes	Callback invoked when the dialog should close
onComplete	func	Yes	Callback invoked with container data upon successful container start

Outputs

Name	Type	Description
Rendered Dialog	React Portal	A MUI Dialog rendered via createPortal to the portal element
onComplete(containerData)	object	Container information returned when the NIM container is running

Internal State

State Variable	Type	Description
activeStep	number	Current step index in the wizard (0-2)
loading	bool	Whether an async operation is in progress
imageTag	string	Selected NIM model image tag from the dropdown
pollInterval	number	Interval ID for polling image/container status
nimRelaxMemConstraints	string	Whether to relax GPU memory constraints ('0' or '1')
hostPort	string	Host port number for the container (default '8080')
showContainerConfirm	bool	Whether to show the existing container confirmation dialog
existingContainer	object	Data about an existing container if one is found

Supported Models

Model	Image Tag
Llama 3.1 8B Instruct	nvcr.io/nim/meta/llama-3.1-8b-instruct:1.8.0-RTX
DeepSeek R1 Distill Llama 8B	nvcr.io/nim/deepseek-ai/deepseek-r1-distill-llama-8b:1.8.0-RTX
Mistral Nemo 12B Instruct	nvcr.io/nim/nv-mistralai/mistral-nemo-12b-instruct:1.8.0-rtx

API Endpoints Used

• GET /api/v1/nvidia-nim/download-installer - Downloads the NIM installer
• GET /api/v1/nvidia-nim/preload - Preloads NIM dependencies
• GET /api/v1/nvidia-nim/get-token - Retrieves authentication token
• POST /api/v1/nvidia-nim/pull-image - Pulls the Docker image
• POST /api/v1/nvidia-nim/get-image - Checks image pull status
• POST /api/v1/nvidia-nim/start-container - Starts the container
• POST /api/v1/nvidia-nim/get-container - Checks container status

Usage Examples

Basic Usage

import NvidiaNIMDialog from '@/ui-component/dialog/NvidiaNIMDialog'

const MyComponent = () => {
    const [nimDialogOpen, setNimDialogOpen] = useState(false)

    const handleNimComplete = (containerData) => {
        console.log('Container started:', containerData.name, containerData.status)
        // Use container info (e.g., set base URL for inference)
    }

    return (
        <>
            <Button onClick={() => setNimDialogOpen(true)}>Setup NIM</Button>
            <NvidiaNIMDialog
                open={nimDialogOpen}
                onClose={() => setNimDialogOpen(false)}
                onComplete={handleNimComplete}
            />
        </>
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_Model_Configuration