Introduction

ความจริงตอนแรกจะทำแบบสอนเขียนทีละไฟล์ตั้งแต่การขึ้น project ไปจนถึงการ publish nodes แต่เพื่อความง่ายเลยทดลองสร้าง agent skills ในการสร้าง custom nodes แล้วพบว่าการสร้าง Custom Nodes ได้ตรงตามที่เขียนไว้เลย และทำได้ดีเลยทีเดียวเลยจะมาแชร์นะครับ

เริ่มต้นการสร้าง

บทความนี้จะเป็นการสอนสร้าง ComfyUI Custom Nodes โดยเป็นการใช้งาน Agent Skills เป็นหลัก โดย Skill ที่ใช้จะอ้างอิงจากคู่มือการสร้าง Custom Nodes ของ ComfyUI เองเลย

การสร้าง custom nodes จะเน้นไปที่ตัว node (backend) เป็นหลักนะครับ ในส่วนการสร้าง extension สำหรับ frontend จะยังไม่กล่าวถึงนะครับ

https://docs.comfy.org/custom-nodes/overview

Skills ที่จะใช้งานมีดังนี้

comfyui-custom-nodes-backend
comfyui-custom-nodes-frontend
comfyui-custom-nodes-overview

สามารถ Download Skills ใช้งานได้ที่ https://github.com/vjumpkung/pixellatent-agent-skills

วิธีการสร้าง Custom Nodes มีดังนี้

Download Skill แล้วใส่ลงไปใน folder นึงตาม Agentic Coding ต่าง ๆ โดยในที่นี้จะใช้ Claude Code เป็นหลักก็จะวาง folder ดังนี้

Custom Nodes
│
└───.claude
    └───skills
        ├───comfyui-custom-nodes-backend
        │       SKILL.md
        │
        ├───comfyui-custom-nodes-frontend
        │       SKILL.md
        │
        └───comfyui-custom-nodes-overview
                SKILL.md

เปิดใช้งาน Claude Code และทำการเช็ค skills ด้วยการใช้ slash command /skills

หากต้องการเริ่มสร้าง custom nodes สามารถใช้ prompt ประมาณนี้ (สามารถประยุกต์ได้ตามใจชอบ)

ตัวอย่าง Prompt

สร้าง ComfyUI Custom Nodes ที่เป็นการหมุนรูปภาพ โดยให้มีการทำงานดังนี้ 

Input 
- รูปภาพ
- องศาการหมุน (0, 90, 180, 270) หน่วย องศา 

Process 
- หมุนรูปตามองศา 

Output 
- รูปภาพ

การระบุให้ชัดเจนจะช่วยทำให้เรียก Agent Skills ได้ถูกต้อง

รอให้ AI ทำการสร้าง Custom Nodes จนจบ

❯ สร้าง ComfyUI Custom Nodes ที่เป็นการหมุนรูปภาพ โดยให้มีการทำงานดังนี้

  Input
  - รูปภาพ
  - องศาการหมุน (0, 90, 180, 270) หน่วย องศา

  Process
  - หมุนรูปตามองศา

  Output
  - รูปภาพ

● ฉันจะช่วยสร้าง ComfyUI Custom Node สำหรับหมุนรูปภาพให้คุณ

● Skill(comfyui-custom-nodes-backend)
  ⎿  Successfully loaded skill

● ฉันจะสร้าง ComfyUI Custom Node สำหรับหมุนรูปภาพให้คุณ

  ก่อนอื่นมาดูโครงสร้างไฟล์ในโปรเจกต์กันก่อน

● Bash(ls -la)
  ⎿  total 20
     drwxr-xr-x 1 vjump 197609 0 Jan 26 01:44 .
     drwxr-xr-x 1 vjump 197609 0 Jan 26 01:44 ..
     … +2 lines (ctrl+o to expand)

● ดูเหมือนว่าโปรเจกต์ยังว่างเปล่า ฉันจะสร้างโครงสร้างไฟล์และโค้ดสำหรับ Custom Node ให้คุณเลย

