Module quick start

LynxHub card modules represent standalone features or tools shown as cards on the dashboard. Unlike extensions, modules run isolated CLI scripts, backend commands, and custom installation wizards. Follow this guide to create and test a simple card module.

Clone the starter template

To start developing quickly, first clone the host LynxHub application repository and navigate to its root folder. Then, clone the source branch of the official LynxHub Module Template directly into the module folder:

# Clone the host application
git clone https://github.com/KindaBrazy/LynxHub
cd LynxHub

# Clone the card module template source branch into the /module directory
git clone -b source https://github.com/KindaBrazy/LynxHub-Module-Template module

This sets up the following folder structure:

module/
├── rollup.config.mjs  # Bundler configuration
├── tsconfig.json      # TypeScript compiler configuration
├── package.json       # Identity and Node.js module configuration
└── src/
    ├── main.ts        # Main process backend entrypoint
    ├── renderer.ts    # Renderer process UI entrypoint
    ├── Constants.ts   # Shared constants (such as card ID)
    ├── ComfyUI/       # ComfyUI-specific implementation (arguments, methods)
    └── Utils/         # Useful starter helper utilities

The template provides a fully working implementation of a ComfyUI card module. Under the src/Utils/ folder, you will find starter utilities for process checks, Python/environment discovery, NPM package installation, and renderer installation/updating steppers.

Define package configuration

Open the package.json file at the root of your module folder and customize your card module’s name, author information, and repository links.

{
  "name": "lynxhub-module-template",
  "version": "1.0.0",
  "author": {
    "name": "Your Name",
    "url": "https://github.com/your-username"
  },
  "homepage": "https://github.com/your-username/lynxhub-module-template",
  "repository": "https://github.com/your-username/lynxhub-module-template",
  "type": "module",
  "dependencies": {
    "which": "^7.0.0"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^29.0.3",
    "@rollup/plugin-json": "^6.1.0",
    "@rollup/plugin-node-resolve": "^16.0.3",
    "@rollup/plugin-typescript": "^12.3.0",
    "@types/which": "^3.0.4",
    "rimraf": "^6.1.3",
    "rollup": "^4.62.2",
    "tslib": "^2.8.1"
  }
}

Card module metadata (metadata.json) and release version history (versioning.json) must be placed in a dedicated metadata branch of your repository. They are not stored in the source branch. For more details, see the Module configuration and Publishing modules guides.

Implement the main process

Open the src/main.ts file. This file registers the backend lifecycle methods of your module. The template uses a helper module Comfy_MM to specify commands and checks.

import {MainModules, MainModuleUtils} from '../../src/common/types/plugins/modules';
import Comfy_MM from './ComfyUI/MainMethods';
import {COMFYUI_ID} from './Constants';

export default async function initialModule(utils: MainModuleUtils): Promise<MainModules[]> {
  return [{id: COMFYUI_ID, methods: () => Comfy_MM(utils)}];
}

Implement the renderer process

Open the src/renderer.ts file. This file defines the metadata, settings, arguments, and installation wizards for the user interface.

import {CardModules} from '../../src/common/types/plugins/modules';
import comfyuiArguments from './ComfyUI/Arguments';
import COMFYUI_RM from './ComfyUI/RendererMethods';
import {COMFYUI_ID} from './Constants';

const rendererModules: CardModules = [
  {
    routePath: 'imageGen_page',
    cards: [
      {
        id: COMFYUI_ID,
        title: 'ComfyUI',
        description: 'This ui will let you design and execute advanced stable diffusion pipelines' + ' using a graph/nodes/flowchart based interface.',
        repoUrl: 'https://github.com/comfyanonymous/ComfyUI',
        type: 'image',
        supportCustomArguments: true,
        arguments: comfyuiArguments,
        methods: COMFYUI_RM,
        installationType: 'git',
      },
    ],
  },
];

export default rendererModules;

Run and test locally

Start the LynxHub host application in development mode:

npm run dev

The host application automatically detects the /module directory and imports your card definitions. In this template, the ComfyUI card is registered under the Image Generation category.

Locate the ComfyUI card on the dashboard.
Click the launch button to test execution.
A terminal tab will boot up automatically and run your configured run commands.
Run typecheck validation scripts to verify code health:
npm run typecheck

Application

Plugins

AI Agents Setup

Module quick start

Clone the starter template

Define package configuration

Implement the main process

Implement the renderer process

Run and test locally

​Clone the starter template

​Define package configuration

​Implement the main process

​Implement the renderer process

​Run and test locally

Clone the starter template

Define package configuration

Implement the main process

Implement the renderer process

Run and test locally