comfy-mobile-ui

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #claude-code #codex #cli #developer-tools #react #windows

comfy-mobile-ui

★ 93 Open GitHub ↗

A mobile-first, modern web interface for ComfyUI

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[English](README.md) | [한국어](README_KOR.md) | [日本語](README_JP.md) | [简体中文](README_ZH.md)
<div align="center">

# Comfy Mobile UI

https://github.com/user-attachments/assets/20480b56-5c01-4c27-9401-0d4ba455dd81

**Mobile-first, node-style web interface for ComfyUI**

[Key Features](#features) | [Installation Guide](#installation) | [Contributing](#contributing) | [Show Your Support](#support)

---

## 📖 Introduction

**Comfy Mobile UI** is a mobile-first web interface designed to seamlessly handle node-based AI workflows on mobile devices, originally optimized for PC environments.

This is not just a simple viewer. Modify complex workflows on the go, add new nodes, manage models, and monitor execution status in real-time. Experience a desktop-like environment on your mobile device with a touch-optimized UX.

---

## <a name="features"></a>✨ Key Features

### 1. Multi-Mode Support
Provides both a powerful **Graph View** for freeform workflow editing and a **Stack View** for intuitivel modifying widget values by grouping nodes by type.

### 2. Touch-First UX
Perfectly reimagines complex desktop editing experiences for mobile gestures. Control intricate node graphs with ease using just your fingers.
- **Radial Menu:** Quickly access node addition, removal, color change, and execution mode (Always, Mute, Bypass) with a single long-press.
- **Advanced Widget Editor:** Comfortably edit node widgets in a dedicated large modal. Easily import images and videos from your device's album or the generated gallery.
- **Precision Linking:** Precisely configure connection lines between nodes using an intuitive drag-and-drop interface specifically designed for smaller screens.

### 3. Execution & Monitoring
Provides powerful tools to track execution status in real-time and manage the queue.
- **Live Progress:** Visually monitor the current executing node and overall progress in real-time.
- **Server Console:** Monitor server execution logs in real-time to check the overall system status.

### 4. Easy Resource Downloader
Install required models directly via URL without needing to access the server manually.
- **Remote Download:** Directly download Checkpoints, LoRAs, etc., to the server using model links from Hugging Face, Civitai, and more.
- **Target Folder Selection:** Directly specify the target folder for downloads to systematically manage resources by model type.

### 5. Unified Media Library
Instantly view and manage generated images and videos (MP4) within the app without needing a separate gallery.
- **In-App Gallery:** Offers smooth playback and viewing for everything from high-fidelity outputs to video previews.
- **Seamless Export:** Check outputs instantly and save them to local storage or share them externally.
<div align="center">
  <img src="./public/showcases/album.png" width="45%" alt="Output Gallery" />
  <img src="./public/showcases/album2.png" width="45%" alt="Video Player" />
</div>

### 6. Advanced Utilities
Provides smart tools to make workflow editing and management even more efficient.
- **Workflow Snapshots:** Save the current state of your workflow as a snapshot and restore it at any time. Ideal for fearless experimentation with parameters.
- **Embedded Group Control:** Built-in Fast Group Muter/Bypasser (from rgthree) to bulk control execution modes (`Always`, `Mute`, `Bypass`) of all nodes within a group.
- **Trigger Word Manager:** Save and manage trigger words for each LoRA in the Model Browser. Quickly lookup and copy keywords while editing workflows.
- **Advanced Video Downloader:** Use [yt-dlp](https://github.com/yt-dlp/yt-dlp) to download videos from various platforms directly to the server's `input` folder.
- **Workflow Chain (Experimental):** Link multiple independent workflows together. Automatically transfer output from one workflow to the input of the next for complex, sequential automation.

---

## <a name="installation"></a>🛠️ Installation & Setup

### **1. Standard Installation (Recommended)**
The easiest way to get started is to download a pre-built release:

1. **Download**: Go to [Latest Release](https://github.com/jaeone94/comfy-mobile-ui/releases) and download `comfy-mobile-ui-api-extension-vX.X.X.zip`.
2. **Extract**: Unzip the file on your computer.
3. **Deploy**: Copy the extracted `comfy-mobile-ui-api-extension` folder into your ComfyUI `custom_nodes/` directory.
   - **Step 3.5 (Portable User)**: If you are using the **ComfyUI Windows Portable** version without ComfyUI-Manager, run `install-requirements-for-comfyui-portable.bat` inside the extension folder to install required libraries.
4. **Restart**: Start (or restart) ComfyUI with the required flag:
   ```bash
   python main.py --enable-cors-header
   ```
5. **Access**: Open your browser and navigate to `http://your-server-ip:9188` (or `http://localhost:9188` if running locally). See the [Connection Guide](./docs/connection_guide.md) for more details.

### **2. Development / Manual Setup**
If you want to contribute or build from source:

#### **Prerequisites**
- Node.js 18+ and npm
- Running ComfyUI server (typically `http://localhost:8188`)

#### **Manual Extension Setup**
1. **Clone the repository**:
   ```bash
   git clone https://github.com/jaeone94/comfy-mobile-ui.git
   cd comfy-mobile-ui
   ```
2. **Copy API Extension**:
   ```bash
   # Copy the extension folder to your ComfyUI custom_nodes directory
   cp -r comfy-mobile-ui-api-extension /path/to/your/comfyui/custom_nodes/
   ```

#### **Running Development Server**
```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Open in browser: http://localhost:5173
```

#### **Production Build**

```bash
# Build for production
npm run build

# Preview production build
npm run preview

# Lint code
npm run lint
```

### **Manual Setup Checklist**

Check the following for your ComfyUI installation:

1. **API Extension Installed**: `comfy-mobile-ui-api-extension` copied to `custom_nodes/`
2. **CORS Enabled**: Started with the `--enable-cors-header` flag
3. **Network Access**: Use `--listen 0.0.0.0` for external network access (optional)

```bash
# Example ComfyUI start command
python main.py --enable-cors-header --listen 0.0.0.0
```

---

## <a name="contributing"></a>🤝 Contributing

**Contributions are always welcome!**

### **Code Quality Notice**
Much of this app was developed using "vibe coding," so code quality may vary. We appreciate your understanding and welcome improvements!

### **How to Contribute**
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

---

## <a name="support"></a>⭐ Show Your Support

⭐ **If you find this app useful, please consider giving it a star!** ⭐

Your support helps the project grow and motivates continued development.

---

comfy-mobile-ui

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README