Infographic MCP App

What it does

Infographic MCP App turns natural-language prompts into interactive, hand-drawn style diagrams that render inline in Claude Desktop. Describe what you want — a process flow, a timeline, a list layout, or an architecture diagram — and the app returns a live, styled visual built on AntV Infographic. The interactive HTML UI is streamed directly into the chat window without leaving the conversation.

Key features

• Hand-drawn visual style — All diagrams use AntV Infographic's distinctive sketchy rendering, making outputs feel organic and presentation-ready
• Multiple diagram types — Supports list diagrams (zigzag, compact card), sequence diagrams, timelines, and free-form architecture visuals
• Text-based DSL — LLM drives diagram creation via a structured but human-readable DSL; no manual JSON editing required
• MCP Apps inline rendering — Output is delivered as an interactive HTML MCP App resource, rendering directly in the host chat UI
• Deploy-your-own — One-click Vercel deployment available for teams wanting a private hosted instance

Installation

Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "infographic": {
      "command": "node",
      "args": ["/path/to/infographic-mcp-app/dist/index.js", "--stdio"]
    }
  }
}

Build from source first:

git clone https://github.com/VancySavoki/infographic-mcp-app.git
cd infographic-mcp-app
npm install && npm run build

Or deploy to Vercel and connect via HTTP.

Supported hosts

Claude Desktop (primary). Any MCP client supporting the MCP Apps extension should work.