● Write(image_rotation_node.py)
  ⎿  Wrote 1 lines to image_rotation_node.py
       1 import torch
       2 import torch.nn.functional as F
       3
       4
       5 class ImageRotationNode:
       6     """
       7     ComfyUI Custom Node for rotating images by 0, 90, 180, or 270 degrees.
       8     """
       9
      10     @classmethod

● Write(__init__.py)
  ⎿  Wrote 1 lines to __init__.py
      1 from .image_rotation_node import ImageRotationNode
      2
      3 NODE_CLASS_MAPPINGS = {
      4     "ImageRotationNode": ImageRotationNode,
      5 }
      6
      7 NODE_DISPLAY_NAME_MAPPINGS = {
      8     "ImageRotationNode": "Image Rotation",
      9 }

● Write(README.md)
  ⎿  Wrote 1 lines to README.md
      1 # Image Rotation Node for ComfyUI
      2
      3 ComfyUI Custom Node สำหรับหมุนรูปภาพตามองศาที่
      4
      5 ## คุณสมบัติ
      6
      7 - หมุนรูปภาพได้ 4 องศา: 0°, 90°, 180°, 270°
      8 - รองรับการประมวลผลแบบ batch
      9 - ใช้ PyTorch tensor operations เพื่อประสิทธิ

● สร้าง Custom Node เรียบร้อยแล้ว!

  สรุปสิ่งที่สร้าง

  1. image_rotation_node.py - Node หลัก

  - รับ input: รูปภาพ (IMAGE) และองศาการหมุน (0, 90, 180, 270)
  - ประมวลผล: ใช้ PyTorch operations (torch.transpose และ torch.flip) เพื่อหมุนรูป
  - ส่งออก: รูปภาพที่หมุนแล้ว

  2. init.py - Module initialization

  - ลงทะเบียน node กับ ComfyUI
  - กำหนดชื่อแสดงผลเป็น "Image Rotation"

  3. README.md - คู่มือการใช้งาน

  วิธีการทำงานของ Node

  การหมุนรูปภาพแต่ละองศา:
  - 0°: ไม่ทำอะไร (return รูปเดิม)
  - 90°: transpose แกน H,W แล้ว flip แนวนอน
  - 180°: flip ทั้งแกน H และ W
  - 270°: transpose แกน H,W แล้ว flip แนวตั้ง

  การใช้งาน

  1. รีสตาร์ท ComfyUI
  2. หา node "Image Rotation" ในหมวด image/transform
  3. เชื่อมต่อรูปภาพเข้า input
  4. เลือกองศาจาก dropdown
  5. รับรูปภาพที่หมุนแล้วจาก output

  Node นี้รองรับ batch processing ด้วย ดังนั้นถ้ามีหลายรูปใน batch ก็จะหมุนทุกรูปในคราวเดียว!

