This project shows how to implement an MCP (Model Context Protocol) server of Apache ECharts.
The basic workflow is that it gets chart type, data and other parameters from an LLM, and returns the cloud image URL of the generated ECharts chart.
Supported ECharts series types: 'bar', 'line', 'pie', 'scatter', 'funnel', 'tree', 'treemap', 'sunburst'.
npm install
Create an .env file. See .env.example for reference. You need to have the access to a baidubce/bce-sdk-js account to store the images on the cloud.
# Run the MCP server npm run dev # Run the inspector in another terminal npm run inspect
By default, it uses baidubce/bce-sdk-js to store the generated image and return the URL of the image on the cloud. If you wish to use other Cloud storage, change the implemenation in src/storage.js.
See registerTheme and registerFont comments in src/chart.js.
inputSchema in src/index.jsdata in src/chart.jsYou are welcomed to make a pull request.
To make an MCP server of Apache ECharts, there are 3 common ways to do:
The advantage of Approach 1 is that is has the potential of making all kinds of charts that ECharts supports. But it may not be stable, especially for less frequently used chart types.
Approach 2 gives the freedom to change chart themes from prompt. For example, you may ask the LLM to generate a chart with red bars of data .... But this approach requires a lot of parameters in order to support so many ECharts options. And it degenerates to approach 1 as the number of parameters grows.
Approach 3 asks LLM to provide minimal parameters like series type, data, seriesName, title, and axisName. The chart theme is defined in the app so that only the developer of this app, rather than users can change the theme. We believe this is the best way to provide stable results and so this is the approach we take in this project.