Visuals MCP Server

MCP server for interactive visualizations: tables, images, trees, lists, master-detail

Local serverstdioGo

What is the Visuals MCP server?

MCP server for interactive visualizations: tables, images, trees, lists, master-detail. Exposed over MCP by the visuals mcp server, that capability becomes something an assistant can invoke while it works, not something you go and do afterwards.

What it actually does

An MCP (Model Context Protocol) server that provides interactive visualizations for AI agents. Display data in rich, interactive formats including tables with TanStack Table, charts with Recharts, image previews with metadata, master-detail views for browsing collections, tree views for hierarchical data, and customizable lists with drag-and-drop reordering.

Its toolset

Everything the assistant can do here goes through one of these:

  • Sorting — Click column headers to sort ascending/descending
  • Filtering — Per-column text filters with apply button
  • Pagination — Customizable page sizes (5, 10, 20, 50, 100 rows)
  • Export — Copy as CSV/TSV or export to PDF
  • Responsive — Works on different screen sizes
  • Icons — Add custom icons/emojis to nodes
  • Drag-and — Drop Reordering**: Easily reorder items by dragging
  • Checkboxes — Optional checkboxes for task lists and selections
  • Metadata — Attach custom metadata to items
  • line — bar
  • area — pie
  • scatter — composed

Adding it to your client

Installation goes through your MCP client rather than a global install: point it at @harrybin/visuals-mcp on npm and it is fetched when the client starts. The copy-paste blocks for Claude Desktop, Claude Code and Cursor are further down this page.

Configuration

You will need one environment variable: YOUR_GITHUB_TOKEN. The server will not start without them, which is usually why the tools fail to appear on a first run. Keep credentials in your client's env block or a secrets manager rather than in a file you might commit.

When to reach for it

Among the planning and project tracking options, the useful question is rarely "what can it do" but "what does it cost you to run" — permissions, credentials, and how much of your context its toolset consumes. Visuals's toolset — Sorting, Filtering, Pagination and 9 more — is a fair guide to whether it matches your workflow. It is maintained by harrybin; worth a glance at recent repository activity before you build anything load-bearing on it.

This entry was verified against Visuals's own documentation before publication; SyncDev keeps the directory reviewed rather than auto-generated.

Caveats

  • It runs with your machine's permissions. That is convenient and also the reason to think about what you point it at before you approve a tool call.
  • With 12 tools registered it takes up a noticeable share of the context window; turn it off in projects that never touch Visuals.
  • Missing credentials fail quietly in some clients — if no tools show up, check the environment block first.
  • MCP clients confirm each tool call by default. Leave that on until you have watched what the visuals mcp server does with a few real requests.

Available tools

ToolWhat it does
SortingClick column headers to sort ascending/descending
FilteringPer-column text filters with apply button
PaginationCustomizable page sizes (5, 10, 20, 50, 100 rows)
ExportCopy as CSV/TSV or export to PDF
ResponsiveWorks on different screen sizes
IconsAdd custom icons/emojis to nodes
Drag-andDrop Reordering**: Easily reorder items by dragging
CheckboxesOptional checkboxes for task lists and selections
MetadataAttach custom metadata to items
linebar
areapie
scattercomposed

How to install the Visuals MCP server

{
  "mcpServers": {
    "visuals": {
      "command": "npx",
      "args": ["-y", "@harrybin/visuals-mcp"],
      "env": {
        "YOUR_GITHUB_TOKEN": "your-value"
      }
    }
  }
}

Add to claude_desktop_config.json, then restart Claude Desktop.

Configuration

VariableDescriptionRequired
YOUR_GITHUB_TOKENCredential the server authenticates with.Yes

Example prompts to try

  • Use Visuals to Sorting.
  • Use Visuals to Filtering.
  • Use Visuals to Pagination.

Frequently asked questions

It connects Visuals to MCP-compatible AI assistants such as Claude and Cursor, exposing 12 tools (Sorting, Filtering, Pagination, and more) that the assistant can call on your behalf. Instead of copying data back and forth by hand, the assistant works with Visuals directly.