# Visuals MCP

Visuals MCP turns agent data into interactive tables, charts, trees, and lists. Use it to inspect collections or select items inside an MCP client.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 6
- Author: harrybin
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/harrybin/visuals-mcp
- Updated: 2026-04-07
- HTML: https://affpapa.org/en/nevibecode/mcp/visuals-mcp

## What it does

The server can render sortable, filterable tables, several chart types, images with metadata, nested trees, and reorderable lists. A master-detail view pairs a collection with a panel containing a table, image, or text. Table and tree state can be sent back to the language model; chart selections and hover state can reach the host app.

Exports depend on the view: tables support CSV, TSV, and PDF, while trees can be copied or saved as HTML or PNG. Lists offer text, CSV, and JSON output. For Claude Code, add the server with `npx` and `@harrybin/visuals-mcp`; the command will not run if `npx` is unavailable.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add visuals-mcp -- npx -y @harrybin/visuals-mcp
```

### Codex

**Platform CLI**
```bash
codex mcp add visuals-mcp -- npx -y @harrybin/visuals-mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "visuals-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "@harrybin/visuals-mcp"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "visuals-mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@harrybin/visuals-mcp"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add visuals-mcp npx -y @harrybin/visuals-mcp
```

## When to use it
- sort and filter rows in a data table
- compare several charts in one view
- inspect nested data as an expandable tree
- browse a collection beside its detail panel
- reorder list items with drag and drop

## Example prompts
- Show these records in an interactive table so I can filter the rows.
- Plot these data points and place another chart beside the first one.
- Display this nested structure as a tree with expandable nodes.

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74569
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51104
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16073
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4406
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3851
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3451

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md