AIGUI

Kodlama ajanlarının çizim yapmasını sağlar: adımları PNG veya canlı tarayıcı sayfası olarak oynatılan grafikler, mermaid, matematik, 3D sahneler, moleküller ve altyapı topolojileri. CSV/JSON dosyalarından grafikleri doldurur, çizimleri örtüşen veya kırpılmış etiketler için kontrol eder ve PDF, bağımsız HTML veya GIF dışa aktarır. Yerel olarak çalışır; ayrıca bir Claude Code ve Codex eklentisidir.

GitHub

Dokümantasyon

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.

To see the pictures inside Claude Code instead of an image viewer, add the img-view mod: /plugin install img-view@aigui. It shows each drawing in a pane beside the conversation, as real pixels in kitty, Ghostty, iTerm2 and WezTerm and as colour block art in any other terminal.

Docs

License

MIT