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