Skip to content

Commit a547e35

Browse files
rsonghusterrsonghuster
committed
add quickchart
1 parent d52f8c0 commit a547e35

9 files changed

Lines changed: 564 additions & 6 deletions

File tree

‎README.md‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,20 @@ MCP 协议中有 STDIO 与 SSE 两种传输机制，大致如下:
2424

2525
## mcp-proxy + stdio 模版
2626

27-
- 高德地图: [start-mcp-amap-maps](./start-mcp-amap-maps/src/)
28-
- Chatppt: [start-mcp-chatppt](./start-mcp-chatppt/src/)
29-
- Fetch Webpage: [start-mcp-fetch](./start-mcp-fetch/src/)
30-
- Financial Datasets: [start-mcp-financial-datasets](./start-mcp-financial-datasets/src/)
3127
- GitHub: [start-mcp-github](./start-mcp-github/src)
3228
- GitLab: [start-mcp-gitlab](./start-mcp-gitlab/src)
33-
- OpenWeather: [start-mcp-openweather](./start-mcp-openweather/src/)
34-
- 百度地图(Nodejs版): [start-mcp-nodejs-baidu-map](./start-mcp-nodejs-baidu-map/src/)
29+
- Fetch: [start-mcp-fetch](./start-mcp-fetch/src/)
3530
- Time: [start-mcp-time](./start-mcp-time/src/)
3631
- brave-search: [start-mcp-brave-search](./start-mcp-brave-search/src/)
3732
- ever-art: [start-mcp-ever-art](./start-mcp-ever-art/src)
3833
- sequentialthinking: [start-mcp-sequentialthinking](./start-mcp-sequentialthinking/src)
34+
- everything: [start-mcp-everything](./start-mcp-everything/src)
35+
- 高德地图: [start-mcp-amap-maps](./start-mcp-amap-maps/src/)
36+
- Chatppt: [start-mcp-chatppt](./start-mcp-chatppt/src/)
37+
- OpenWeather: [start-mcp-openweather](./start-mcp-openweather/src/)
38+
- 百度地图(Nodejs版): [start-mcp-nodejs-baidu-map](./start-mcp-nodejs-baidu-map/src/)
39+
- Financial Datasets: [start-mcp-financial-datasets](./start-mcp-financial-datasets/src/)
40+
- quickchart: [start-mcp-quickchart](./start-mcp-quickchart/src/)
3941

4042
其中有 hello-world 示例:
4143

