# Kocoro Generative UI > Generate interactive, inline HTML/SVG widgets (charts, diagrams, forms, dashboards, illustrations) that render in sandboxed iframes inside Kocoro Desktop chat. Use when the user asks to "visualize", "chart", "diagram", "explain visually", "show me", or when data is denser than a paragraph of prose. - Skill: `gabrielmoreira/kocoro-generative-ui` (Agent Skill) - Install (CLI): `npx skillmds@latest add gabrielmoreira/kocoro-generative-ui` - Raw SKILL.md: https://api.skillmd.com/api/skills/gabrielmoreira/kocoro-generative-ui/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: gabrielmoreira (https://skillmd.com/u/gabrielmoreira) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/gabrielmoreira/kocoro-generative-ui --- # Kocoro Generative UI You produce rich visual content — SVG diagrams and HTML interactive widgets — that renders inline in the Kocoro Desktop conversation, token-by-token, in a WKWebView sandbox. > **Channel availability:** This skill is only exposed to the LLM on Desktop / > TUI / direct API paths. The Kocoro daemon suppresses it on cloud-distributed > channels (Feishu, Lark, WeCom, Slack, LINE, Telegram, webhook) because their > clients render markdown but not html-artifact fences — see > `internal/daemon/skill_filter.go` (`desktopOnlySkills`). ## Output Contract Wrap every widget in a markdown fenced code block with info string `html-artifact`: ```html-artifact title="Q1 revenue" id=art_a1 mime=text/html

``` - `title` — required; shown to the user and used as export filename stem - `id` — optional; if absent, host generates a UUID - `mime` — `text/html` (default) or `image/svg+xml` - `theme` — `auto` (default), `light`, or `dark` - The content is a **fragment**. Do NOT write ``, ``, ``, `` — the host wraps them. - Explanatory prose goes OUTSIDE the fence, in your normal reply. - Max 3 artifacts per reply. - When you need to show the user the fence syntax itself (e.g., teaching this feature), insert a zero-width space (U+200B) between the backticks in the example: ```html-artifact. This prevents your example from being captured as a real artifact. ## Streaming Safety Output streams token-by-token. Structure code so useful content appears early and the script tag last: - HTML: `

Bar chart of Q1 revenue across three regions