MCP Visuals Server

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

Features

Table Visualization

Interactive Table Display: Full-featured data table with TanStack Table v8
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)
Column Visibility: Toggle which columns are displayed
Row Selection: Select individual rows or all rows
Export: Copy as CSV/TSV or export to PDF
Agent Integration: Table state (selections, filters, sorting) automatically sent back to the LLM via updateModelContext
Theme Integration: Respects VS Code theme colors and fonts
Responsive: Works on different screen sizes
Generic Data Support: Accepts any column structure and data types

Image Preview

Rich Image Cards: Display images with title, caption, and metadata
Metadata Display: Show filename, dimensions, and file size
Flexible Sources: Support URLs and data URIs
Local File Support: Automatically converts local file paths to data URIs
Theme Integration: Respects VS Code theme colors and fonts

Master-Detail View

Flexible Layout: Display a list of items with detailed content panel
Multiple Content Types: Detail panel supports tables, images, or custom text/HTML
Reusable Components: Leverages existing table and image visualizations
Configurable Layout: Choose horizontal (side-by-side) or vertical (stacked) orientation
State Management: Selection state automatically sent back to LLM
Rich Master List: Display items with icons, labels, and descriptions
Theme Integration: Consistent theming across all components

Tree View

Hierarchical Data Display: Interactive tree structure for nested data
Expand/Collapse: Click to expand or collapse nodes
Node Selection: Select individual nodes to highlight them
Metadata Support: Display optional metadata for each node
Icons: Add custom icons/emojis to nodes
Bulk Operations: Expand all or collapse all nodes at once
Export Options: Copy tree to clipboard, export as HTML, or save as image (PNG)
Agent Integration: Tree state (expanded nodes, selection) sent back to the LLM
Theme Integration: Respects VS Code theme colors and fonts
Use Cases: File systems, org charts, nested categories, JSON/XML structures

List Visualization

Interactive Lists: Display any type of list with rich formatting
Drag-and-Drop Reordering: Easily reorder items by dragging
Checkboxes: Optional checkboxes for task lists and selections
Image Thumbnails: Show images alongside list items
Compact Mode: Toggle between comfortable and compact layouts
Export Options: Copy as plain text, CSV, or JSON
Individual Item Copy: Quick copy button for each item
Subtext Support: Secondary text/description for each item
Metadata: Attach custom metadata to items
Theme Integration: Respects VS Code theme colors and fonts

Screenshots

Table Example

Interactive table with sorting, filtering, pagination, and row selection

Master-Detail Example

Master-detail view for browsing collections with tables, images, or custom content

List Example

Interactive list with drag-and-drop reordering, checkboxes, and image thumbnails

Tree Example

Interactive tree view with expand/collapse, node selection, and export options

Installation

npmjs (Recommended)

In VSCode github Copilot Chat

click on the tools icon (Configure tools...)
click on "Add MCP Server"
click on "Install from npm"
enter @harrybin/visuals-mcp
press enter / click "Install"

Using command line:

npm install -g @harrybin/visuals-mcp
visuals-mcp

GitHub Packages

Authenticate npm with GitHub Packages:

npm config set @harrybin:registry https://npm.pkg.github.com
npm config set //npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN

Install and run:

npm install -g @harrybin/visuals-mcp
visuals-mcp

Local Development

# Install dependencies
npm install

# Build the UI
npm run build

# Run the server
npm run serve

1. Configure MCP Server

For VS Code: This workspace includes MCP configuration in .vscode/settings.json.

To add globally, update your VS Code settings:

{
  "github.copilot.chat.mcpServers": {
    "visuals-mcp": {
			"type": "stdio",
			"command": "node",
			"args": [
				"dist/server.js"
			]
		}
  }
}

For Claude Desktop: See claude_desktop_config.json for example configuration.

@harrybin/visuals-mcp

Quick Install