How to turn a ComfyUI workflow into a web app in minutes
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.
ViewComfy is the fastest way to create a user-friendly UI for a workflow and, as you will see, doesn’t require any coding. Ngrok is a free solution to access a program running on a separate computer, effectively allowing us to access ComfyUI and ViewComfy from another network.
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. Launch ComfyUI
ViewComfy uses the ComfyUI API as a backend, and to use it you will also need to launch ComfyUI and note the port where it is running. Make sure your workflow runs without error in your version of ComfyUI before trying to use ViewComfy!
To start ComfyUI, you can run the usual command:
python main.py
The port number is the four-digit number at the end of the URL where ComfyUI is running. For example, if ComfyUI is running at “http://localhost:3000”, the port number is 3000.
3. Installing and running ViewComfy
Once you have the correct version of Node and ComfyUI is running, you can install ViewComfy directly from the repository:
git clone https://github.com/ViewComfy/ViewComfy
cd ViewComfy
npm install
You can then start the ViewComfy app builder by running:
COMFYUI_PORT=<The ComfyUI port number> npm run dev
So, if ComfyUI is pointing to port 3000 like in the previous example, the command would be “COMFYUI_PORT=3000 npm run dev“.
After a few seconds, you should get a link that looks something like “http://localhost:8188”. 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:8188
Make sure that the URL you are using to launch ngrok is the one where ViewComfy is running (eg. http://localhost:8188). 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 workflows with others while maintaining control over your intellectual property. ViewComfy provides a user-friendly interface, and ngrok allows for secure sharing of your app.