‎start-mcp-quickchart/README.md‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
2+
> 注：当前项目为 Serverless Devs 应用，由于应用中会存在需要初始化才可运行的变量（例如应用部署地区、函数名等等），所以**不推荐**直接 Clone 本仓库到本地进行部署或直接复制 s.yaml 使用，**强烈推荐**通过 `s init ${模版名称}` 的方法或应用中心进行初始化，详情可参考[部署 & 体验](#部署--体验) 。
3+
4+
# start-mcp-quickchart 帮助文档
5+
6+
<description>
7+
8+
quickchart-server MCP Server
9+
10+
</description>
11+
12+
13+
## 资源准备
14+
15+
使用该项目，您需要有开通以下服务并拥有对应权限：
16+
17+
<service>
18+
19+
20+
21+
| 服务/业务 | 权限 | 相关文档 |
22+
| --- | --- | --- |
23+
| 函数计算 | AliyunFCFullAccess | [帮助文档](https://help.aliyun.com/product/2508973.html) [计费文档](https://help.aliyun.com/document_detail/2512928.html) |
24+
25+
</service>
26+
27+
<remark>
28+
29+
30+
31+
</remark>
32+
33+
<disclaimers>
34+
35+
36+
37+
</disclaimers>
38+
39+
## 部署 & 体验
40+
41+
<appcenter>
42+
43+
- :fire: 通过 [云原生应用开发平台 CAP](https://cap.console.aliyun.com/template-detail?template=start-mcp-quickchart) ，[![Deploy with Severless Devs](https://img.alicdn.com/imgextra/i1/O1CN01w5RFbX1v45s8TIXPz_!!6000000006118-55-tps-95-28.svg)](https://cap.console.aliyun.com/template-detail?template=start-mcp-quickchart) 该应用。
44+
45+
</appcenter>
46+
<deploy>
47+
48+
49+
</deploy>
50+
51+
## 案例介绍
52+
53+
<appdetail id="flushContent">
54+
55+
# quickchart-server MCP Server
56+
57+
A Model Context Protocol server for generating charts using QuickChart.io
58+
59+
This is a TypeScript-based MCP server that provides chart generation capabilities. It allows you to create various types of charts through MCP tools.
60+
61+
## Overview
62+
63+
This server integrates with QuickChart.io's URL-based chart generation service to create chart images using Chart.js configurations. Users can generate various types of charts by providing data and styling parameters, which the server converts into chart URLs or downloadable images.
64+
65+
## Features
66+
67+
### Tools
68+
- `generate_chart` - Generate a chart URL using QuickChart.io
69+
- Supports multiple chart types: bar, line, pie, doughnut, radar, polarArea, scatter, bubble, radialGauge, speedometer
70+
- Customizable with labels, datasets, colors, and additional options
71+
- Returns a URL to the generated chart
72+
73+
- `download_chart` - Download a chart image to a local file
74+
- Takes chart configuration and output path as parameters
75+
- Saves the chart image to the specified location
76+
![image](https://github.com/user-attachments/assets/c6864098-dd9a-48ff-b53a-d897427748f7)
77+
78+
![image](https://github.com/user-attachments/assets/c008adbb-55ec-4432-bfe7-5644a0fccfae)
79+
80+
81+
## Supported Chart Types
82+
- Bar charts: For comparing values across categories
83+
- Line charts: For showing trends over time
84+
- Pie charts: For displaying proportional data
85+
- Doughnut charts: Similar to pie charts with a hollow center
86+
- Radar charts: For showing multivariate data
87+
- Polar Area charts: For displaying proportional data with fixed-angle segments
88+
- Scatter plots: For showing data point distributions
89+
- Bubble charts: For three-dimensional data visualization
90+
- Radial Gauge: For displaying single values within a range
91+
- Speedometer: For speedometer-style value display
92+
93+
## Usage
94+
95+
### Chart Configuration
96+
The server uses Chart.js configuration format. Here's a basic example:
97+
98+
```javascript
99+
{
100+
"type": "bar",
101+
"data": {
102+
"labels": ["January", "February", "March"],
103+
"datasets": [{
104+
"label": "Sales",
105+
"data": [65, 59, 80],
106+
"backgroundColor": "rgb(75, 192, 192)"
107+
}]
108+
},
109+
"options": {
110+
"title": {
111+
"display": true,
112+
"text": "Monthly Sales"
113+
}
114+
}
115+
}
116+
```
117+
118+
### URL Generation
119+
The server converts your configuration into a QuickChart URL:
120+
```
121+
https://quickchart.io/chart?c={...encoded configuration...}
122+
```
123+
124+
## Development
125+
126+
Install dependencies:
127+
```bash
128+
npm install
129+
```
130+
131+
Build the server:
132+
```bash
133+
npm run build
134+
```
135+
136+
## Installation
137+
138+
### Installing
139+
140+
```bash
141+
npm install @gongrzhe/quickchart-mcp-server
142+
```
143+
144+
### Installing via Smithery
145+
146+
To install QuickChart Server for Claude Desktop automatically via [Smithery](https://smithery.ai/server/@GongRzhe/Quickchart-MCP-Server):
147+
148+
```bash
149+
npx -y @smithery/cli install @gongrzhe/quickchart-mcp-server --client claude
150+
```
151+
152+
To use with Claude Desktop, add the server config:
153+
154+
On MacOS: `~/Library/Application Support/Claude/claude_desktop_config.json`
155+
On Windows: `%APPDATA%/Claude/claude_desktop_config.json`
156+
157+
```json
158+
{
159+
"mcpServers": {
160+
"quickchart-server": {
161+
"command": "node",
162+
"args": ["/path/to/quickchart-server/build/index.js"]
163+
}
164+
}
165+
}
166+
```
167+
168+
or
169+
170+
```json
171+
{
172+
"mcpServers": {
173+
"quickchart-server": {
174+
"command": "npx",
175+
"args": [
176+
"-y",
177+
"@gongrzhe/quickchart-mcp-server"
178+
]
179+
}
180+
}
181+
}
182+
```
183+
184+
185+
## Documentation References
186+
- [QuickChart Documentation](https://quickchart.io/documentation/)
187+
- [Chart Types Reference](https://quickchart.io/documentation/chart-types/)
188+
189+
## 📜 License
190+
191+
This project is licensed under the MIT License.
192+
193+
</appdetail>
194+
195+
196+
197+
198+
199+
200+
201+
## 使用流程
202+
203+
<usedetail id="flushContent">
204+
205+
部署完成拿到 URL 后，准备好支持 SSE 的 MCP Client，通过 SSETransport 进行连接。
206+
207+
</usedetail>
208+
209+
210+
211+
212+
213+
214+
215+
216+

‎start-mcp-quickchart/hook/index.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
async function preInit(inputObj) {
2+
3+
}
4+
5+
async function postInit(inputObj) {
6+
7+
}
8+
9+
module.exports = {
10+
postInit,
11+
preInit
12+
}

‎start-mcp-quickchart/publish.yaml‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
Edition: 3.0.0
2+
Type: Project
3+
Name: start-mcp-quickchart
4+
Version: 0.0.1
5+
Provider:
6+
- 阿里云 # 取值内容参考：https://api.devsapp.cn/v3/common/args.html
7+
Description: quickchart-server MCP Server
8+
HomePage: https://github.com/GongRzhe/Quickchart-MCP-Server
9+
Tags: #标签详情
10+
- MCP
11+
- Serverless Devs
12+
Category: Others # 取值内容参考：https://api.devsapp.cn/v3/common/args.html
13+
Service: # 使用的服务
14+
函数计算: # 取值内容参考：https://api.devsapp.cn/v3/common/args.html
15+
Authorities: #权限描述
16+
- AliyunFCFullAccess # 所需要的权限，例如AliyunFCFullAccess
17+
Organization: 阿里云函数计算（FC） # 所属组织
18+
Effective: Public # 是否公开，取值：Public，Private，Organization
19+
Parameters:
20+
type: object
21+
additionalProperties: false # 不允许增加其他属性
22+
required: # 必填项
23+
- region
24+
- functionName
25+
properties:
26+
region:
27+
title: 地域
28+
type: string
29+
default: cn-hangzhou
30+
description: 创建应用所在的地区
31+
enum:
32+
- cn-beijing
33+
- cn-hangzhou
34+
- cn-shanghai
35+
- cn-shenzhen
36+
- ap-southeast-1
37+
functionName:
38+
title: 函数名
39+
type: string
40+
default: mcp-server-${default-suffix}
41+
pattern: "^[a-zA-Z_][a-zA-Z0-9-_]{0,127}$"
42+
description: 应用的函数名称, 只能包含字母、数字、下划线和中划线。不能以数字、中划线开头。长度在 1-128 之间

‎start-mcp-quickchart/src/build.yaml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
start-mcp-server:
2+
default:
3+
languages:
4+
- nodejs20
5+
cache:
6+
paths:
7+
- "~/.npm"
8+
steps:
9+
- run: npm install
10+
path: ./code

‎start-mcp-quickchart/src/code/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"dependencies": {
3+
"@gongrzhe/quickchart-mcp-server": "^1.0.3"
4+
}
5+
}

0 commit comments

Comments
 (0)