AI SummaryA structured guide for developers implementing new Electron APIs in Wave Terminal by showing exactly which four files to edit and how to wire up frontend-to-main-process communication. Essential for Wave Terminal contributors extending the application's capabilities.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "electron-api" skill in my project. Please run this command in my terminal: # Install skill into your project mkdir -p .claude/skills/electron-api && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/electron-api/SKILL.md "https://raw.githubusercontent.com/wavetermdev/waveterm/main/.kilocode/skills/electron-api/SKILL.md" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
Description
Guide for adding new Electron APIs to Wave Terminal. Use when implementing new frontend-to-electron communications via preload/IPC.
Adding Electron APIs
Electron APIs allow the frontend to call Electron main process functionality directly via IPC.
Four Files to Edit
• frontend/types/custom.d.ts - TypeScript ElectronApi type • emain/preload.ts - Expose method via contextBridge • emain/emain-ipc.ts - Implement IPC handler • frontend/preview/preview-electron-api.ts - Add a no-op stub to keep the previewElectronApi object in sync with the ElectronApi type
Three Communication Patterns
• Sync - ipcRenderer.sendSync() + ipcMain.on() + event.returnValue = ... • Async - ipcRenderer.invoke() + ipcMain.handle() • Fire-and-forget - ipcRenderer.send() + ipcMain.on()
1. Define TypeScript Interface
In frontend/types/custom.d.ts: `typescript type ElectronApi = { captureScreenshot: (rect: Electron.Rectangle) => Promise<string>; // capture-screenshot }; `
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster