Get the FREE Ultimate OpenClaw Setup Guide →

vchart

A Model Context Protocol (MCP) server for the @visactor/vchart that enables AI assistants to generate interactive charts and visualizations.

Installation
Run this command in your terminal to add the MCP server to Claude Code.
Run in terminal:
Command
claude mcp add --transport stdio visactor-vchart-mcp-server npx -y @visactor/vchart-mcp-server

How to use

The vchart MCP server exposes a set of chart-generation capabilities for the VisActor VChart library. It enables AI agents to request creation of interactive charts by invoking a collection of generation tools such as 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, and generate_heatmap_chart. Each tool accepts a data object describing the dataset and chart configuration, along with common parameters like output format, width, height, title, and theme. The server responds with a chart specification (spec), an image, or an interactive HTML representation depending on the requested output format. This makes it straightforward to integrate chart generation into AI-assisted workflows, dashboards, or automated report generators.

To use the server, start it in your environment (for example via npx as configured in the mcp_config) and send requests to generate charts by specifying the desired tool and parameters. For example, request a Cartesian chart with data and a particular chartType, then render the returned spec or image in your UI or workflow. The server supports common parameters such as width, height, title, and colors, allowing you to tailor visuals to your application’s style. When building AI conversations, you can leverage the generate_cartesian_chart tool to produce area, bar, line, or funnel charts, or switch to generate_sankey_chart for flow diagrams, all while controlling visual attributes like color palettes and axis labels through the provided fields.

How to install

Prerequisites:\n- Node.js (LTS) and npm installed on your system. You may verify with node -v and npm -v.\n- Basic knowledge of your environment where you plan to run MCP servers (Linux/macOS/Windows).\n\nInstallation steps:\n1) Install the MCP server package from npm (recommended via npm install or using npx as configured):\n\nOption A: Local install (recommended for development):\nbash\nnpm install -D @visactor/vchart-mcp-server\n\nOption B: Global install (quick start):\nbash\nnpm install -g @visactor/vchart-mcp-server\n\n2) Run the MCP server (example using npx as per the configuration):\nbash\nnpx -y @visactor/vchart-mcp-server\n\n3) (Optional) Verify the server is running and listening on the expected port and update any client configuration accordingly.\n4) If you prefer a containerized approach, you can build/run a Docker image corresponding to this package according to your environment, then configure the mcpServers entry to point to the container endpoint.\n\nNotes:\n- If you install locally, you may also start the server via a script defined in the package.json of @visactor/vchart-mcp-server.\n- The README provides additional usage examples and CLI options for SSE/Streamable transports and environment-variable-driven configuration.

Additional notes

Environment variables and configuration tips:\n- If the MCP server supports environment-based configuration (e.g., port, host, transport options), set them before starting the server and ensure they are reflected in the client requests.\n- Common environment variables to consider: MCP_PORT, MCP_HOST, TRANSPORT (for SSE/Streamable), and any API keys required by the underlying chart library.\n- When integrating with AI editors or assistants, ensure the prompt tooling correctly maps the tool names (e.g., generate_cartesian_chart) to the corresponding MCP server endpoints.\n- If you encounter issues with chart rendering, verify that the required fonts, assets, or browser capabilities are available in the runtime environment.\n- For debugging, use verbose logging or a development mode (if provided by the package) to inspect request payloads and server responses.

Related MCP Servers

Sponsor this space

Reach thousands of developers