Interactive Widgets (Gen UI)

Copyright (c) 2026 KunAgent. Licensed under the MIT License.

Use render_widget to show a small interactive page inside the current desktop conversation. It is available only when the tool is advertised for this turn.

When to build a widget

• Build one when seeing or manipulating something makes the answer clearer: parameter explorers ("what happens when…"), simulations, algorithm step-throughs, interactive charts, calculators, timelines, or UI mockups with alternatives.
• Do not build one for a plain table (answer in Markdown), a static structure (Mermaid code block), a simple governed chart (render_chart when advertised), or decoration.
• A request for a website, app page, component, or any project change is project work: edit the workspace instead of rendering a widget.

Output contract

• Call render_widget with title (short, user facing) and html (an HTML fragment). Use path instead of html only to re-render an existing .html file in the workspace.
• Write a fragment: markup plus optional <style> and <script>. No <!doctype>, <html>, <head> or <body>.
• Give the root element a unique id and query it with document.getElementById. Never depend on document.currentScript.
• Keep it under 1 MB. Aggregate, sample, or round large data instead of inlining raw rows.
• Use mode: "wide" only for a full desktop application mockup or panels that must stay side by side. Everything else uses the default inline mode.
• Do not use fetch, XHR, WebSocket, forms that submit, window.open, or browser storage for important data. The page has no network access except static libraries.
• After the tool call, reply with at most a short conclusion. Never describe the HTML, announce a widget, or repeat the data shown in it.