Desktop

This covers Electron desktop development for LobeHub's architecture, walking you through the main-renderer process pattern and IPC communication. Use it when you're adding desktop features, creating IPC handlers, or wiring up controllers between the main process and renderer. The guide gives you the full stack: controllers in the main process, type definitions in the shared package, renderer services, and store actions. What's helpful here is the concrete file structure and boilerplate patterns, so you're not guessing where things go. It assumes you know Electron basics but need the specific conventions for this codebase, including how to register controllers and expose APIs safely through preload scripts.

skills.sh installs: 1.3K
GitHub stars: 79.8K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add lobehub/lobe-chat --skill desktop --agent claude-code

Installs into .claude/skills of the current project.

Files

Desktop Development Guide

Architecture Overview

LobeHub desktop is built on Electron with main-renderer architecture:

Main Process (apps/desktop/src/main): App lifecycle, system APIs, window management
Renderer Process: Reuses web code from src/
Preload Scripts (apps/desktop/src/preload): Securely expose main process to renderer

Both processes log to <userData>/logs/{main,renderer}.jsonl in dev and packaged builds (apps/desktop/src/main/utils/structuredLog/); read them with pnpm --dir apps/desktop logs list|query|follow (filters: --level, --since, --operation op_…, --topic tpc_…) instead of tailing files.

Adding New Desktop Features

1. Create Controller

Location: apps/desktop/src/main/controllers/

import { ControllerModule, IpcMethod } from '@/controllers';

export default class NewFeatureCtr extends ControllerModule {
  static override readonly groupName = 'newFeature';

  @IpcMethod()
  async doSomething(params: SomeParams): Promise<SomeResult> {
    // Implementation
    return { success: true };
  }
}