lobehub/lobe-chat

Overview

This skill is a practical guide for building and extending the Electron-based desktop app. It focuses on implementing new desktop features, wiring IPC handlers, creating controllers and preload scripts, and managing windows and menus. Use it to integrate secure renderer-main communication and align new code with the project's architecture and conventions.

How this skill works

The guide inspects the main-renderer architecture and explains where to place controllers, preload scripts, IPC types, and renderer services. It shows the pattern for creating ControllerModule classes with @IpcMethod decorators, registering controllers, defining shared TypeScript IPC types, and consuming IPC from renderer services. It also points to reference docs for menus, windows, and local tools workflows.

When to use it

• Adding a new desktop feature that requires main-process APIs
• Exposing secure functionality from main to renderer via preload/IPC
• Implementing or testing IPC controllers and their TypeScript types
• Configuring application menus or custom window behavior
• Integrating local development tools or native OS interactions

Best practices

• Keep main-process surface minimal: expose only needed APIs via preload
• Validate and sanitize all IPC input parameters in controllers
• Prefer async methods and batch transfers to avoid UI jank
• Follow existing controller and service patterns for consistent code organization
• Add tests for main controllers under apps/desktop/src/main/controllers/__tests__

Example use cases

• Create a new controller to access native file dialogs and expose a doSomething IPC method
• Add a renderer service that calls ipc.myFeature.doSomething with typed params and result
• Implement window-management flows: create, persist, and restore window state from main
• Configure a native menu item that triggers a controller action via IPC
• Build local tools integration that runs in main and returns status updates to renderer