AIGUI
Let coding agents draw charts, diagrams, 3D, molecules and animated topologies as PNGs or live pages
Installation
Ajoutez ceci à la configuration MCP de votre client (Claude Desktop : claude_desktop_config.json ; Cursor : .cursor/mcp.json ; VS Code et les autres utilisent la même forme « mcpServers »).
@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
Tirée du README du projet sur GitHub, actualisée chaque semaine. Les liens ouvrent 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
Questions fréquentes
Qu'est-ce que AIGUI ?
Let coding agents draw charts, diagrams, 3D, molecules and animated topologies as PNGs or live pages
Comment installer AIGUI ?
Il s'exécute sur votre machine. Dans Claude Code : claude mcp add aigui -- npx -y @ai-gui/mcp@0.49.0. Pour les autres clients, collez la configuration JSON de cette page dans leurs réglages MCP.
Faut-il une clé API pour AIGUI ?
Son entrée au registre n'indique aucune clé ni secret obligatoire. Certaines fonctions peuvent tout de même demander un compte auprès du service auquel il se connecte.
AIGUI est-il open source ?
Oui. Son code est sur GitHub sous licence MIT.
Qui maintient AIGUI ?
Il est publié par liliang-cn. AI.tn le référence sans le maintenir ni le recommander.
Issu du registre MCP officiel. Être listé n'est pas une recommandation : vérifiez le code et les permissions d'un serveur avant de lui donner accès à vos données.