Visuals MCP — Claude Code MCP server: features and setup
Visuals MCP turns agent data into interactive tables, charts, trees, and lists. Use it to inspect collections or select items inside an MCP client.
claude mcp add visuals-mcp -- npx -y @harrybin/visuals-mcpWhat Visuals MCP 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.
What it helps with
- 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 for the agent
- 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.
How to install Visuals MCP
Platform CLI
claude mcp add visuals-mcp -- npx -y @harrybin/visuals-mcpPlatform CLI
codex mcp add visuals-mcp -- npx -y @harrybin/visuals-mcpConfig file
{
"mcpServers": {
"visuals-mcp": {
"command": "npx",
"args": [
"-y",
"@harrybin/visuals-mcp"
]
}
}
}Config file
{
"servers": {
"visuals-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@harrybin/visuals-mcp"
]
}
}
}Platform CLI
gemini mcp add visuals-mcp npx -y @harrybin/visuals-mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Visuals MCP
How do I install Visuals MCP in Claude Code?
Run claude mcp add visuals-mcp -- npx -y @harrybin/visuals-mcp. This registers visuals-mcp using npx.
What does Visuals MCP do?
It provides interactive data views in an MCP client, including tables, charts, image previews, trees, lists, and master-detail panels. Some views can report selection or filter state back to the model.
Which platforms support Visuals MCP?
It is listed for Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, and Gemini CLI.
