Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Quick Chart MCP Server create a bar chart showing monthly sales for Q1"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
A Model Context Protocol (MCP) server that provides chart tools, allowing it to interact with the quick chart through a standardized interface. This implementation is based on the chart definition and enables users can open quick chart pages seamlessly.
This MCP server tools:
Interact with Quick Chart
The server implements the Model Context Protocol specification to standardize chart interactions for AI agents.
Related MCP server: QuickChart MCP Server
Node.js (v16 or higher)
pnpm (recommended), npm, or yarn
To install quick-chart-mcp for Claude Desktop automatically via Smithery:
npx -y @smithery/cli install @datafe/quick-chart-mcp --client claude# Install globally
npm install -g quick-chart-mcp
# Or install locally in your project
npm install quick-chart-mcpClone this repository:
git clone https://github.com/datafe/quick-chart-mcp
cd quick-chart-mcpInstall dependencies (pnpm is recommended, npm is supported):
pnpm installBuild the project:
pnpm run buildDevelopment the project (by @modelcontextprotocol/inspector):
pnpm run dev{
"mcpServers": {
"quick-chart-mcp": {
"autoApprove": [],
"disabled": false,
"timeout": 300,
"command": "npx",
"args": [
"quick-chart-mcp@1.0.13"
],
"transportType": "stdio"
}
}
}Create a .env file with your credentials:
# Quick Chart Configuration
NODE_ENV=optional_development_or_product
QUICK_CHART_DRAW_URL=optional_quick_chart_draw_url
NEED_INSTALL_QUICK_CHART=optional_true_or_falsequick-chart-mcp/
├── src/
│ ├── index.ts # Main entry point
├── package.json
└── tsconfig.jsonThe MCP server provides the following Quick Chart tools:
GetChartImgLink - Retrieve chart image link by parameters.
InstallQuickChart - Install quick chart service locally.
Use environment variables for sensitive information
Regularly monitor and audit AI agent activities
If you encounter issues:
Verify the build was successful
image APIs.
Contributions are welcome! Please feel free to submit a Pull Request.
Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request
This project is licensed under the MIT License.
To draw chart and get chart image link by parameters, and parameter grammar follows Quick Chart API (quickchart.io).
| Name | Required | Description | Default |
|---|---|---|---|
| json | No | quick chart api's (quickchart.io) parameters and format is JSON object. The object does not include any functions, only values. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description must fully disclose behavioral traits. It mentions that parameters follow Quick Chart API, which hints at external behavior, but fails to describe critical aspects like whether this is a read/write operation, authentication needs, rate limits, error handling, or what the output (image link) entails. This leaves significant gaps in transparency for a tool that generates content.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise and front-loaded in a single sentence, efficiently stating the tool's purpose and parameter reference. However, it could be slightly improved by structuring key details (e.g., separating usage notes) to enhance clarity without adding unnecessary length.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (generating chart images via an external API) and lack of annotations or output schema, the description is incomplete. It does not explain the return value (e.g., format of the image link), error conditions, or behavioral dependencies, leaving the agent with insufficient context to use the tool effectively.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage, with the parameter 'json' documented as using Quick Chart API format. The description adds marginal value by reiterating this and noting the JSON object excludes functions, but does not provide additional syntax, examples, or constraints beyond what the schema implies. This meets the baseline for high schema coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'draw chart and get chart image link by parameters'. It specifies the verb ('draw chart and get chart image link') and resource ('chart image link'), making the function understandable. However, with no sibling tools mentioned, it cannot demonstrate differentiation from alternatives, which prevents a perfect score.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides minimal guidance on when to use this tool, only implying usage through the phrase 'by parameters' and referencing Quick Chart API. It lacks explicit instructions on when to use it versus alternatives, prerequisites, or exclusions, resulting in inadequate guidance for an agent.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
v1.0.0GetChartImgLinkWith only one tool, there is no possibility of ambiguity or overlap between tools. The tool's purpose is clearly defined as generating chart image links using Quick Chart API parameters.
Since there is only one tool, naming consistency is inherently perfect. The tool name 'GetChartImgLink' follows a clear verb_noun pattern, and there are no other tools to compare or create inconsistency with.
A single tool is too few for a chart generation server, as it lacks basic operations like creating, updating, or deleting charts, or handling different chart types or configurations. This minimal set limits functionality and forces agents to rely solely on this one tool for all chart-related tasks.
The tool set is severely incomplete for a chart generation domain. It only provides a way to get chart image links, missing essential operations such as creating, listing, updating, or deleting charts, and lacks support for managing chart templates or configurations, which are typical in such systems.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
Renders interactive Chart.js charts and dashboards inline in AI conversations.
Renders interactive Chart.js charts and dashboards inline in AI conversations. Supports bar, line, area, pie, doughnut, scatter, and radar charts with multi-chart dashboard grids.
Create, inspect, manage, and render charts and data visualizations as SVG/PNG or interactive embeds.
Generate images, GIFs, and PDFs from HTML, URLs, or templates — from your AI agent.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/datafe/quick-chart-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
