Vchart

You set up this MCP server to let AI assistants generate interactive charts using the VisActor VChart library. It runs locally as a stdio-based MCP service that you can talk to from AI editors and clients, enabling programmatic chart generation and rendering in multiple formats.

How to use

You run the MCP server locally or in a desktop environment and connect your MCP client or AI editor to it. The server exposes chart-generation capabilities such as Cartesian, polar, hierarchical, dual-axis, scatter, Sankey, heatmap, and more. You can request charts in image, spec, or HTML formats and tailor axis types, titles, grid visibility, colors, and layout through the available parameters. In practice, you’ll ask your AI assistant to generate a chart by specifying the chart type, data source, and fields, and the assistant will invoke the corresponding generate_*_chart tool with your parameters. You can also run the server with different transports (SSE or streamable) or via stdio for local editor integrations.

To start using the server, first install the MCP server tool globally, then launch it in a transport mode that suits your workflow. You can choose SSE for streaming updates or streamable for compact payloads. The server listens on a local port and exposes endpoints for the chosen transport.

How to install

Prerequisites: Ensure you have Node.js installed and that it meets the minimum version requirement for this MCP server setup.

Install the MCP server globally and start it with the desired transport.

npm install -g @visactor/vchart-mcp-server

mcp-server-chart --transport sse

# Or use the alternative transport
# mcp-server-chart --transport streamable

# Access endpoints (example):
# SSE: http://localhost:3001/sse
# Streamable: http://localhost:3001/streamable

# If you prefer the stdio workflow (in editors that support stdio MCP), you can invoke the server as a local process via the editor-specific config.

Additional configuration and notes

Environment variables shown here influence deployment and image generation. If you deploy privately you can point the image generation requests to your own server by setting VIMD_IMAGE_SERVER.

{
  "mcpServers": {
    "vchart-mcp-server": {
      "command": "npx",
      "args": ["-y", "@visactor/vchart-mcp-server"]
    }
  }
}

# Private deployment example with a custom image server
{
  "mcpServers": {
    "vchart-mcp-server": {
      "command": "npx",
      "args": ["-y", "@visactor/vchart-mcp-server"],
      "env": {
        "VIMD_IMAGE_SERVER": "<YOUR_VIS_REQUEST_SERVER>"
      }
    }
  }
}

Environment variables

VIMD_IMAGE_SERVER defines the custom image generation server URL used when producing image or HTML outputs. If you don’t set it, a default image server is used.

Example usage in AI conversations

Ask your AI assistant to generate a specific chart by naming the chart type, data fields, and output format. The assistant will map your request to the appropriate generate_*_chart tool and pass the required parameters.

Example prompts you can use in conversations include asking for a Cartesian chart, a dual-axis chart, a pie/radar combination, a Sankey flow, or a heatmap with defined axes and fields. The assistant will then respond with the exact tool invocation parameters to render the chart in the requested format.

Development notes

Key commands for development and testing are documented in the practical setup above. When you modify chart tools, you can test generation locally and verify outputs in both image and HTML formats.

Security and private deployment considerations

If you operate in a private environment, point the image generation service to your own server by setting the VIMD_IMAGE_SERVER environment variable. Keep access restricted to authorized clients and editors to prevent unauthorized chart generation.

Troubleshooting tips

Notes on available chart tools

The server provides a collection of tools to generate diverse chart types. These include: generate_cartesian_chart, generate_polar_chart, generate_hierarchical_chart, generate_progress_chart, generate_wordcloud_venn, generate_range_column_chart, generate_dual_axis_chart, generate_scatter_chart, generate_sankey_chart, generate_heatmap_chart.

Tools and capabilities

// Tools available in the MCP server
// These are invoked by the AI assistant with appropriate dataTable and field names
//  - generate_cartesian_chart
//  - generate_polar_chart
//  - generate_hierarchical_chart
//  - generate_progress_chart
//  - generate_wordcloud_venn
//  - generate_range_column_chart
//  - generate_dual_axis_chart
//  - generate_scatter_chart
//  - generate_sankey_chart
//  - generate_heatmap_chart

License

MIT License.

Available tools

generate_cartesian_chart

Generates Cartesian coordinate system charts such as area, bar, line, waterfall, funnel, and animated ranking bar charts. Requires a dataTable, chartType, xField, and yField; supports optional grouping, axes, and layout options.

generate_polar_chart

Generates polar coordinate charts including radar, rose, and pie charts. Requires a dataTable, chartType, categoryField, and valueField; supports optional color mapping and axis configuration.

generate_hierarchical_chart

Creates hierarchical visuals such as treemap, circle packing, and sunburst. Requires a dataTable, chartType, colorField, and valueField to define structure and coloring.

generate_progress_chart

Produces progress indicators like linear and circular progress, gauges, and liquid charts. Requires dataTable, chartType, valueField, and optionally colorField.

generate_wordcloud_venn

Generates word clouds or Venn diagrams to display keyword frequencies or set overlaps. Requires dataTable, chartType, colorField, and valueField (when chartType is venn).

generate_range_column_chart

Creates horizontal range bar charts suitable for displaying ranges and comparisons. Requires dataTable, xField, yField (array for two metrics), and optional axis settings.

generate_dual_axis_chart

Combines two Y axes to compare two metrics with different units. Requires dataTable, xField, yField (pair of fields), and optional axis and stacking options.

generate_scatter_chart

Shows relationships between two variables to reveal patterns and outliers. Requires dataTable, xField, yField, with optional color and size mappings.

generate_sankey_chart

Generates Sankey diagrams illustrating flows between sources and targets. Requires dataTable, sourceField, targetField, and valueField.

generate_heatmap_chart

Produces heatmaps to visualize data density and distribution. Requires dataTable, xField, yField, and sizeField with optional axis configurations.