AIGUI

io.github.liliang-cnv0.48.0更新於 Oct 4, 2026

Let coding agents draw charts, diagrams, 3D, molecules and animated topologies as PNGs or live pages

已驗證STDIO僅桌面Developer Tools Media & Design Data & Analytics

概覽

AI 產生的概覽

讓編碼代理把圖表、示意圖、3D 場景、分子與基礎設施拓撲渲染成 PNG 或本機即時頁面。

功能: AIGUI 會把代理撰寫的 markdown 區塊轉成圖片：ECharts 圖表、Mermaid 示意圖、KaTeX 數學式、儀表板、3D 場景、由 SMILES 產生的分子、軌道、知識圖譜，以及逐步播放的拓撲。工具包含查詢區塊語法的 aigui_guide、產生 PNG 的 aigui_render、開啟即時頁面的 aigui_open、以尋找取代修改頁面的 aigui_edit、匯出 PNG、PDF、HTML、GIF 或 WebM 的 aigui_export、依 docker-compose 或 Kubernetes 資訊清單繪製系統的 aigui_topology，以及讀取使用者留言的 aigui_feedback。無頭瀏覽器會在代理看到結果前檢查標籤重疊、文字被裁切或過小，以及對比不足等問題。
適用情境: 當代理的回答用圖片比文字更容易理解時適用，例如依資料檔產生圖表、架構示意圖，或從實際部署設定讀取的基礎設施拓撲。也適合使用者想在渲染頁面上留言、再由代理修改的工作流程。
執行需求: 以 npm 套件 @ai-gui/mcp 透過 stdio 在本機執行，需要 Node.js 18.11 以上版本。第一次繪圖會下載約 100 MB 的無頭瀏覽器，可用 AIGUI_NO_BROWSER_DOWNLOAD=1 略過並改用已安裝的 Chrome 或 Edge。不需要帳號或 API 金鑰。選用變數包括 AIGUI_OUT_DIR、AIGUI_NO_OPEN、AIGUI_OPEN_IMAGES、AIGUI_PLUGIN_DIR 與 AIGUI_BROWSER_CHANNEL。

安裝前請注意

工作階段執行期間，頁面會透過 127.0.0.1 上由系統挑選的連接埠提供，且只提供頁面目錄。輸出預設寫入快取目錄。自訂區塊是純瀏覽器指令碼，其 HTML 會被清理，但仍屬於載入頁面的第三方程式碼。除非停用，第一次執行會下載瀏覽器。

安裝

在 SourceWeft 中

開啟儀表板中的 AIGUI，將其新增到工作區。
為需要使用其工具的對話啟用該服務。

Desktop only，透過 STDIO。 STDIO 服務會啟動本機處理程序，因此需要 SourceWeft 桌面主機。

其他 MCP 客戶端

參照儲存庫中的啟動說明。

README

@ai-gui/mcp

[npm] [license] [CI]

Let your coding agent draw. An MCP server — and the engine of the AIGUI plugin for Claude Code and Codex — that turns charts, diagrams, maths, 3D scenes, molecules, orbits, dashboards and step-by-step infrastructure topologies into PNGs the agent can check, or a live page in your browser.

[A failover topology, drawn and played by the agent]

Live demos · Source · All packages

Install

Claude Code — the plugin also brings the skills that tell the agent when a picture beats text:

Codex:

Any MCP client — run aigui-mcp over stdio:

Requires Node.js 18.11+. The first drawing downloads a headless browser (about 100 MB, once); everything runs locally, with no account or API key.

What it draws

21 block types: ECharts charts (3D too), Mermaid, KaTeX, dashboards and data walls, 3D scenes, molecules from SMILES, orbits and collisions, topologies whose steps play, knowledge graphs, geometry, function plots, optics, mechanics, labelled figures, candlesticks, tables and more. Nine of them render straight to PNG; all of them draw in a page.

Tools

Tool	What it does
`aigui_guide`	Lists the blocks, or returns the exact syntax for the ones named — read before writing a block.
`aigui_render`	Draws the blocks in a markdown string as PNGs, returned to the agent and saved to disk.
`aigui_open`	Opens the whole answer as a live page: charts to hover, 3D to turn, topologies and walls that play.
`aigui_edit`	Changes part of a page by find-and-replace, without sending the whole answer again.
`aigui_export`	Saves a page as PNG, PDF, one self-contained HTML file, or a GIF / WebM of it playing.
`aigui_topology`	Draws a system from its docker-compose file or Kubernetes manifests.
`aigui_feedback`	Reads the comments the user left on a page's blocks.

Why it can be trusted

Numbers come from your files. Pass data: {"sales": "/abs/path/sales.csv"} and write {"$data":"sales","column":"revenue"} in the chart — or pick, sum, count, max, min, avg. The figures are read from the file, never retyped by the model, and the result names the file behind each block.
Every drawing is checked. A headless browser looks for labels on top of each other, text cut off or under 9 px, poor contrast and crowded charts, and tells the agent to fix them before you see anything.
Topologies from real config. aigui_topology reads what is actually deployed, not what the model remembers.
Local. Pictures go to ~/.cache/aigui/images, pages to ~/.cache/aigui/pages, listed newest first in pages/index.html. A page loads nothing from the network.

Custom blocks

Add your own block type in three files — no build step, no fork:

File	What it is
`aigui.json`	Name, fences, a one-line description, whether it may render to PNG
`plugin.js`	A plain browser script registering an `AIGuiPlugin`: `(globalThis.__aiguiPacks ??= {}).ticket = (theme, still) => [...]`. Its HTML is sanitized like any plugin's.
`spec.md`	The rules the model follows to write the block

It then appears in aigui_guide as [custom] and draws in pages, PNGs and exports. Blocks installed when a session starts are named in the tool descriptions too: in a measured run, agents used a custom block in 9 of 9 sessions with that, against 5 of 9 without. A broken folder is skipped with its reason; a name that collides with a built-in block is refused.

Comments from the page

While the session runs, pages are served on 127.0.0.1 (a port the system picks) with a Comment button: pick a block, say what should change, send. The agent reads it with aigui_feedback and edits the page. Only the pages directory is served.

Configuration

Variable	Effect
`AIGUI_OUT_DIR`	Where pictures and pages go. Default `~/.cache/aigui` (`XDG_CACHE_HOME` honoured).
`AIGUI_NO_OPEN=1`	Write pages without opening them.
`AIGUI_OPEN_IMAGES=1`	Also open `aigui_render`'s PNGs in the image viewer — the plugins set it, since a terminal cannot show images.
`AIGUI_PLUGIN_DIR`	Where custom blocks live. Default `~/.config/aigui/plugins`.
`AIGUI_NO_BROWSER_DOWNLOAD=1`	Skip the headless-browser download; draw with an installed Chrome or Edge.
`AIGUI_BROWSER_CHANNEL`	Pin a browser: `chromium`, `chrome` or `msedge`.

Programmatic use

createServer() returns the McpServer unconnected, for a host with its own transport; callTool(name, args) runs one tool directly.

License

MIT © Liang Li

來源：packages/mcp/README.md，提交 b3a8bd7

工具

工具後設資料尚未被收錄。

版本歷史

v0.48.0最新Oct 4, 2026


[Chart]	[3D scene]
[Molecule]	[Orbits]