Presentation Tab

This is the anchor node of the whole pack. Presentation Tab is how you tell niknah's Presentation ComfyUI "this group of nodes is one page of my website." Drop one into a group, give it a name, put the nodes you want your users to reach inside that group, hit save, and you've got a tab. It's the difference between handing someone a ComfyUI graph and handing them something that feels like a normal web app.

The pitch, from the author's own framing and README: "This custom node turns a ComfyUI workflow into a normal website (nuxt / vue)" and "Turns a normal workflow into a simpler interface like A1111, forge, etc." If you've read any of the endless threads about ComfyUI's beginner wall - the KB's ecosystem essay catalogs how the "blank canvas of cryptic nodes" drives newcomers away - you know why that idea has legs. This pack lets you keep the full power of the graph on your side and ship a clean front door.

How it works

The Python side is a no-op stub; the real logic lives in the pack's frontend JS. When you hit save on the node, the frontend walks the workflow, finds every node sitting inside the same group as this Presentation Tab, and turns them into a generated Vue page. The site's server then only touches the node IDs in that group (a workflowIds allowlist inside components/tabs/<tabname>/workflow.json - worth knowing if you add custom UI that references nodes elsewhere).

The two fields are the whole story:

• name - the tab's label, e.g. "Avatar" or "Upscale".
• price - cost in cents, wired to Stripe if you set up payments in the site's .env. Set it and the tab becomes a paid generation. 0 means free.

There are no outputs. This node is the boundary: the tab's page appears at http://localhost:3000 once you save and the site builds.

How to use it (the 60-second version)

Get any workflow. Add a group. Put a Presentation Tab in it and name it. Drag the nodes you want the user to control into the group - and for inputs, prefer the pack's Presentation File / Seed / DropDown nodes so they get real pickers instead of raw text boxes. For output, use PreviewImage, SaveImage, or a video/audio output node inside the group. Click save on the Presentation Tab, then visit http://localhost:3000.

How to install it

Same path as every node in this pack - ComfyUI Manager, search "Presentation ComfyUI", or:

cd ComfyUI/custom_nodes
git clone https://github.com/niknah/presentation-ComfyUI

then restart. You need Node.js installed separately; first launch runs npm install for the Nuxt site in output/presentation-site, which takes a few minutes.

Common issues & troubleshooting

Tab doesn't appear. You forgot to hit save on the node, or the node isn't in a group. The README's flow is explicit: group → tab node → name → save.

Changes don't show. After moving nodes around, use Settings → Presentation → Rebuild (not just restart). Restart is for the server process; rebuild regenerates the site from the workflow.

Stale or duplicate pages. Check for multiple nuxt processes on the same folder and kill the strays, then restart.

Want to remove a tab? Delete the matching folder and .vue file under output/presentation-site/components/tabs/, then Settings → Presentation → Rebuild.

Security reminder. The site runs a local server on port 3000 talking to ComfyUI's unauthenticated API. Going public means following the README's basic-auth and Cloudflare steps - do not just port-forward it.