AIGUI
Let coding agents draw charts, diagrams, 3D, molecules and animated topologies as PNGs or live pages
Install
Add this to your client's MCP configuration (Claude Desktop: claude_desktop_config.json; Cursor: .cursor/mcp.json; VS Code and others use the same "mcpServers" shape).
@ai-gui/mcpclaude mcp add aigui -- npx -y @ai-gui/mcp@0.49.0{
"mcpServers": {
"aigui": {
"command": "npx",
"args": [
"-y",
"@ai-gui/mcp@0.49.0"
]
}
}
}Documentation
From the project's README on GitHub, refreshed weekly. Links open on GitHub.
AIGUI
Render a streaming LLM answer as live UI — markdown, charts, diagrams, maths, 3D, topologies and app-defined cards — in React, Vue or plain DOM.
**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.
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 pluginsQuick 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@aiguiThe 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
- All packages on npm: npmjs.com/org/ai-gui
- Full guide — cards, actions, channels, plugins in depth
- AGENTS.md — integrating the SDK, what the model may write, releasing
- Each package's README, under
packages/
License
MIT
Frequently asked questions
What is AIGUI?
Let coding agents draw charts, diagrams, 3D, molecules and animated topologies as PNGs or live pages
How do I install AIGUI?
It runs on your machine. In Claude Code: claude mcp add aigui -- npx -y @ai-gui/mcp@0.49.0. For other clients, paste the JSON configuration from this page into their MCP settings.
Does AIGUI need an API key?
Its registry entry lists no required key or secret. Some features may still need an account with the service it connects to.
Is AIGUI open source?
Yes. Its code is on GitHub under the MIT license.
Who maintains AIGUI?
It is published by liliang-cn. AI.tn lists it but does not maintain or endorse it.
From the official MCP Registry. Listing is not an endorsement: review a server's code and permissions before giving it access to your data.