Chart MCP Server

MCP सर्वर Chart

AntV का उपयोग करके चार्ट बनाने के लिए एक मॉडल संदर्भ प्रोटोकॉल सर्वर। हम इस mcp सर्वर का उपयोग चार्ट निर्माण और डेटा विश्लेषण के लिए कर सकते हैं।

यह एक TypeScript-आधारित MCP सर्वर है जो चार्ट निर्माण क्षमताएँ प्रदान करता है। यह आपको MCP उपकरणों के माध्यम से विभिन्न प्रकार के चार्ट बनाने की अनुमति देता है। आप इसका उपयोग Dify में भी कर सकते हैं।

📋 विषय-सूची

• ✨ विशेषताएँ
• 🤖 उपयोग
• 🎨 कौशल उपयोग
• 🚰 SSE या स्ट्रीमेबल ट्रांसपोर्ट के साथ चलाएँ
• 🎮 CLI विकल्प
• ⚙️ पर्यावरण चर
  • VIS_REQUEST_SERVER
  • SERVICE_ID
  • DISABLED_TOOLS
• 📠 निजी परिनियोजन
• 🗺️ रिकॉर्ड बनाएँ
• 🎛️ उपकरण फ़िल्टरिंग
• 🔨 विकास
• 📄 लाइसेंस

✨ विशेषताएँ

अब 26+ चार्ट समर्थित हैं।

