ViewComfyViewComfy

Build and deploy a ComfyUI-powered app: A complete guide

Cover Image for Build and deploy a ComfyUI-powered app: A complete guide

You’ve created the perfect ComfyUI workflow, now you are wondering how to best share it with non-technical team members or clients. This guide will go through how to do just that by deploying your own ViewComfy web apps on a server you manage, allowing you to create professional, embeddable AI applications that anyone can use.

To optimize the cost of running your application, we will split the application into two parts, each deployed differently. The backend, which is responsible for running the ComfyUI workflow, will be deployed on ViewComfy’s serverless infrastructure. The frontend, which consists of the ViewComfy app’s interface, will run on a Modal account that you will set up.

This solution is ideal for people who want to embed a ViewComfy app into a website or another application, or need to make significant changes to the frontend. If you want to keep it simple and need built-in user management and security features, we recommend deploying the frontend directly on ViewComfy.*

*This second option is currently in close beta. Please contact the team at team@viewcomfy.com for more details.

Deployment strategy advantages

There are some important advantages to splitting the application into two:

  • Cost Efficiency: By separating your frontend and backend, you can run the UI on cost-effective CPUs while only using GPUs for the actual generation tasks. For reference, a CPU on Modal costs $0.024/h, which is a fraction of the cost of running a GPU.
  • Scalability: By using ViewComfy’s serverless API, your application will scale based on demand. With a standard setup, there won’t be any GPUs running when no one is using the app. As soon as someone clicks generate, a GPU will turn on and start working on the request. And if your application has too much traffic for one GPU to handle, more will be added to ensure your users don’t have to wait.
  • Frontend Integration: With this strategy, you can embed your ViewComfy apps directly into your company website and/or web apps through an iframe, creating a seamless experience for your users.
  • Opportunity for customization: By hosting the frontend on your side, you have full control over the UI and can customize it to get the look just right.

Step-by-step deployment guide

  1. Deploy your ComfyUI workflow (backend) on ViewComfy

First, in order to transform your ComfyUI workflow into a serverless API, you need to deploy it on ViewComfy Cloud. This process is as simple as dropping your workflow_api file into your dashboard and selecting the GPU you want to use. You will be given the opportunity to add models, including your own custom ones, before and after deploying.

After deploying, you can access the deployment via the standard ComfyUI interface and make any necessary changes (e.g., installing new node packs).

Once you are done, your workflow will run on a specialized GPU of your choice and on infrastructure that will automatically scale to meet your demand. For more details on how to deploy the workflow, refer to the “Deploying your workflow” section of this guide.

The important things you will need for the next steps are your API endpoint and API keys.

2. Creating your Viewcomfy app

The next step is to create the simple UI you will expose to your users. To do that, we will use ViewComfy’s open-source app builder.

The instructions for installing and using the app builder are all in the project’s ReadMe. It should only take a few minutes and doesn’t require any serious coding.

When going through this process, you will want to pay attention to the “Deploy the frontend and backend separately” section. In particular, make sure to add your endpoint to the workflow settings in the app builder:

And to add the API keys to the .env file.

.env file ->
VIEWCOMFY_CLIENT_ID=""
VIEWCOMFY_CLIENT_SECRET=""

Once you are done, every time you click generate on your app, a request will be sent to your ViewComfy deployment, where it will be handled.

You can save your view_comfy.json as you will need it for the last step.

As described in the project’s ReadMe, you can have multiple ComfyUI workflows in the same app. If you decide to do that, it is often better to have a different deployment/endpoint for each workflow. This will make your app more responsive and avoid the risk of breaking a deployment by installing conflicting nodes.

3. Deploy your frontend on Modal

Finally, you can deploy the frontend to make your ViewComfy app a real web app. In this example, we are using Modal to host the frontend, but you can use other alternatives like Vercel. The details on how to do that are in the hosting-examples/modal folder of the open-source project.

One thing you want to pay attention to is that you will need to copy your API keys to the .env file in this folder. This is because when your app is running on Modal, it will use a different .env file than when you are running the app on your computer.

Once you have your modal account set up, you can replace the view_comfy.json file in the folder with your own and deploy it using the premade script.

Modal will provide you with two URLs:

  • The first one is a link to your application and will look like this: “https:// — viewcomfy-modal-viewcomfy-view-comfy-web-server.modal.run/” . This is the link you can embed in an iframe, for example. (Be careful with that link; anyone with access to it will be able to open your app)
  • The second one is a link to your deployment and will look like this: “https://modal.com/apps//main/deployed/viewcomfy-modal”. This is where you can see if your deployment is running and track usage. You can delete the deployment by clicking “Stop app” at the top.

Every time your app is opened in a browser tab, it will automatically turn on. As previously mentioned, the app itself is running on a cheap CPU and will only send requests to the ViewComfy GPUs when you click generate.

Embedding your ViewComfy app in your website

This part is optional; you can easily embed your app directly into your website or web app using an iframe and the link from the previous step:

<iframe
src="https://<your account name> - viewcomfy-modal-viewcomfy-view-comfy-web-server.modal.run"
width="100%"
height="100%"
frameborder="0"
</iframe>

Changing your app’s style

If you are comfortable with Next.js and Tailwind, adapting the app’s styling and making it your own should be relatively straightforward. You can fork the open-source project and work from there directly.

To deploy your custom app, simply follow the same steps outlined above. The only adjustment necessary is to update the run_commands function in hosting-examples/modal/view_comfy.py to refer to your version of ViewComfy rather than the default version.

.run_commands(
"mkdir -p /app",
"cd /app && git init .",
"cd /app && git remote add origin <link to your github repo>",
…
)

Conclusion

This guide helps you transform a ComfyUI workflow from a technical tool to a web application that anyone can use. The combination of ViewComfy’s serverless GPU infrastructure for processing and Modal’s cheap CPUs for the front end makes it possible to build a cheap and scalable solution with (almost) no code.

If you need a full end-to-end solution with built-in user management and security features, we recommend using ViewComfy’s frontend deployment solution instead of deploying directly on Modal.*

*This second option is currently in close beta. Please contact the team at team@viewcomfy.com for more details.