# Infographic MCP App

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

**List Diagram:**

![List Diagram](docs/list-zigzag-up-compact-card.png)

**Sequence Diagram:**

![Sequence Diagram](docs/sequence-mountain-underline-text.png)

## Install

Works with any client that supports [MCP Apps](https://modelcontextprotocol.io/docs/extensions/apps) — Claude, ChatGPT, VS Code, Goose, and others. If something doesn't work, please [open an issue](https://github.com/vancysavoki/infographic-mcp-app/issues).

### Local

**Build from Source**

```bash
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`:

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

Restart Claude Desktop.

## Usage

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"

## What are MCP Apps and how can I build one?

Text responses can only go so far. Sometimes users need to interact with data, not just read about it. [MCP Apps](https://github.com/modelcontextprotocol/ext-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](https://modelcontextprotocol.io/docs/extensions/apps)
- **Getting started for AIs**: [skill](https://github.com/modelcontextprotocol/ext-apps/blob/main/plugins/mcp-apps/skills/create-mcp-app/SKILL.md)

## Contributing

PRs welcome! See [Local](#local) above for build instructions.

### Deploy your own instance

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

1. Fork this repo
2. Go to [vercel.com/new](https://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`

### Release checklist

<details>
<summary>For maintainers</summary>

```bash
# 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
```

</details>

## Credits

Built with [AntV Infographic](https://github.com/antvis/infographic) — a hand-drawn style visualization library.

## License

MIT