Visuals MCP

🚀 MCP Visuals Server

An MCP (Model Context Protocol) server that offers interactive visualizations for AI agents. It can display data in rich, interactive formats, including tables, image previews, master - detail views, tree views, and customizable lists.

🚀 Quick Start

You can quickly install the MCP Visuals Server using the following buttons:

✨ Features

Table Visualization

• Interactive Table Display: A full - featured data table powered by TanStack Table v8.
• Sorting: Click on column headers to sort data in ascending or descending order.
• Filtering: Use per - column text filters with an apply button.
• Pagination: Customize page sizes (5, 10, 20, 50, 100 rows).
• Column Visibility: Toggle the display of columns.
• Row Selection: Select individual rows or all rows.
• Export: Copy data as CSV/TSV or export it to PDF.
• Agent Integration: The table state (selections, filters, sorting) is automatically sent back to the LLM via updateModelContext.
• Theme Integration: It respects VS Code theme colors and fonts.
• Responsive: Works well on different screen sizes.
• Generic Data Support: Accepts any column structure and data types.

Image Preview

• Rich Image Cards: Display images with titles, captions, 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 a detailed content panel.
• Multiple Content Types: The detail panel supports tables, images, or custom text/HTML.
• Reusable Components: Leverages existing table and image visualizations.
• Configurable Layout: Choose between horizontal (side - by - side) or vertical (stacked) orientation.
• State Management: The selection state is automatically sent back to the LLM.
• Rich Master List: Display items with icons, labels, and descriptions.
• Theme Integration: Ensures consistent theming across all components.

Tree View

• Hierarchical Data Display: An 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 the tree to the clipboard, export it as HTML, or save it as an image (PNG).
• Agent Integration: The tree state (expanded nodes, selection) is sent back to the LLM.
• Theme Integration: Respects VS Code theme colors and fonts.
• Use Cases: Ideal for 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: A 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

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

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

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

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

📦 Installation

VSCode Extension (Easiest)

Install directly from the VS Code Marketplace:

1. Open VS Code.
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X).
3. Search for "Visuals MCP".
4. Click Install.

The extension will automatically register the MCP server with VS Code and GitHub Copilot Chat.

npmjs (Recommended for other MCP Clients)

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 the command line:

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

GitHub Packages

1. 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

2. 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.

📄 License

MIT

🤝 Contributing

Contributions are welcome! Please open an issue or PR.

📚 Resources

• MCP Apps Documentation
• MCP Apps Examples
• TanStack Table Docs
• VS Code MCP Guide