From 07f5e3dd2095e985d9ae81b1c65386cd730b5e43 Mon Sep 17 00:00:00 2001
From: skflowne <1980370+skflowne@users.noreply.github.com>
Date: Tue, 4 Feb 2025 01:31:12 +0100
Subject: [PATCH] Added an example of adding a widget to a node

---
 custom-nodes/javascript_examples.mdx | 30 ++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/custom-nodes/javascript_examples.mdx b/custom-nodes/javascript_examples.mdx
index 62461e6c..33f2e210 100644
--- a/custom-nodes/javascript_examples.mdx
+++ b/custom-nodes/javascript_examples.mdx
@@ -133,3 +133,33 @@ async nodeCreated(node) {
     }
 }
 ```
+
+## Node customization
+
+### Adding a button widget to a node
+
+```javascript
+import { app } from "../../scripts/app.js"
+import { api } from "../../scripts/api.js"
+
+app.registerExtension({
+    name: "my.custom.extension",
+    async nodeCreated(node, app) {
+        console.log("node created", node, node.comfyClass)
+        if (node.comfyClass === "ParamSequenceInput") {
+            node.addWidget("button", "Queue Prompt", "This queues the prompt just like the normal queue btn", async () => {
+                console.log("button clicked")
+                const prompt = await app.graphToPrompt()
+                console.log("current prompt", prompt)
+
+                // you could add logic to modify the prompt here
+
+                await api.queuePrompt(1, prompt) 
+                // using api.queuePrompt(1, prompt) lets you pass a custom prompt object
+                // app.queuePrompt() will queue with the result of app.graphToPrompt()
+                console.log("queued prompt")
+            })
+        }
+    },
+})
+```
\ No newline at end of file