1. generate_area_chart: एक area चार्ट बनाएँ, जिसका उपयोग एक सतत स्वतंत्र चर के अंतर्गत डेटा की प्रवृत्ति प्रदर्शित करने के लिए किया जाता है, जिससे समग्र डेटा प्रवृत्तियों का अवलोकन किया जा सके।
2. generate_bar_chart: एक bar चार्ट बनाएँ, जिसका उपयोग विभिन्न श्रेणियों में मानों की तुलना करने के लिए किया जाता है, क्षैतिज तुलनाओं के लिए उपयुक्त।
3. generate_boxplot_chart: एक boxplot बनाएँ, जिसका उपयोग डेटा के वितरण को प्रदर्शित करने के लिए किया जाता है, जिसमें माध्यिका, चतुर्थक और बाहरी कारक शामिल हैं।
4. generate_column_chart: एक column चार्ट बनाएँ, जिसका उपयोग विभिन्न श्रेणियों में मानों की तुलना करने के लिए किया जाता है, ऊर्ध्वाधर तुलनाओं के लिए उपयुक्त।
5. generate_district_map - एक district-map बनाएँ, जिसका उपयोग प्रशासनिक विभाजन और डेटा वितरण दिखाने के लिए किया जाता है।
6. generate_dual_axes_chart: एक dual-axes चार्ट बनाएँ, जिसका उपयोग विभिन्न इकाइयों या श्रेणियों वाले दो चरों के बीच संबंध प्रदर्शित करने के लिए किया जाता है।
7. generate_fishbone_diagram: एक fishbone आरेख बनाएँ, जिसे इशिकावा आरेख भी कहा जाता है, जिसका उपयोग किसी समस्या के मूल कारणों की पहचान करने और प्रदर्शित करने के लिए किया जाता है।
8. generate_flow_diagram: एक flowchart बनाएँ, जिसका उपयोग किसी प्रक्रिया के चरणों और अनुक्रम को प्रदर्शित करने के लिए किया जाता है।
9. generate_funnel_chart: एक funnel चार्ट बनाएँ, जिसका उपयोग विभिन्न चरणों में डेटा हानि प्रदर्शित करने के लिए किया जाता है।
10. generate_histogram_chart: एक histogram बनाएँ, जिसका उपयोग डेटा को अंतरालों में विभाजित करके और प्रत्येक अंतराल में डेटा बिंदुओं की संख्या गिनकर डेटा के वितरण को प्रदर्शित करने के लिए किया जाता है।
11. generate_line_chart: एक line चार्ट बनाएँ, जिसका उपयोग समय या किसी अन्य सतत चर के साथ डेटा की प्रवृत्ति प्रदर्शित करने के लिए किया जाता है।
12. generate_liquid_chart: एक liquid चार्ट बनाएँ, जिसका उपयोग डेटा के अनुपात को प्रदर्शित करने के लिए किया जाता है, पानी से भरे गोलों के रूप में प्रतिशत को दृश्य रूप से दर्शाता है।
13. generate_mind_map: एक mind-map बनाएँ, जिसका उपयोग विचार प्रक्रियाओं और पदानुक्रमित जानकारी प्रदर्शित करने के लिए किया जाता है।
14. generate_network_graph: एक network ग्राफ बनाएँ, जिसका उपयोग नोड्स के बीच संबंधों और कनेक्शनों को प्रदर्शित करने के लिए किया जाता है।
15. generate_organization_chart: एक organizational चार्ट बनाएँ, जिसका उपयोग किसी संगठन की संरचना और कार्मिक संबंधों को प्रदर्शित करने के लिए किया जाता है।
16. generate_path_map - एक path-map बनाएँ, जिसका उपयोग POI के लिए मार्ग नियोजन परिणाम प्रदर्शित करने के लिए किया जाता है।
17. generate_pie_chart: एक pie चार्ट बनाएँ, जिसका उपयोग डेटा के अनुपात को प्रदर्शित करने के लिए किया जाता है, इसे भागों में विभाजित करता है जो प्रत्येक भाग के प्रतिशत को दर्शाने वाले सेक्टरों द्वारा दर्शाए जाते हैं।
18. generate_pin_map - एक pin-map बनाएँ, जिसका उपयोग POI के वितरण को दिखाने के लिए किया जाता है।
19. generate_radar_chart: एक radar चार्ट बनाएँ, जिसका उपयोग बहु-आयामी डेटा को व्यापक रूप से प्रदर्शित करने के लिए किया जाता है, रडार जैसे प्रारूप में कई आयाम दिखाता है।
20. generate_sankey_chart: एक sankey चार्ट बनाएँ, जिसका उपयोग डेटा प्रवाह और मात्रा प्रदर्शित करने के लिए किया जाता है, सैंकी-शैली प्रारूप में विभिन्न नोड्स के बीच डेटा की गति का प्रतिनिधित्व करता है।
21. generate_scatter_chart: एक scatter प्लॉट बनाएँ, जिसका उपयोग दो चरों के बीच संबंध प्रदर्शित करने के लिए किया जाता है, एक समन्वय प्रणाली पर बिखरे हुए बिंदुओं के रूप में डेटा बिंदु दिखाता है।
22. generate_treemap_chart: एक treemap बनाएँ, जिसका उपयोग पदानुक्रमित डेटा प्रदर्शित करने के लिए किया जाता है, आयताकार रूपों में डेटा दिखाता है जहाँ आयतों का आकार डेटा के मान का प्रतिनिधित्व करता है।
23. generate_venn_chart: एक venn आरेख बनाएँ, जिसका उपयोग सेटों के बीच संबंधों को प्रदर्शित करने के लिए किया जाता है, जिसमें प्रतिच्छेदन, संघ और अंतर शामिल हैं।
24. generate_violin_chart: एक violin प्लॉट बनाएँ, जिसका उपयोग डेटा के वितरण को प्रदर्शित करने के लिए किया जाता है, बॉक्सप्लॉट और घनत्व प्लॉट की विशेषताओं को मिलाकर डेटा वितरण का अधिक विस्तृत दृश्य प्रदान करता है।
25. generate_word_cloud_chart: एक word-cloud बनाएँ, जिसका उपयोग पाठ्य डेटा में शब्दों की आवृत्ति प्रदर्शित करने के लिए किया जाता है, फ़ॉन्ट आकार प्रत्येक शब्द की आवृत्ति को इंगित करता है।
26. generate_spreadsheet: सारणीबद्ध डेटा प्रदर्शित करने के लिए एक spreadsheet या पिवट तालिका बनाएँ। जब 'rows' या 'values' फ़ील्ड प्रदान किए जाते हैं, तो यह पिवट तालिका (क्रॉस-सारणीकरण) के रूप में प्रस्तुत होता है; अन्यथा, यह एक नियमित तालिका के रूप में प्रस्तुत होता है।

[!NOTE] उपरोक्त भौगोलिक दृश्यीकरण चार्ट निर्माण उपकरण AMap सेवा का उपयोग करता है और वर्तमान में केवल चीन के भीतर मानचित्र निर्माण का समर्थन करता है।

🤖 उपयोग

