RELATED 01
MCP Server Chart
OFFICIAL SERVERTurns data into chart images, diagrams and maps through AntV's rendering service
4.4kGitHub stars
3.6k/wknpm downloads
87popularity score
Flint Chart
Compiles, checks and renders Flint chart specs into PNG, SVG or Vega-Lite, ECharts and Chart.js JSON
Official · Microsoft TypeScript Remote (hosted) · Streamable HTTPLocal · stdio Data and analyticsDeveloper tools
69 popularity score ★ 4.5k ↓ 1.6k/wk
Connect your client
Remote (hosted)
Add in one click
Opens the app, which asks before it adds the server.
Or add it by command or config
Claude CodeTerminal
claude mcp add --transport http flint-chart https://flint.data-formulator.ai/mcpClaude (desktop and web)Settings → Connectors → Add custom connector
https://flint.data-formulator.ai/mcpChatGPTSettings → Apps → Advanced → Developer mode, then Create app
https://flint.data-formulator.ai/mcpCursor~/.cursor/mcp.json
{
"mcpServers": {
"flint-chart": {
"url": "https://flint.data-formulator.ai/mcp"
}
}
}VS Code.vscode/mcp.json
{
"servers": {
"flint-chart": {
"type": "http",
"url": "https://flint.data-formulator.ai/mcp"
}
}
}Codex~/.codex/config.toml
[mcp_servers.flint-chart]
url = "https://flint.data-formulator.ai/mcp"Gemini CLITerminal
gemini mcp add --scope user --transport http flint-chart https://flint.data-formulator.ai/mcpLocal (npm)
Add in one click
Opens the app, which asks before it adds the server.
Or add it by command or config
Claude CodeTerminal
claude mcp add flint-chart -- npx -y flint-chart-mcpClaude Desktopclaude_desktop_config.json
{
"mcpServers": {
"flint-chart": {
"command": "npx",
"args": [
"-y",
"flint-chart-mcp"
]
}
}
}Cursor~/.cursor/mcp.json
{
"mcpServers": {
"flint-chart": {
"command": "npx",
"args": [
"-y",
"flint-chart-mcp"
]
}
}
}VS Code.vscode/mcp.json
{
"servers": {
"flint-chart": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"flint-chart-mcp"
]
}
}
}Codex~/.codex/config.toml
[mcp_servers.flint-chart]
command = "npx"
args = ["-y", "flint-chart-mcp"]Gemini CLITerminal
gemini mcp add --scope user flint-chart npx -- -y flint-chart-mcpSettings 2
FLINT_MCP_BACKENDS |
Optional: Comma-separated subset of vegalite,echarts,chartjs to expose; overrides --backends. |
|---|---|
FLINT_MCP_DISABLE_FILE_REFERENCE |
Optional: Rejects local data.url file references so only inline data.values are accepted; same as --disable-file-reference. |
What it does
flint-chart-mcp is the MCP server for Flint, Microsoft's chart description format. An assistant writes one compact Flint spec (a ChartAssemblyInput) with the data, and the server turns it into a finished chart: a PNG or SVG image, a native spec for Vega-Lite, ECharts or Chart.js, or an interactive chart view inside clients that support MCP Apps, where the user can change bindings, chart options and theme presets by hand.
Instead of one tool per chart type it keeps six tools around a single schema that covers about 40 chart types. It also ships the Flint authoring guide and a theme guide as resources and prompts (flint://agent-skill, author_flint_chart, author_flint_theme), so the assistant can load the spec rules before calling the tools. Visual theme presets such as an Economist style can be listed and extended for brand colours.
Rendering happens in the server process on the user's machine. Data is passed inline as rows or read from a local JSON, CSV or TSV file. Microsoft also runs a hosted copy at https://flint.data-formulator.ai/mcp for clients that connect to remote HTTP servers; the project recommends the local server for large datasets.
What it needs
| To run it yourself | Node.js 18+ |
|---|
Node.js with npx (the repository states Node 18 or later) and an MCP client that speaks stdio, such as Claude Desktop, Cursor or VS Code. The hosted endpoint needs only a client that can add a remote HTTP server. No account or key.
Limits
Only the stdio transport is supported locally. Rendering backends are Vega-Lite, ECharts and Chart.js; the Flint library's Plotly and Excel outputs are not among the server's backends. The Chart.js backend renders PNG only, with no SVG. Remote data URLs are never fetched: data must be inline or a local file. The interactive chart view only appears in clients that support MCP Apps. The --data-root and --data-roots options are deprecated and ignored.
Who it suits
Suits developers and analysts who want an assistant to turn data from the conversation or a local file into a styled chart image or a spec they can drop into a Vega-Lite, ECharts or Chart.js project, without sending data to a render service. It reads only and needs no account, so it is low-friction to add. Pick something else if you need charts from remote data sources fetched by the server itself, Plotly or Excel output through MCP, or a non-stdio local transport.
Tools 6
render_chart- Renders a Flint spec with a chosen backend to an inline PNG image or SVG text.
compile_chart- Turns a Flint spec into the backend's own chart JSON, with warnings.
validate_chart- Checks a spec against a backend and reports errors, warnings and computed size.
list_chart_types- Lists supported chart types and their encoding channels per backend.
list_themes- Lists the bundled visual themes and gives guidance for a chosen preset.
create_chart_view- Opens an interactive chart view with live preview and a panel for adjusting the chart.