Chart Builder

March 24, 2026 · View on GitHub

Built with mcp-use   mcp-use stars

Interactive data visualization MCP App powered by Apache ECharts. The model generates charts (bar, line, pie, scatter, radar, and more) that render live inside the conversation with streaming support.

Chart Builder Demo

Try it now

Connect to the hosted instance:

https://yellow-shadow-21833.run.mcp-use.com/mcp

Or open the Inspector to test it interactively.

Setup on ChatGPT

  1. Open Settings > Apps and Connectors > Advanced Settings and enable Developer Mode
  2. Go to Connectors > Create, name it "Chart Builder", paste the URL above
  3. In a new chat, click + > More and select the Chart Builder connector

Setup on Claude

  1. Open Settings > Connectors > Add custom connector
  2. Paste the URL above and save
  3. The Chart Builder tools will be available in new conversations

Features

  • Streaming props — charts render progressively as the model generates the ECharts config
  • 10+ chart types — bar, line, pie, scatter, radar, heatmap, treemap, sunburst, gauge, funnel
  • Theme support — light and dark mode
  • Fullscreen mode — expand charts for immersive viewing

Tools

ToolDescription
create-chartCreate an interactive chart from a title, chart type, and ECharts option object

Available Widgets

WidgetPreview
chart-display

Local development

git clone https://github.com/mcp-use/mcp-chart-builder.git
cd mcp-chart-builder
npm install
npm run dev

The server starts at http://localhost:3000/mcp with the Inspector at http://localhost:3000/inspector.

Deploy

npx mcp-use deploy

Built with

License

MIT