Sharing a ComfyUI workflow with a group of users can be challenging. Recipients need to install all required nodes and models, and the interface can be intimidating. Additionally, you may want to protect your intellectual property by only showing users the workflow's output. This guide will walk you through using ViewComfy's Open Source UI builder with an ngrok tunnel as an easy and free solution to these challenges.

For those unfamiliar with working directly in the terminal, this guide uses a Linux terminal to run all commands. Most commands should also work with Mac or Windows terminals, but links to useful resources are provided in case of issues.

1. Installing NodeJS

ViewComfy is a Next.js app and the first thing you will need to do is to make sure that you have node version 18.18 or higher installed. You can check your node version with:

node -v

If you encounter an error or are running an outdated version, you can install NodeJS programmatically using the node package manager: https://nodejs.org/en/download/package-manager

Alternatively, you can download it directly from their website: https://nodejs.org/en

2. Installing the ComfyUI CLI

If you haven’t installed it already, you will also need the Comfy CLI to run View Comfy. To install it you can simply run:

pip install comfy-cli

Ensure the CLI points to the ComfyUI installation you're using for your workflow. This step is crucial because ViewComfy will utilize the nodes and models from that specific installation when running your app. Verify your workflow runs without errors in ComfyUI before using ViewComfy!

To check which ComfyUI installation the CLI is pointing to, run:

comfy which

And to change it, use:

comfy set-default <"path to ComfyUI">

The “path to ComfyUI” needs to end with “/ComfyUI” and should look something like that: “./workspace/ComfyUI”.

3. Installing and running ViewComfy

Once you have the correct version of Node and the ComfyUI CLI, you can install ViewComfy directly from the repository:

git clone https://github.com/ViewComfy/ViewComfy

cd ViewComfy

npm install

Finally, you can start the ViewComfy app builder by running:

npm run dev

After a few seconds, you should get a link that looks something like “http://localhost:3000”. This link can be opened directly in your browser. Take note of it for later, you will need it to share your app.

There is a video on the ViewComfy repo explaining how you can build your app so I will spare you all the details here. The app is fairly easy to operate, the only thing you need to be aware of is that you need to use your workflow_api.json file to get started. You can download it from ComfyUI:

Enable dev mode options in the ComfyUI settings
Export your API JSON using the “Save (API format)” button.

4. Sharing your ViewComfy app

4.1. Installing ngrok

Right, so you have your app ready and running on ViewComfy, now it is time to share it. To do so, you can use a service called ngrok. This will effectively create a tunnel between the machine where ViewComfy is running (your computer, a RunPod instance, Google Colab, etc.) and the end user. For people who are not familiar with what this means, the end user will effectively be using your machine to run the app, it won’t be running somewhere in the cloud.

Installing ngrok is a relatively straightforward process. You can follow the two first steps here (installing ngrok and connecting your account): https://ngrok.com/docs/getting-started.

4.2 Setting up ViewComfy view mode

You could share your ViewComfy app as it is, but if you only want to give users access to the playground page, there is a handy feature called view mode.

To activate it, you need to put your workflow_api.json and view_comfy.json files in your ViewComfy folder. You can download the view_comfy JSON directly from the ViewComfy form editor.

You will then need to set the NEXT_PUBLIC_VIEW_MODE in your “.env” file to true:

NEXT_PUBLIC_VIEW_MODE="true"

This file should be in the folder where you downloaded ViewComfy. Note that it is usually hidden, so make sure that your file manager is displaying hidden files. If you don’t have an IDE, you can use Notepad to edit the file, just be careful not to overwrite the file format.

After editing the .env file you need to restart ViewComfy. (you can close the terminal where it is running and type “npm run dev ” again in a new one.)

4.3 Putting your app online

Your app is finally ready to share. You can run:

ngrok http http://localhost:3000

Make sure that the URL you are using to launch ngrok is the one where ViewComfy is running (eg. http://localhost:3000). Ngrok will then generate a “Forwarding” url that you can share with your audience. It will look something like that: “https://84c5df474.ngrok-free.dev”.

People with your forwarding url will have access to your ViewComfy app for as long as ViewComfy is running. Remember to close it when you are done sharing.

Conclusion

By following this guide, you can easily share your ComfyUI workflow with others while maintaining control over your intellectual property. ViewComfy provides a user-friendly interface, and ngrok allows for secure sharing of your app.

How to turn a ComfyUI workflow into a web app in minutes