# AIGUI [Health: Active]

**Category:** 📊 Data Visualization  
**Repository:** https://github.com/liliang-cn/aigui  
**GitHub Stars:** 0  
**Views:** 0  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/aigui

## Description
Let coding agents draw charts, diagrams, 3D, molecules and animated topologies as PNGs or live pages

## Claude Desktop Quick Installation
No confirmed install details yet, so no config is published. Follow the setup steps in the repository above.

## Documentation

## What the AIGUI MCP server does

The AIGUI MCP server gives coding agents a way to turn structured content into rendered visual output. It supports charts, diagrams, mathematical notation, code, infrastructure topologies, knowledge graphs, 3D scenes, molecules, maps, physics figures, geometric figures, functions, candlesticks, forms, tables, progress displays, flashcards, citations, documents, provenance, and result tables. The exact formats available depend on the plugins installed in the AIGUI package set.

For the Data Visualization category, the most relevant uses include charts, dashboards, animated data walls, table-and-chart panels, topology views, and other generated figures. Rendered content can appear as a PNG or as an interactive page that the agent opens in a browser.

## How it works

AIGUI parses model output as it streams and renders recognized blocks through a card registry and plugin engine. The core package includes the streaming parser, sanitizer, and registration mechanism. Applications can combine the core with React, Vue, or vanilla DOM adapters, then select plugins for the content they want to display.

The model receives instructions describing the blocks it may write. In an application integration, `buildSystemPrompt` creates those instructions, while the backend streams ordinary text to the renderer. The renderer consumes the response as it arrives rather than waiting for a complete answer.

The MCP package exposes the agent-facing interface. Its documented tools include `aigui_render` for producing PNGs, `aigui_open` for opening a live page, `aigui_edit` for changing an existing page, `aigui_export` for saving output, and `aigui_topology` for drawing systems from Docker Compose or Kubernetes files.

## Setup and configuration

Install the required npm packages with pnpm. A basic application uses `@ai-gui/core`, one framework adapter such as `@ai-gui/react`, and the plugins needed for its output. Chart and Mermaid rendering, for example, use `@ai-gui/plugin-chart` and `@ai-gui/plugin-mermaid`. Other plugins cover scenes, molecules, maps, topology, graphs, dashboards, and UI elements.

The AIGUI MCP server can be added through the documented Claude Code or Codex plugin commands. A host application can also use the package APIs directly with model stream adapters for OpenAI, Anthropic, or Vercel AI. The system prompt supports a `locale` option, including `zh-CN`; page text is English unless another language is requested.

## Tools and capabilities

- Render agent-authored blocks as PNG images.
- Open a rendered result as a live browser page.
- Edit a live page in place.
- Export a page as PNG, PDF, self-contained HTML, GIF, or WebM.
- Generate infrastructure topology views from Docker Compose or Kubernetes files.
- Display charts, diagrams, 3D scenes, molecules, maps, and animated visualizations.

## Limitations and notes

AIGUI does not provide a general data source or analytics backend in the supplied documentation. The examples use sample data, and the system renders what the model writes in supported blocks. Functionality is plugin-based, so installing the core package alone does not provide every visualization type.

Claude Code users who want images shown inside the terminal can install the optional `img-view` mod. It displays drawings in a side pane on kitty, Ghostty, iTerm2, and WezTerm, and uses colour block art in other terminals.

_Full upstream README: https://allmcps.com/mcp/aigui/readme_