AIGUI

Lets coding agents draw: charts, mermaid, maths, 3D scenes, molecules and infrastructure topologies whose steps play, as PNGs or a live browser page. Fills charts from CSV/JSON files, checks drawings for overlapping or clipped labels, and exports PDF, standalone HTML or GIF. Runs locally; also a Claude Code and Codex plugin.

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