UI extensions
Bundle a small interface and understand the renderer host.
Bundle layout
hello-tools/
plugin.json
ui/
panel.html
panel.css
panel.jsThe directory loader concatenates immediate .html, .css, and .js files under ui/. Compile TypeScript or frameworks to plain JavaScript first. Keep one file per type when execution order matters.
{
"pluginId": "hello_tools",
"name": "Hello panel",
"type": "panel_view",
"fileTypes": [],
"actionButtons": []
}Renderer execution contract
PluginUIHost executes JavaScript as an async function body with api = window and host = PluginUIHost. It is not a React mount API. CSS is injected into the document; scope selectors to your plugin. Scripts may run on refresh, so make initialization idempotent.
const id = 'hello-tools-panel';
if (!api.document.getElementById(id)) {
const panel = api.document.createElement('aside');
panel.id = id;
panel.setAttribute('aria-label', 'Hello Tools');
panel.textContent = 'Hello from your extension.';
api.document.body.appendChild(panel);
}#hello-tools-panel { position: fixed; bottom: 20px; right: 20px; padding: 12px; background: #20202a; color: white; border-radius: 8px; z-index: 100; }Implementation sources
Paths in your AI Plate source checkout:
ui/app.jscore/plugin-manager.ts
Desktop bridge
Inside the Electron renderer, window.electronAPI exposes plugin listing, toggling, ZIP import, reload, export, and UI extension retrieval. It also exposes connector management.
const result = await window.electronAPI.plugins.list();
console.log(result);
await window.electronAPI.plugins.reload();Implementation sources
Paths in your AI Plate source checkout:
electron/preload.cjs