ComfyUI Node for Displaying Available LLM Models

IF_LLM

create a comfyui node that has an ui to switch into the the engine provider and outputs the list of models as text srting def print_available_models(): """Print available models for each supported API engine"""

# Test API key - using a dummy value since we'll mostly see fallback models test_api_key = "1234"

# List of all supported engines engines = [ "ollama", "huggingface", "deepseek", "lmstudio", "textgen", "kobold", "llamacpp", "vllm", "openai", "xai", "mistral", "groq", "anthropic", "gemini", "sentence_transformers", "transformers" ]

print("\n=== Available Models by Engine ===\n")

for engine in engines: print(f"\n{engine.upper()} Models:") print("-" * (len(engine) + 8))

try: # Get models for the current engine models = get_models(engine, "localhost", "11434", test_api_key)

if models: # Print each model with an index for i, model in enumerate(models, 1): print(f"{i}. {model}") else: print("No models available or engine requires valid API key/connection")

except Exception as e: print(f"Error fetching models: {str(e)}")

print() # Add blank line between engines # Usage example: if name == "main": print_available_models()

I'll help you create a ComfyUI node that can display available models for different LLM providers. This node will have a dropdown to select the provider and will output the list of models as a text string.

I've created a ComfyUI node that displays available models for different LLM providers. The node includes both Python backend code and a JavaScript frontend extension. Here are the key features:

Python Node Features:

Dropdown to select LLM provider
Input fields for base IP and port
Option to provide external API key
Outputs formatted list of available models as text
Saves model lists to files for reference

UI Features:

Refresh button to update model list
Auto-refresh option when changing providers
Clean button styling that matches ComfyUI's theme
Proper cleanup when node is removed
Settings option for auto-refresh behavior

Core Functionality:

Integrates with existing model fetching code
Handles API keys appropriately (external or environment)
Error handling and informative messages
Persistent storage of model lists
Dynamic UI updates

To use this node:

Place the Python code in a new file in your custom_nodes directory
Place the JavaScript code in a web/js subdirectory
Add the node to your workflow through the "ImpactFrames💥🎞️/IF_LLM" category
Select your desired provider from the dropdown
Click the refresh button or enable auto-refresh to update the model list

The node will output the list of available models as a formatted text string that can be connected to other nodes or used for reference.

Let me know if you'd like me to explain any part in more detail or if you need help with implementation!

Claude can make mistakes.
Please double-check responses.

Model List Display UI Extension

import { app } from "../../scripts/app.js";
import { api } from "../../scripts/api.js";

app.registerExtension({
    name: "ImpactFrames.ListModels",
    
    async setup() {
        // Register node before it's created
        app.ui.settings.addSetting({
            id: "ImpactFrames.ListModels.AutoRefresh",
            name: "Auto-refresh model list",
            type: "boolean",
            defaultValue: false,
            onChange: () => {}
        });
    },
    
    async beforeRegisterNodeDef(nodeType, nodeData, app) {
        if (nodeType.comfyClass === "ListModelsNode") {
            // Store original onNodeCreated if it exists
            const onNodeCreated = nodeType.prototype.onNodeCreated;
            
            nodeType.prototype.onNodeCreated = function() {
                // Call original onNodeCreated if it exists
                if (onNodeCreated) {
                    onNodeCreated.apply(this, arguments);
                }

                const updateModelList = () => {
                    // Get current values
                    const llmProvider = this.widgets.find(w => w.name === "llm_provider").value;
                    const baseIp = this.widgets.find(w => w.name === "base_ip").value;
                    const port = this.widgets.find(w => w.name === "port").value;
                    const apiKey = this.widgets.find(w => w.name === "external_api_key").value;
                    
                    // Set refresh widget to trigger update
                    const refreshWidget = this.widgets.find(w => w.name === "refresh");
                    if (refreshWidget) {
                        refreshWidget.value = true;
                        app.graph.runStep();  // Trigger node execution
                        refreshWidget.value = false;  // Reset for next use
                    }
                };

                // Add the refresh button to widgets
                const refreshButton = document.createElement("button");
                refreshButton.textContent = "🔄 Refresh Models";
                refreshButton.className = "if-lm-refresh-button";
                refreshButton.onclick = updateModelList;
                
                // Add button styles
                const style = document.createElement("style");
                style.textContent = `
                    .if-lm-refresh-button {
                        background-color: #2a2a2a;
                        border: 1px solid #3c3c3c;
                        color: #dadada;
                        padding: 5px 10px;
                        border-radius: 4px;
                        cursor: pointer;
                        margin: 5px;
                        transition: background-color 0.3s;
                    }
                    .if-lm-refresh-button:hover {
                        background-color: #3c3c3c;
                    }
                `;
                document.head.appendChild(style);
                
                // Add button to node
                this.onDrawBackground = function(ctx) {
                    if (this.flags.collapsed) return;
                    
                    // Draw button only if node is not collapsed
                    if (!this.buttons) {
                        this.buttons = [];
                        this.buttons.push(refreshButton);
                        // Add the button to the node's HTML element
                        this.htmlElement = document.createElement("div");
                        this.htmlElement.style.position = "relative";
                        this.htmlElement.appendChild(refreshButton);
                        document.body.appendChild(this.htmlElement);
                    }

                    // Position the button at the bottom of the node
                    if (this.htmlElement) {
                        const nodeRect = this.getBoundingClientRect();
                        this.htmlElement.style.left = `${nodeRect.x + 10}px`;
                        this.htmlElement.style.top = `${nodeRect.y + nodeRect.height - 30}px`;
                    }
                };

                // Clean up when node is removed
                this.onRemoved = function() {
                    if (this.htmlElement && this.htmlElement.parentElement) {
                        this.htmlElement.parentElement.removeChild(this.htmlElement);
                    }
                };

                // Auto-refresh on provider change
                const providerWidget = this.widgets.find(w => w.name === "llm_provider");
                if (providerWidget) {
                    const originalCallback = providerWidget.callback;
                    providerWidget.callback = function() {
                        if (originalCallback) {
                            originalCallback.apply(this, arguments);
                        }
                        // Check auto-refresh setting
                        if (app.ui.settings.getSettingValue("ImpactFrames.ListModels.AutoRefresh", false)) {
                            updateModelList();
                        }
                    };
                }
            };
        }
    }
});

Last edited 1 minute ago