MCP Visuals Server

The MCP Visuals Server delivers interactive visualizations for AI agents, including tables, image previews, master-detail views, tree structures, and customizable lists. It enables you to explore data visually, interact with it, and feed selections and filters back to your AI model for a richer, context-aware conversation.

How to use

You can connect to this MCP server from your preferred MCP client, such as a VS Code Copilot chat session or other compatible interfaces. Start the server, then open your MCP client and choose the visuals_mcp server to establish a live session. Use the visual components to explore data, apply filters, sort columns, and interact with items. Any changes you make in the table, tree, or list views can be synchronized back to the AI model to influence its context and decisions.

Key interactions to expect across components include: manipulating table data with sorting, filtering, pagination, and column visibility; browsing hierarchical structures with the tree view; viewing detail panels in master-detail layouts; reordering lists via drag-and-drop; and previewing images with metadata. Use these visuals to convey information to the AI and refine its understanding of your data.

How to install

Prerequisites: ensure you have Node.js and npm installed on your system.

Install the MCP server package globally so you can run the server from any terminal.

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

For local development and testing of the UI, you can build and run the server from the repository you cloned or downloaded:

# Install dependencies
npm install

# Build the UI
npm run build

# Run the server
npm run serve

Configure MCP server in your client

To connect the server to a client like VS Code Copilot or Claude Desktop, configure the MCP server entry with the appropriate runtime. The following example shows the inline configuration that uses a local runtime (stdio) with Node.js to run the server from its built distribution.

{
  "type": "stdio",
  "name": "visuals_mcp",
  "command": "node",
  "args": [
    "dist/server.js"
  ]
}

Available tools

Table Visualization

Displays interactive data tables with sorting, filtering, pagination, column visibility, row selection, and export options.

Image Preview

Renders rich image cards with metadata, supports URLs and data URIs, and adapts to theme colors.

Master-Detail View

Shows a list of items with a detail panel that can include tables, images, or custom content.

Tree View

Presents hierarchical data with expand/collapse, node selection, metadata, and export options.

List Visualization

Renders interactive lists with drag-and-drop reordering, checkboxes, thumbnails, and multiple export formats.