Infographic MCP App

MCP server that renders AntV Infographic diagrams with an interactive text-based DSL.

List Diagram:

Sequence Diagram:

Works with any client that supports MCP Apps — Claude, ChatGPT, VS Code, Goose, and others. If something doesn't work, please open an issue.

Build from Source

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

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

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

Restart Claude Desktop.

Example prompts:

• "Draw a cute cat using infographic"
• "Create a timeline diagram using infographic"
• "Draw an architecture diagram showing a user connecting to an API server"

Text responses can only go so far. Sometimes users need to interact with data, not just read about it. MCP Apps is an official Model Context Protocol extension that lets servers return interactive HTML interfaces (data visualizations, forms, dashboards) that render directly in the chat.

• Getting started for humans: documentation
• Getting started for AIs: skill

PRs welcome! See Local above for build instructions.

You can deploy your own copy to Vercel in a few clicks:

1. Fork this repo
2. Go to vercel.com/new and import your fork
3. No environment variables needed — just deploy
4. Your server will be at https://your-project.vercel.app/mcp

# 1. Bump version in manifest.json and package.json
# 2. Build and pack
npm run build && mcpb pack .

# 3. Create GitHub release
gh release create v0.3.0 infographic-mcp-app.mcpb --title "v0.3.0" --notes "What changed"

# 4. Deploy to Vercel
vercel --prod

Built with AntV Infographic — a hand-drawn style visualization library.

MIT