Desktop APP के साथ उपयोग करने के लिए, जैसे कि Claude, VSCode, Cline, Cherry Studio, Cursor, इत्यादि, नीचे MCP सर्वर कॉन्फ़िग जोड़ें। Mac सिस्टम पर:

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"]
    }
  }
}

Window सिस्टम पर:

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@antv/mcp-server-chart"]
    }
  }
}

साथ ही, आप इसे HTTP, SSE प्रोटोकॉल के साथ aliyun, modelscope, glama.ai, smithery.ai या अन्य पर उपयोग कर सकते हैं।

🎨 कौशल उपयोग

यदि आप कौशल समर्थन वाले AI IDE (जैसे Claude Code) का उपयोग कर रहे हैं, तो आप स्वचालित रूप से सर्वोत्तम चार्ट प्रकार का चयन करने और दृश्यीकरण उत्पन्न करने के लिए chart-visualization कौशल का उपयोग कर सकते हैं।

आप https://github.com/antvis/chart-visualization-skills से कौशल जोड़ सकते हैं:

npx skills add antvis/chart-visualization-skills

फिर अपना डेटा प्रदान करें या अपने इच्छित दृश्यीकरण का वर्णन करें। कौशल बुद्धिमानी से 25+ चार्ट प्रकारों में से चयन करेगा और आपके लिए चार्ट उत्पन्न करेगा।

🚰 SSE या स्ट्रीमेबल ट्रांसपोर्ट के साथ चलाएँ

सीधे चलाएँ

पैकेज को वैश्विक रूप से स्थापित करें।

npm install -g @antv/mcp-server-chart

अपने पसंदीदा ट्रांसपोर्ट विकल्प के साथ सर्वर चलाएँ:

# For SSE transport (default endpoint: /sse)
mcp-server-chart --transport sse

# For Streamable transport with custom endpoint
mcp-server-chart --transport streamable

फिर आप सर्वर तक यहाँ पहुँच सकते हैं:

• SSE ट्रांसपोर्ट: http://localhost:1122/sse
• स्ट्रीमेबल ट्रांसपोर्ट: http://localhost:1122/mcp

डॉकर परिनियोजन

डॉकर निर्देशिका में प्रवेश करें।

cd docker

docker-compose का उपयोग करके परिनियोजित करें।

docker compose up -d

फिर आप सर्वर तक यहाँ पहुँच सकते हैं:

• SSE ट्रांसपोर्ट: http://localhost:1123/sse
• स्ट्रीमेबल ट्रांसपोर्ट: http://localhost:1122/mcp

🎮 CLI विकल्प

आप MCP सर्वर चलाते समय निम्नलिखित CLI विकल्पों का भी उपयोग कर सकते हैं। -H के साथ cli चलाकर कमांड विकल्प।

MCP Server Chart CLI

Options:
  --transport, -t  Specify the transport protocol: "stdio", "sse", or "streamable" (default: "stdio")
  --host, -h       Specify the host for SSE or streamable transport (default: localhost)
  --port, -p       Specify the port for SSE or streamable transport (default: 1122)
  --endpoint, -e   Specify the endpoint for the transport:
                   - For SSE: default is "/sse"
                   - For streamable: default is "/mcp"
  --help, -H       Show this help message

⚙️ पर्यावरण चर

चर	विवरण	डिफ़ॉल्ट	उदाहरण
VIS_REQUEST_SERVER	निजी परिनियोजन के लिए कस्टम चार्ट निर्माण सेवा URL	https://antv-studio.alipay.com/api/gpt-vis	https://your-server.com/api/chart
SERVICE_ID	चार्ट निर्माण रिकॉर्ड के लिए सेवा पहचानकर्ता	-	your-service-id-123
DISABLED_TOOLS	अक्षम करने के लिए उपकरण नामों की अल्पविराम-पृथक सूची	-	generate_fishbone_diagram,generate_mind_map

📠 निजी परिनियोजन

MCP Server Chart डिफ़ॉल्ट रूप से एक मुफ्त चार्ट निर्माण सेवा प्रदान करता है। निजी परिनियोजन की आवश्यकता वाले उपयोगकर्ताओं के लिए, वे अपनी स्वयं की चार्ट निर्माण सेवा को अनुकूलित करने के लिए VIS_REQUEST_SERVER का उपयोग करने का प्रयास कर सकते हैं।

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "VIS_REQUEST_SERVER": "<YOUR_VIS_REQUEST_SERVER>"
      }
    }
  }
}

