AIGUI

讓編碼代理繪製：圖表、Mermaid、數學、3D場景、分子與基礎設施拓撲，其步驟以PNG或即時瀏覽器頁面播放。從CSV/JSON檔案填入圖表，檢查繪圖是否有重疊或裁切標籤，並匯出PDF、獨立HTML或GIF。在本地運行；同時也是Claude Code和Codex外掛。

GitHub試用此 MCP贊助

文件

AIGUI

npm npm downloads CI License: MIT

Render a streaming LLM answer as live UI — markdown, charts, diagrams, maths, 3D, topologies and app-defined cards — in React, Vue or plain DOM.

A failover, drawn and played by the agent

Live demos · Use it from Claude Code or Codex — the agent draws charts, diagrams, 3D and topologies for you, as pictures or a live page: install the plugin.

ChartTopology with a failover played step by step
3D scene with labelled, stacked objectsMolecule in 3D from SMILES
Orbits integrated from masses and distancesSequence diagram

Data wall

Every picture above was drawn by AIGUI from a fenced block a model wrote; the data is sample data.

Install

pnpm add @ai-gui/core @ai-gui/react      # or @ai-gui/vue, @ai-gui/vanilla
pnpm add @ai-gui/plugin-chart @ai-gui/plugin-mermaid @ai-gui/plugin-katex   # any plugins
Package
@ai-gui/coreHeadless streaming parser, card registry, plugin engine, sanitizer
@ai-gui/react · @ai-gui/vue · @ai-gui/vanillaFramework adapters
@ai-gui/plugin-chart · @ai-gui/plugin-bigscreen · @ai-gui/plugin-dashboardECharts charts, animated data walls, table + chart panels
@ai-gui/plugin-mermaid · @ai-gui/plugin-katex · @ai-gui/plugin-highlightDiagrams, maths, code
@ai-gui/plugin-topology · @ai-gui/plugin-graphInfrastructure topologies with playable steps, knowledge graphs
@ai-gui/plugin-scene · @ai-gui/plugin-molecule · @ai-gui/plugin-map3D scenes, molecules, maps
@ai-gui/plugin-gravity · @ai-gui/plugin-motion · @ai-gui/plugin-optics · @ai-gui/plugin-physicsPhysics figures computed from the conditions
@ai-gui/plugin-solid · @ai-gui/plugin-function · @ai-gui/plugin-figure · @ai-gui/plugin-quoteGeometry, functions, labelled figures, candlesticks
@ai-gui/plugin-ui · @ai-gui/plugin-form · @ai-gui/plugin-primitives · @ai-gui/plugin-progress · @ai-gui/plugin-flashcardGenerated UI, forms, lists and tables, progress, flashcards
@ai-gui/plugin-citation · @ai-gui/plugin-artifact · @ai-gui/plugin-evidence · @ai-gui/plugin-resultsetSources, revisioned documents, host-written provenance and result tables
@ai-gui/plugin-sdkPlugin authoring helpers
@ai-gui/openai · @ai-gui/anthropic · @ai-gui/vercel-aiModel stream adapters
@ai-gui/image · @ai-gui/openclawBlocks to PNG in a headless browser; for picture-only chat channels
@ai-gui/mcp · @ai-gui/cli · @ai-gui/live · @ai-gui/devtoolsMCP server for agents, the system prompt as a file, server-driven cards, a stream timeline

Quick start

import { useRef } from "react"
import { buildSystemPrompt } from "@ai-gui/core"
import { AIRenderer } from "@ai-gui/react"
import { chart } from "@ai-gui/plugin-chart"
import { mermaid } from "@ai-gui/plugin-mermaid"

const plugins = [chart(), mermaid()]
const system = buildSystemPrompt({ base: "You are a helpful assistant.", plugins })

export function Answer() {
  const ref = useRef(null)
  async function ask(question: string) {
    const res = await fetch("/api/chat", { method: "POST", body: JSON.stringify({ system, question }) })
    ref.current.reset()
    await ref.current.feed(res.body) // renders as the tokens arrive
  }
  return <AIRenderer ref={ref} plugins={plugins} />
}

buildSystemPrompt tells the model which blocks it may write; pass locale: "zh-CN" for the rules in Chinese. The backend only streams text — any language works.

In Claude Code and Codex

# Claude Code
/plugin marketplace add liliang-cn/aigui
/plugin install aigui@aigui

# Codex
codex plugin marketplace add liliang-cn/aigui
codex plugin add aigui@aigui

The agent can then draw: aigui_render returns PNGs, aigui_open opens a live page in your browser, aigui_edit changes a page in place, aigui_export saves it as PNG, PDF, a self-contained HTML file or a GIF/WebM of it playing, and aigui_topology draws a system straight from its docker-compose or Kubernetes files. Page text is English unless you ask for another language. See @ai-gui/mcp.

Docs

License

MIT