Chart

MCP सर्वर Chart

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

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

📋 विषय-सूची

• ✨ विशेषताएँ
• 🤖 उपयोग
• 🎨 कौशल उपयोग
• 🚰 SSE या Streamable ट्रांसपोर्ट के साथ चलाएँ
• 🎮 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"]
    }
  }
}

Windows सिस्टम पर:

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

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

🎨 कौशल उपयोग

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

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

npx skills add antvis/chart-visualization-skills

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

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

सीधे चलाएँ

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

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
• Streamable ट्रांसपोर्ट: http://localhost:1122/mcp

Docker परिनियोजन

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

cd docker

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

docker compose up -d

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

• SSE ट्रांसपोर्ट: http://localhost:1123/sse
• Streamable ट्रांसपोर्ट: 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

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

node build/index.js -t streamable

📄 लाइसेंस

MIT@AntV।