आप एक निजी वातावरण में HTTP सेवा परिनियोजित करने के लिए AntV की परियोजना GPT-Vis-SSR का उपयोग कर सकते हैं, और फिर env VIS_REQUEST_SERVER के माध्यम से URL पता पास कर सकते हैं।

• विधि: POST
• पैरामीटर: जो रेंडरिंग के लिए GPT-Vis-SSR को पास किया जाएगा। जैसे, { "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }।
• वापसी: HTTP सेवा की वापसी वस्तु।
  • success: boolean क्या चार्ट छवि सफलतापूर्वक उत्पन्न हुई।
  • resultObj: string चार्ट छवि url।
  • errorMessage: string जब success = false, त्रुटि संदेश लौटाएँ।

[!NOTE] निजी परिनियोजन समाधान वर्तमान में भौगोलिक दृश्यीकरण चार्ट निर्माण का समर्थन नहीं करता है, जिसमें 3 उपकरण शामिल हैं: geographic-district-map, geographic-path-map, geographic-pin-map।

🗺️ रिकॉर्ड बनाएँ

डिफ़ॉल्ट रूप से, उपयोगकर्ताओं को परिणाम स्वयं सहेजने की आवश्यकता होती है, लेकिन हम चार्ट निर्माण रिकॉर्ड देखने के लिए एक सेवा भी प्रदान करते हैं, जिसके लिए उपयोगकर्ताओं को अपने लिए एक सेवा पहचानकर्ता उत्पन्न करना और इसे कॉन्फ़िगर करना होगा।

मिनी प्रोग्राम खोलने और एक व्यक्तिगत सेवा पहचानकर्ता उत्पन्न करने के लिए Alipay से स्कैन करें (नीचे "My" मेनू पर क्लिक करें, "My Services" पृष्ठ दर्ज करें, "Generate" बटन पर क्लिक करें, और सफलता के बाद "Copy" बटन पर क्लिक करें):

अगला, आपको MCP सर्वर कॉन्फ़िगरेशन में SERVICE_ID पर्यावरण चर जोड़ना होगा। उदाहरण के लिए, Mac के लिए कॉन्फ़िगरेशन इस प्रकार है (Windows सिस्टम के लिए, बस env चर जोड़ें):

{
  "mcpServers": {
    "AntV Map": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "SERVICE_ID": "***********************************"
      }
    }
  }
}

MCP सर्वर कॉन्फ़िगरेशन अपडेट करने के बाद, आपको अपने AI क्लाइंट एप्लिकेशन को पुनरारंभ करना होगा और फिर से जाँचना होगा कि क्या आपने MCP सर्वर से सफलतापूर्वक शुरू और कनेक्ट किया है। फिर आप फिर से मानचित्र उत्पन्न करने का प्रयास कर सकते हैं। निर्माण सफल होने के बाद, आप अपने मानचित्र निर्माण रिकॉर्ड देखने के लिए मिनी प्रोग्राम के "My Map" पृष्ठ पर जा सकते हैं।

🎛️ उपकरण फ़िल्टरिंग

आप DISABLED_TOOLS पर्यावरण चर का उपयोग करके विशिष्ट चार्ट निर्माण उपकरणों को अक्षम कर सकते हैं। यह तब उपयोगी होता है जब कुछ उपकरणों में आपके MCP क्लाइंट के साथ संगतता समस्याएँ होती हैं या जब आप उपलब्ध कार्यक्षमता को सीमित करना चाहते हैं।

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "DISABLED_TOOLS": "generate_fishbone_diagram,generate_mind_map"
      }
    }
  }
}

फ़िल्टरिंग के लिए उपलब्ध उपकरण नाम ✨ विशेषताएँ देखें।

🔨 विकास

निर्भरताएँ स्थापित करें:

npm install

सर्वर बनाएँ:

npm run build

MCP सर्वर प्रारंभ करें:

npm run start

SSE ट्रांसपोर्ट के साथ MCP सर्वर प्रारंभ करें:

node build/index.js -t sse

स्ट्रीमेबल ट्रांसपोर्ट के साथ MCP सर्वर प्रारंभ करें:

node build/index.js -t streamable

📄 लाइसेंस

MIT@AntV।