{
  "markdown": "# MCP Visuals Server\n\nAn 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.\n\n### Quick Install\n\n[![Install with VS Code](https://img.shields.io/badge/install-VS%20Code-007ACC?style=for-the-badge&logo=visualstudiocode)](vscode:mcp/install?%7B%22type%22%3A%22stdio%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22%40harrybin%2Fvisuals-mcp%22%5D%7D)\n °°° [![Install with VS Code Insiders](https://img.shields.io/badge/install-VS%20Code%20Insiders-24bfa5?style=for-the-badge&logo=visualstudiocode)](vscode-insiders:mcp/install?%7B%22type%22%3A%22stdio%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22%40harrybin%2Fvisuals-mcp%22%5D%7D)\n\n## Features\n\n### Table Visualization\n\n- **Interactive Table Display**: Full-featured data table with TanStack Table v8\n- **Sorting**: Click column headers to sort ascending/descending\n- **Filtering**: Per-column text filters with apply button\n- **Pagination**: Customizable page sizes (5, 10, 20, 50, 100 rows)\n- **Column Visibility**: Toggle which columns are displayed\n- **Row Selection**: Select individual rows or all rows\n- **Export**: Copy as CSV/TSV or export to PDF\n- **Agent Integration**: Table state (selections, filters, sorting) automatically sent back to the LLM via `updateModelContext`\n- **Theme Integration**: Respects VS Code theme colors and fonts\n- **Responsive**: Works on different screen sizes\n- **Generic Data Support**: Accepts any column structure and data types\n\n### Chart Visualization\n\n- **Interactive Charts**: Render line, bar, area, pie, scatter, and composed charts\n- **Multiple Charts Per View**: Show several charts together in vertical, horizontal, or grid layouts\n- **Flexible Series Configuration**: Configure named series, custom colors, stacked bars/areas, and mixed composed charts\n- **Rich Chart Features**: Optional legends, tooltips, grid lines, and dual Y-axes\n- **Export Options**: Copy chart payloads as JSON or CSV directly from the UI\n- **Agent Awareness**: Active chart selection and hover state can be reported back to the host app\n- **Theme Integration**: Respects VS Code theme colors and fonts\n- **Responsive**: Adapts to narrow panels and wider layouts\n\n### Image Preview\n\n- **Rich Image Cards**: Display images with title, caption, and metadata\n- **Metadata Display**: Show filename, dimensions, and file size\n- **Flexible Sources**: Support URLs and data URIs\n- **Local File Support**: Automatically converts local file paths to data URIs\n- **Theme Integration**: Respects VS Code theme colors and fonts\n\n### Master-Detail View\n\n- **Flexible Layout**: Display a list of items with detailed content panel\n- **Multiple Content Types**: Detail panel supports tables, images, or custom text/HTML\n- **Reusable Components**: Leverages existing table and image visualizations\n- **Configurable Layout**: Choose horizontal (side-by-side) or vertical (stacked) orientation\n- **State Management**: Selection state automatically sent back to LLM\n- **Rich Master List**: Display items with icons, labels, and descriptions\n- **Theme Integration**: Consistent theming across all components\n\n### Tree View\n\n- **Hierarchical Data Display**: Interactive tree structure for nested data\n- **Expand/Collapse**: Click to expand or collapse nodes\n- **Node Selection**: Select individual nodes to highlight them\n- **Metadata Support**: Display optional metadata for each node\n- **Icons**: Add custom icons/emojis to nodes\n- **Bulk Operations**: Expand all or collapse all nodes at once\n- **Export Options**: Copy tree to clipboard, export as HTML, or save as image (PNG)\n- **Agent Integration**: Tree state (expanded nodes, selection) sent back to the LLM\n- **Theme Integration**: Respects VS Code theme colors and fonts\n- **Use Cases**: File systems, org charts, nested categories, JSON/XML structures\n\n### List Visualization\n\n- **Interactive Lists**: Display any type of list with rich formatting\n- **Drag-and-Drop Reordering**: Easily reorder items by dragging\n- **Checkboxes**: Optional checkboxes for task lists and selections\n- **Image Thumbnails**: Show images alongside list items\n- **Compact Mode**: Toggle between comfortable and compact layouts\n- **Export Options**: Copy as plain text, CSV, or JSON\n- **Individual Item Copy**: Quick copy button for each item\n- **Subtext Support**: Secondary text/description for each item\n- **Metadata**: Attach custom metadata to items\n- **Theme Integration**: Respects VS Code theme colors and fonts\n\n## Screenshots\n\n![Table Example](doc/table-example.png)\n\n*Interactive table with sorting, filtering, pagination, and row selection*\n\n![Chart Example](doc/screenshots/chart-grid.png)\n\n*Interactive chart dashboard with multiple chart types and grid layout*\n\n![Master-Detail Example](doc/master-detail-example.png)\n\n*Master-detail view for browsing collections with tables, images, or custom content*\n\n![List Example](doc/list-example.png)\n\n*Interactive list with drag-and-drop reordering, checkboxes, and image thumbnails*\n\n![Tree Example](doc/tree-example.png)\n\n*Interactive tree view with expand/collapse, node selection, and export options*\n\n## Installation\n\n### VSCode Extension (Easiest)\n\nInstall directly from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=harrybin.visuals-mcp):\n\n1. Open VS Code\n2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)\n3. Search for \"Visuals MCP\"\n4. Click Install\n\nThe extension will automatically register the MCP server with VS Code and GitHub Copilot Chat.\n\n### npmjs (Recommended for other MCP Clients)\n\nIn **VSCode** github Copilot Chat \n- click on the tools icon (Configure tools...) \n- click on \"Add MCP Server\"\n- click on \"Install from npm\"\n- enter `@harrybin/visuals-mcp` \n- press enter / click \"Install\"\n\nUsing command line:\n\n```bash\nnpm install -g @harrybin/visuals-mcp\nvisuals-mcp\n```\n\n\n### GitHub Packages\n\n1. Authenticate npm with GitHub Packages:\n\n```bash\nnpm config set @harrybin:registry https://npm.pkg.github.com\nnpm config set //npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN\n```\n\n2. Install and run:\n\n```bash\nnpm install -g @harrybin/visuals-mcp\nvisuals-mcp\n```\n\n### Local Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Build all UI bundles and the server\nnpm run build\n\n# Optional: rebuild only the chart UI bundle\nnpm run build:charts\n\n# Run the server\nnpm run serve\n```\n\n## Chart Tool\n\nUse `display_chart` to render one or more interactive charts in the MCP client.\n\nSupported chart types:\n\n- `line`\n- `bar`\n- `area`\n- `pie`\n- `scatter`\n- `composed`\n\n### Repository Metrics Dashboard Example\n\nGenerate fresh metrics first:\n\n```bash\nnpm run metrics:repo:write\n```\n\nThis writes a snapshot to `doc/repo-metrics.json`.\n\nThen render a dashboard that uses all chart types (`line`, `bar`, `area`, `pie`, `scatter`, `composed`):\n\n\n\nFor release-quality docs, always regenerate `doc/repo-metrics.json` right before updating README examples.\n\n\n### 1. Configure MCP Server\n\n**For VS Code:** This workspace includes MCP configuration in `.vscode/settings.json`.\n\nTo add globally, update your VS Code settings:\n\n```json\n{\n  \"github.copilot.chat.mcpServers\": {\n    \"visuals-mcp\": {\n\t\t\t\"type\": \"stdio\",\n\t\t\t\"command\": \"node\",\n\t\t\t\"args\": [\n\t\t\t\t\"dist/server.js\"\n\t\t\t]\n\t\t}\n  }\n}\n```\n\n**For Claude Desktop:** See `claude_desktop_config.json` for example configuration.\n\n\n## License\n\nMIT\n\n## Contributing\n\nContributions welcome! Please open an issue or PR.\n\n## Resources\n\n- [MCP Apps Documentation](https://modelcontextprotocol.github.io/ext-apps/api/)\n- [MCP Apps Examples](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples)\n- [TanStack Table Docs](https://tanstack.com/table/latest)\n- [Recharts Documentation](https://recharts.org/)\n- [VS Code MCP Guide](https://code.visualstudio.com/docs/copilot/guides/mcp-developer-guide)\n- [Changelog](CHANGELOG.md)\n",
  "bytes": 8105,
  "sha": "115d68eef0149bcc59b2cce4775f261ef4ba2b299247d7bcc9b434ef54edb343",
  "repo_slug": "harrybin/visuals-mcp",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_harrybin_visuals_mcp_d5486f62/readme"
}