✻ Cogitated for 1m 3s
```❯ สร้าง ComfyUI Custom Nodes ที่เป็นการหมุนรูปภาพ โดยให้มีการทำงานดังนี้

  Input
  - รูปภาพ
  - องศาการหมุน (0, 90, 180, 270) หน่วย องศา

  Process
  - หมุนรูปตามองศา

  Output
  - รูปภาพ

● ฉันจะช่วยสร้าง ComfyUI Custom Node สำหรับหมุนรูปภาพให้คุณ

● Skill(comfyui-custom-nodes-backend)
  ⎿  Successfully loaded skill

● ฉันจะสร้าง ComfyUI Custom Node สำหรับหมุนรูปภาพให้คุณ

  ก่อนอื่นมาดูโครงสร้างไฟล์ในโปรเจกต์กันก่อน

● Bash(ls -la)
  ⎿  total 20
     drwxr-xr-x 1 vjump 197609 0 Jan 26 01:44 .
     drwxr-xr-x 1 vjump 197609 0 Jan 26 01:44 ..
     … +2 lines (ctrl+o to expand)

● ดูเหมือนว่าโปรเจกต์ยังว่างเปล่า ฉันจะสร้างโครงสร้างไฟล์และโค้ดสำหรับ Custom Node ให้คุณเลย

● Write(image_rotation_node.py)
  ⎿  Wrote 1 lines to image_rotation_node.py
       1 import torch
       2 import torch.nn.functional as F
       3
       4
       5 class ImageRotationNode:
       6     """
       7     ComfyUI Custom Node for rotating images by 0, 90, 180, or 270 degrees.
       8     """
       9
      10     @classmethod

● Write(__init__.py)
  ⎿  Wrote 1 lines to __init__.py
      1 from .image_rotation_node import ImageRotationNode
      2
      3 NODE_CLASS_MAPPINGS = {
      4     "ImageRotationNode": ImageRotationNode,
      5 }
      6
      7 NODE_DISPLAY_NAME_MAPPINGS = {
      8     "ImageRotationNode": "Image Rotation",
      9 }

● Write(README.md)
  ⎿  Wrote 1 lines to README.md
      1 # Image Rotation Node for ComfyUI
      2
      3 ComfyUI Custom Node สำหรับหมุนรูปภาพตามองศาที่
      4
      5 ## คุณสมบัติ
      6
      7 - หมุนรูปภาพได้ 4 องศา: 0°, 90°, 180°, 270°
      8 - รองรับการประมวลผลแบบ batch
      9 - ใช้ PyTorch tensor operations เพื่อประสิทธิ

● สร้าง Custom Node เรียบร้อยแล้ว!

  สรุปสิ่งที่สร้าง

  1. image_rotation_node.py - Node หลัก

  - รับ input: รูปภาพ (IMAGE) และองศาการหมุน (0, 90, 180, 270)
  - ประมวลผล: ใช้ PyTorch operations (torch.transpose และ torch.flip) เพื่อหมุนรูป
  - ส่งออก: รูปภาพที่หมุนแล้ว

  2. init.py - Module initialization

  - ลงทะเบียน node กับ ComfyUI
  - กำหนดชื่อแสดงผลเป็น "Image Rotation"

  3. README.md - คู่มือการใช้งาน

  วิธีการทำงานของ Node

  การหมุนรูปภาพแต่ละองศา:
  - 0°: ไม่ทำอะไร (return รูปเดิม)
  - 90°: transpose แกน H,W แล้ว flip แนวนอน
  - 180°: flip ทั้งแกน H และ W
  - 270°: transpose แกน H,W แล้ว flip แนวตั้ง

  การใช้งาน

  1. รีสตาร์ท ComfyUI
  2. หา node "Image Rotation" ในหมวด image/transform
  3. เชื่อมต่อรูปภาพเข้า input
  4. เลือกองศาจาก dropdown
  5. รับรูปภาพที่หมุนแล้วจาก output

  Node นี้รองรับ batch processing ด้วย ดังนั้นถ้ามีหลายรูปใน batch ก็จะหมุนทุกรูปในคราวเดียว!

✻ Cogitated for 1m 3s

ไฟล์ที่ได้ออกมาจะมีตามนี้

Restart ComfyUI และทำการเรียก Custom Nodes ที่ถูกสร้าง หาก Custom Nodes นั้น Import สำเร็จจะปรากฎขึ้นมา

สามารถต่อและกด Run ได้เลยตาม Custom Nodes ที่สร้างเอาไว้

เกร็ดความรู้

ComfyUI อ่าน Custom Nodes ยังไง

pixellatent-image-rotation
│   image_rotation_node.py
│   README.md
│   __init__.py

ไฟล์นี้เป็นไฟล์ที่สำคัญที่สุดในการทำ ComfyUI custom node เพราะว่า ComfyUI จะทำการอ่าน Folder ซึ่งภาษา python บอกว่าถ้ามีไฟล์นี้เมื่อมีการเรียก Folder จะมีการอ่าน __init__.py เสมอ

from .image_rotation_node import ImageRotationNode

NODE_CLASS_MAPPINGS = {
    "ImageRotationNode": ImageRotationNode,
}

NODE_DISPLAY_NAME_MAPPINGS = {
    "ImageRotationNode": "Image Rotation",
}

__all__ = ["NODE_CLASS_MAPPINGS", "NODE_DISPLAY_NAME_MAPPINGS"]

ในไฟล์จะมี code ตามนี้

สิ่งที่จำเป็นคือ

NODE_CLASS_MAPPINGS (จำเป็นเพื่อทำการเรียก Node ออกมา)
NODE_DISPLAY_NAME_MAPPINGS (ไม่บังคับ ใช้ในการตั้งชื่อ)

__all__ เป็นตัวแปรที่จะเป็นการบอกว่าให้ ComfyUI อ่านตัวแปรไหนได้บ้าง

ซึ่งการอ่านไฟล์นี้จะต้องทำการ import ไฟล์ node ให้ครบถ้วน ถ้าไม่ครบก็จะไม่ขึ้นใน ComfyUI และ node ที่สร้างขึ้นมาจะต้องมีรูปแบบที่ตรงกันกับที่เอกสารบอกไว้

EXAMPLE

import torch
import torch.nn.functional as F

class MosaicBlurNode:
    @classmethod
    def INPUT_TYPES(cls):
        return {
            "required": {
                "image": ("IMAGE",),
                "mosaic_scale": ("INT", {
                    "default": 10,
                    "min": 0,
                    "max": 100,
                    "step": 1
                })
            },
            "optional": {
                "mask": ("MASK",)
            }
        }

    RETURN_TYPES = ("IMAGE",)
    RETURN_NAMES = ("image",)
    FUNCTION = "apply_mosaic_blur"
    CATEGORY = "image/effects"

    def apply_mosaic_blur(self, image, mosaic_scale, mask=None):
        """
        Apply mosaic blur effect to an image

        Args:
            image: Input image tensor [B, H, W, C]
            mosaic_scale: Scale of mosaic effect (0-100), higher = more pixelated
            mask: Optional mask tensor [H, W] or [B, H, W]

        Returns:
            Blurred image tensor [B, H, W, C]
        """
        # If mosaic_scale is 0, return original image
        if mosaic_scale == 0:
            return (image,)

        batch_size, height, width, channels = image.shape
        device = image.device

        # Calculate the pixelation size based on mosaic_scale
        # Scale ranges from 1 (mosaic_scale=1) to max dimension/2 (mosaic_scale=100)
        max_dimension = max(height, width)
        pixel_size = max(1, int((mosaic_scale / 100.0) * (max_dimension / 4)))

        # Convert image from [B, H, W, C] to [B, C, H, W] for processing
        image_permuted = image.permute(0, 3, 1, 2)

        # Calculate new dimensions for downscaling
        new_height = max(1, height // pixel_size)
        new_width = max(1, width // pixel_size)

        # Downscale using average pooling
        downscaled = F.interpolate(
            image_permuted,
            size=(new_height, new_width),
            mode='area'
        )

        # Upscale back to original size using nearest neighbor
        mosaiced = F.interpolate(
            downscaled,
            size=(height, width),
            mode='nearest'
        )

        # Convert back to [B, H, W, C]
        mosaiced = mosaiced.permute(0, 2, 3, 1)

        # Apply mask if provided
        if mask is not None:
            # Normalize mask shape to [B, H, W, 1]
            if len(mask.shape) == 2:  # [H, W]
                mask = mask[None, :, :, None]
            elif len(mask.shape) == 3:  # [B, H, W]
                mask = mask[:, :, :, None]

            # Ensure mask matches batch size
            if mask.shape[0] == 1 and batch_size > 1:
                mask = mask.expand(batch_size, -1, -1, -1)

            # Resize mask if dimensions don't match
            if mask.shape[1] != height or mask.shape[2] != width:
                mask_permuted = mask.permute(0, 3, 1, 2)
                mask_permuted = F.interpolate(
                    mask_permuted,
                    size=(height, width),
                    mode='bilinear',
                    align_corners=False
                )
                mask = mask_permuted.permute(0, 2, 3, 1)

            # Blend original and mosaiced image based on mask
            # mask = 1.0 means use mosaiced, mask = 0.0 means use original
            output = image * (1.0 - mask) + mosaiced * mask
        else:
            output = mosaiced

        return (output,)

รายละเอียดเพิ่มเติมอ่านได้จาก https://docs.comfy.org/custom-nodes/overview ซึ่งจะไม่ได้ลงลึกขนาดนั้นในบทความนี้เพราะว่า Agent Skills ช่วยไปหมดแล้ว

ข้อควรระวัง

การทำ Custom Nodes นั้นถ้ามีหลายไฟล์ต้อง import nodes เป็นแบบ relative path เสมอเพื่อป้องการ error ในขณะที่ dev ข้างนอก comfyui
อย่าตั้งชื่อ Nodes ชนกันกับ Node อื่น ๆ เพราะว่ามันจะ conflict กันและทับกันเอง

วิธีการเอา Custom Nodes ขึ้น Comfy Registry

Comfy Registry คืออะไร ?

ง่าย ๆ เลยคือเหมือนกับแหล่งรวม Custom Nodes เป็นศูนย์กลางซึ่งทำให้ผู้ใช้เข้าถึง Custom Nodes ได้ง่ายขึ้น เหมือนกับ App Store, Google Play
เมื่อทำการเอาขึ้น Comfy Registry แล้วจะทำการ Download Custom Nodes ผ่าน ComfyUI Manager ได้

สามารถเข้าได้ที่ : https://registry.comfy.org/

ขั้นตอนเอา Custom Node ขึ้น Comfy Registry

สิ่งที่ต้องการ

เอา Repository ขึ้น Github ก่อน

สามารถอ่านวิธีการได้ที่

https://docs.comfy.org/registry/publishing

สิ่งที่ต้องการก่อนคือ comfy cli

pip install comfy-cli

1. ลงทะเบียนที่ https://registry.comfy.org/ และ copy username มาก่อน

2. สร้าง API Keys และเก็บไว้เป็นความลับห้ามเผยแพร่ ซึ่งทำได้ตามนี้

กด create new key

ใส่ชื่อและคำอธิบาย

และทำการกด Create และกด Copy -> Done

3. ทำการสร้าง metadata pyproject.toml

มี 2 วิธีคือ

สร้างไฟล์ pyproject.toml

ตัวอย่างไฟล์

# pyproject.toml
[project]
name = "" # Unique identifier for your node. Immutable after creation.
description = ""
version = "1.0.0" # Custom Node version. Must be semantically versioned.
license = { file = "LICENSE.txt" }
dependencies  = [] # Filled in from requirements.txt

[project.urls]
Repository = "https://github.com/..."

[tool.comfy]
PublisherId = "" # TODO (fill in Publisher ID from Comfy Registry Website).
DisplayName = "" # Display name for the Custom Node. Can be changed later.
Icon = "https://example.com/icon.png" # SVG, PNG, JPG or GIF (MAX. 800x400px)

ใช้ comfy-cli คำสั่ง

comfy node init

เมื่อทำการสร้างไฟล์ pyproject.toml แล้วให้ทำการแก้ไขไฟล์ดังนี้

# pyproject.toml
[project]
(ต้องการ) name = "" # Unique identifier for your node. Immutable after creation.
description = ""
(ต้องการ) version = "1.0.0" # Custom Node version. Must be semantically versioned.
license = { file = "LICENSE.txt" }
dependencies  = [] # Filled in from requirements.txt

[project.urls]
(ต้องการ) Repository = "https://github.com/..."

[tool.comfy]
(ต้องการ) PublisherId = "" # TODO (fill in Publisher ID from Comfy Registry Website).
(ต้องการ) DisplayName = "" # Display name for the Custom Node. Can be changed later.
Icon = "https://example.com/icon.png" # SVG, PNG, JPG or GIF (MAX. 800x400px)

ตัวอย่าง

[project]
name = "pixtellatent-image-rotation"
description = ""
version = "1.0.0"
license = {file = "LICENSE"} 
# classifiers = [
#     # For OS-independent nodes (works on all operating systems)
#     "Operating System :: OS Independent",
#
#     # OR for OS-specific nodes, specify the supported systems:
#     "Operating System :: Microsoft :: Windows",  # Windows specific
#     "Operating System :: POSIX :: Linux",  # Linux specific
#     "Operating System :: MacOS",  # macOS specific
#
#     # GPU Accelerator support. Pick the ones that are supported by your extension.
#     "Environment :: GPU :: NVIDIA CUDA",    # NVIDIA CUDA support
#     "Environment :: GPU :: AMD ROCm",       # AMD ROCm support
#     "Environment :: GPU :: Intel Arc",      # Intel Arc support
#     "Environment :: NPU :: Huawei Ascend",  # Huawei Ascend support
#     "Environment :: GPU :: Apple Metal",    # Apple Metal support
# ]


[project.urls]
Repository = "https://github.com/vjumpkung/pixtellatent-image-rotation"
#  Used by Comfy Registry https://registry.comfy.org
Documentation = "https://github.com/vjumpkung/pixtellatent-image-rotation/wiki"
"Bug Tracker" = "https://github.com/vjumpkung/pixtellatent-image-rotation/issues"

[tool.comfy]
PublisherId = ""
DisplayName = "pixtellatent-image-rotation"
Icon = ""
includes = [] 
# "requires-comfyui" = ">=1.0.0"  # ComfyUI version compatibility

หากใช้งาน comfy-cli คำสั่ง comfy node init อำนวยความสะดวกขึ้นมาก ๆ

และทำการแก้ไข PublisherId ให้ตรงกับ username ที่ลงทะเบียนไว้ใน comfy registry

4. เผยแพร่ custom nodes ขึ้นไปยัง Comfy Registry

เริ่มจากใช้คำสั่ง

comfy node publish

จะมีการขึ้นถาม API Key ให้เอา API Key มาวาง (มันจะไม่เห็น API Key ตอนกดวาง) แล้วทำการกด enter

Please enter your API Key (can be created on https://registry.comfy.org):

ถ้าสำเร็จจะขึ้น Upload successful... และมีไฟล์ .zip ขึ้นมา (ซึ่งลบได้เพราะว่า Custom Node Upload เสร็จแล้ว)

5. ตรวจสอบผ่าน Comfy Registry และผ่าน Manager

ใน ComfyUI Manager จะต้องใช้เวลาประมาณ 5-10 นาทีถึงจะขึ้นบน ComfyUI Manager

หมายเหตุในภาพ Custom Nodes นี้ได้ถูกลบออกไปแล้วจะค้นหาไม่เจอ เพราะว่าเป็นการสาธิตเท่านั้น

ตัวอย่าง custom nodes ที่เผยแพร่ออกไปแล้ว

https://registry.comfy.org/publishers/vjumpkung/nodes/pixellatent-mosaic-blur

บทส่งท้าย

การเขียน ComfyUI Custom Nodes ผ่าน Agent Skills จะช่วยทำให้การเขียน Custom Nodes สำหรับ ComfyUI นั้นถูกต้องและตรงกันกับคู่มือการพัฒนา Custom Nodes จาก Comfy Org ในปัจจุบัน ซึ่งบทความนี้มีการรวม Skills พร้อมใช้งานสำหรับแต่ละ AI ได้เลย

ปกติผู้เขียนจะ prompt ภาษาอังกฤษเป็นหลัก แต่ครั้งนี้ลองใช้ภาษาไทยดูก็พบว่ายังคงแม่นยำอยู่ แต่ ... การใช้งาน skill เอาไปประยุกต์การสร้าง custom nodes พิสดารได้อีกเพียบเลยนะครับ ลองสร้างเล่น ๆ กันได้เต็มที่เลย เป็นยังไงมาแชร์กันได้นะครับ

วิธีการสร้าง ComfyUI Custom Nodes แบบใช้ Agents Skills !!!