opencode-generative-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tushar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,98 @@
+# opencode-generative-ui
+
+OpenCode plugin that recreates Claude-style generative UI widgets with two custom tools:
+
+- `visualize_read_me`
+- `show_widget`
+
+The plugin renders HTML fragments and raw SVG in a native macOS window using [Glimpse](https://github.com/hazat/glimpse).
+
+This project is an OpenCode-focused extraction and adaptation of the original [`Michaelliv/pi-generative-ui`](https://github.com/Michaelliv/pi-generative-ui) work for `pi`. The original repo did the reverse-engineering work and established the shape of the widget tools and guideline set.
+
+## What it does
+
+When OpenCode decides a response should be visual, the plugin can:
+
+1. Load Claude-style widget design guidance with `visualize_read_me`
+2. Render the resulting widget with `show_widget`
+3. Return any `window.glimpse.send(data)` interaction payload back to the model
+
+Typical use cases:
+
+- interactive explainers
+- charts and dashboards
+- SVG diagrams
+- mockups
+- calculators
+
+## Install from npm in OpenCode
+
+After publishing, add the package name to your OpenCode config:
+
+```json
+{
+  "$schema": "https://opencode.ai/config.json",
+  "plugin": ["opencode-generative-ui"]
+}
+```
+
+OpenCode will install the package with Bun on startup.
+
+## Install locally in OpenCode
+
+Clone this repo, then copy the plugin entry file into your OpenCode plugin directory if you want to run it before publishing.
+
+For project-local use today:
+
+1. Copy `src/index.ts` to `.opencode/plugins/generative-ui.ts`
+2. Copy `src/lib/` into `.opencode/plugins/lib/`
+3. Copy `glimpseui.d.ts` into `.opencode/`
+4. Copy this `package.json` into `.opencode/package.json` or merge the dependencies into your existing one
+5. Run `bun install`
+6. If Bun blocks lifecycle scripts, run `bun pm trust glimpseui`
+
+## Development
+
+Install dependencies:
+
+```bash
+bun install
+```
+
+Typecheck:
+
+```bash
+bun run typecheck
+```
+
+Build publishable output:
+
+```bash
+bun run build
+```
+
+## Runtime requirements
+
+- macOS
+- Bun
+- OpenCode
+- a working Swift/Xcode toolchain for `glimpseui`
+
+If `glimpseui` fails to build, update your Xcode Command Line Tools or full Xcode install, then rerun:
+
+```bash
+bun pm trust glimpseui
+```
+
+## Current limitation
+
+This plugin does not yet reproduce pi's token-by-token widget streaming. Widgets render when the tool executes, not progressively during tool-argument streaming.
+
+## Credits
+
+- Original reverse-engineering and `pi` implementation: [`Michaelliv/pi-generative-ui`](https://github.com/Michaelliv/pi-generative-ui)
+- Native widget window runtime: [Glimpse](https://github.com/hazat/glimpse)
+
+## License
+
+MIT

package/dist/index.js

@@ -0,0 +1,217 @@
+import { tool } from "@opencode-ai/plugin";
+import { open } from "glimpseui";
+import { AVAILABLE_MODULES, getGuidelines } from "./lib/guidelines.js";
+import { SVG_STYLES } from "./lib/svg-styles.js";
+const loadedModulesBySession = new Map();
+const activeWindowsBySession = new Map();
+function trackWindow(sessionID, win) {
+    let windows = activeWindowsBySession.get(sessionID);
+    if (!windows) {
+        windows = new Set();
+        activeWindowsBySession.set(sessionID, windows);
+    }
+    windows.add(win);
+}
+function untrackWindow(sessionID, win) {
+    const windows = activeWindowsBySession.get(sessionID);
+    if (!windows)
+        return;
+    windows.delete(win);
+    if (windows.size === 0) {
+        activeWindowsBySession.delete(sessionID);
+    }
+}
+function closeSessionWindows(sessionID) {
+    const windows = activeWindowsBySession.get(sessionID);
+    if (!windows)
+        return;
+    for (const win of windows) {
+        try {
+            win.close();
+        }
+        catch { }
+    }
+    activeWindowsBySession.delete(sessionID);
+}
+function closeAllWindows() {
+    for (const sessionID of Array.from(activeWindowsBySession.keys())) {
+        closeSessionWindows(sessionID);
+    }
+}
+function rememberModules(sessionID, modules) {
+    let seen = loadedModulesBySession.get(sessionID);
+    if (!seen) {
+        seen = new Set();
+        loadedModulesBySession.set(sessionID, seen);
+    }
+    for (const moduleName of modules) {
+        seen.add(moduleName);
+    }
+}
+function hasLoadedGuidelines(sessionID) {
+    return (loadedModulesBySession.get(sessionID)?.size ?? 0) > 0;
+}
+function clearSessionState(sessionID) {
+    loadedModulesBySession.delete(sessionID);
+    closeSessionWindows(sessionID);
+}
+function wrapHTML(code, isSVG = false) {
+    if (isSVG) {
+        return `<!DOCTYPE html><html><head><meta charset="utf-8"><style>${SVG_STYLES}</style></head>
+<body style="margin:0;display:flex;align-items:center;justify-content:center;min-height:100vh;background:#1a1a1a;color:#e0e0e0;">
+${code}</body></html>`;
+    }
+    return `<!DOCTYPE html><html><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1.0">
+<style>*{box-sizing:border-box}body{margin:0;padding:1rem;font-family:system-ui,-apple-system,sans-serif;background:#1a1a1a;color:#e0e0e0}${SVG_STYLES}</style>
+</head><body>${code}</body></html>`;
+}
+function normalizeTitle(title) {
+    const normalized = title.replace(/_/g, " ").trim();
+    return normalized || "Widget";
+}
+function getGlimpseSetupHint(err) {
+    const message = err instanceof Error ? err.message : String(err);
+    return [
+        `Failed to open the Glimpse widget window: ${message}`,
+        "Ensure plugin dependencies are installed.",
+        "If Bun blocked lifecycle scripts, run `bun pm trust glimpseui` in the plugin directory or OpenCode config directory.",
+        "If the native build still fails, update your Xcode Command Line Tools / Swift toolchain or point GLIMPSE_BINARY_PATH at an existing Glimpse binary.",
+    ].join(" ");
+}
+const visualizeReadMe = tool({
+    description: "Returns design guidelines for show_widget (CSS patterns, colors, typography, layout rules, examples). " +
+        "Call once before your first show_widget call. Do not mention this call to the user.",
+    args: {
+        modules: tool.schema
+            .array(tool.schema.string())
+            .min(1)
+            .describe(`Which module(s) to load. Pick from: ${AVAILABLE_MODULES.join(", ")}.`),
+    },
+    async execute(args, context) {
+        const invalid = args.modules.filter((moduleName) => !AVAILABLE_MODULES.includes(moduleName));
+        if (invalid.length > 0) {
+            throw new Error(`Unknown module(s): ${invalid.join(", ")}. Available modules: ${AVAILABLE_MODULES.join(", ")}.`);
+        }
+        rememberModules(context.sessionID, args.modules);
+        context.metadata({
+            title: "Read Guidelines",
+            metadata: { modules: args.modules },
+        });
+        return getGuidelines(args.modules);
+    },
+});
+const showWidget = tool({
+    description: "Show visual content in a native window using HTML or SVG. Use for charts, diagrams, dashboards, calculators, mockups, and interactive explainers. " +
+        "Always call visualize_read_me first in the current session.",
+    args: {
+        i_have_seen_read_me: tool.schema
+            .boolean()
+            .describe("Confirm that visualize_read_me was already called in this session."),
+        title: tool.schema.string().min(1).describe("Short snake_case identifier for this widget."),
+        widget_code: tool.schema
+            .string()
+            .min(1)
+            .describe("HTML fragment or raw SVG. For HTML, do not include a full HTML document."),
+        width: tool.schema.number().int().positive().optional().describe("Window width in pixels. Default: 800."),
+        height: tool.schema.number().int().positive().optional().describe("Window height in pixels. Default: 600."),
+        floating: tool.schema.boolean().optional().describe("Keep the window always on top. Default: false."),
+    },
+    async execute(args, context) {
+        if (!args.i_have_seen_read_me || !hasLoadedGuidelines(context.sessionID)) {
+            throw new Error("You must call visualize_read_me before show_widget. Set i_have_seen_read_me: true after doing so.");
+        }
+        const code = args.widget_code;
+        const isSVG = code.trimStart().startsWith("<svg");
+        const title = normalizeTitle(args.title);
+        const width = args.width ?? 800;
+        const height = args.height ?? 600;
+        context.metadata({
+            title: `Show Widget: ${title}`,
+            metadata: {
+                title: args.title,
+                width,
+                height,
+                isSVG,
+            },
+        });
+        let win;
+        try {
+            win = open(wrapHTML(code, isSVG), {
+                width,
+                height,
+                title,
+                floating: args.floating ?? false,
+            });
+        }
+        catch (err) {
+            throw new Error(getGlimpseSetupHint(err));
+        }
+        trackWindow(context.sessionID, win);
+        return await new Promise((resolve) => {
+            let resolved = false;
+            let messageData;
+            const finish = (reason) => {
+                if (resolved)
+                    return;
+                resolved = true;
+                if (messageData !== undefined) {
+                    resolve(`Widget rendered. User interaction data: ${JSON.stringify(messageData)}`);
+                    return;
+                }
+                resolve(`Widget \"${title}\" rendered and shown to the user (${width}x${height}). ${reason}`);
+            };
+            win.on("message", (data) => {
+                messageData = data;
+                finish("User sent data from widget.");
+            });
+            win.on("closed", () => {
+                untrackWindow(context.sessionID, win);
+                finish("Window closed by user.");
+            });
+            win.on("error", (err) => {
+                untrackWindow(context.sessionID, win);
+                finish(`Error: ${err.message}`);
+            });
+            context.abort.addEventListener("abort", () => {
+                try {
+                    win.close();
+                }
+                catch { }
+                finish("Aborted.");
+            }, { once: true });
+            setTimeout(() => {
+                finish("Widget still open (timed out waiting for interaction).");
+            }, 120_000);
+        });
+    },
+});
+const SYSTEM_GUIDANCE = [
+    "Use show_widget when the user asks for visual content such as charts, diagrams, dashboards, SVG illustrations, mockups, or interactive explainers.",
+    "Always call visualize_read_me once before the first show_widget call in a session, then set i_have_seen_read_me: true.",
+    "For HTML widgets, provide a fragment only. Do not include DOCTYPE, html, head, or body tags.",
+    "For SVG widgets, start widget_code with <svg>.",
+    "Keep widgets focused and appropriately sized. Default size is 800x600 unless the content needs another size.",
+].join("\n");
+let registeredExitHandler = false;
+export const GenerativeUIPlugin = async () => {
+    if (!registeredExitHandler) {
+        registeredExitHandler = true;
+        process.on("exit", closeAllWindows);
+    }
+    return {
+        tool: {
+            visualize_read_me: visualizeReadMe,
+            show_widget: showWidget,
+        },
+        event: async ({ event }) => {
+            if (event.type === "session.deleted") {
+                clearSessionState(event.properties.info.id);
+            }
+        },
+        "experimental.chat.system.transform": async (_input, output) => {
+            output.system.push(SYSTEM_GUIDANCE);
+        },
+    };
+};
+export default GenerativeUIPlugin;