HTML/CSS to Image

MCP सर्वर एकीकरण

Model Context Protocol का उपयोग करके AI सहायकों के साथ छवियाँ बनाएँ।

नई सुविधा

MCP सर्वर एक नई सुविधा है। हम आपकी प्रतिक्रिया सुनना चाहेंगे! हमें support@htmlcsstoimage.com पर ईमेल भेजें।

---

MCP क्या है?

Model Context Protocol (MCP) एक खुला मानक है जो AI सहायकों को बाहरी टूल और सेवाओं से जोड़ने की अनुमति देता है। हमारे MCP सर्वर के साथ, आप बिना कोई कोड लिखे सीधे अपने AI कोडिंग सहायक से छवियाँ बना सकते हैं।

बस वर्णन करें कि आप क्या चाहते हैं, और AI आपके लिए इसे बनाने के लिए HTML/CSS to Image API का उपयोग करेगा।

MCP सर्वर URL: mcp.hcti.io

उपलब्ध टूल

MCP सर्वर निम्नलिखित टूल प्रदान करता है:

छवि निर्माण

टूल	विवरण
create_image	HTML और CSS से एक छवि बनाएँ। device_scale, viewport_width, viewport_height, ms_delay और अधिक जैसे सभी मानक पैरामीटर का समर्थन करता है।
create_url_image	किसी भी सार्वजनिक URL का स्क्रीनशॉट लें। इसमें सेलेक्टर, व्यूपोर्ट सेटिंग्स और कुकी बैनर ब्लॉकिंग के विकल्प शामिल हैं।
create_templated_image	सहेजे गए टेम्पलेट का उपयोग करके एक छवि बनाएँ। अपने टेम्पलेट में वेरिएबल बदलने के लिए template_id और template_values पास करें।
create_batch_images	एक ही अनुरोध में 25 तक छवियाँ बनाएँ। प्रत्येक छवि के लिए default_options सेट करें और variations प्रदान करें।
get_max_batch_size	अपनी योजना के आधार पर एक बैच में बनाई जा सकने वाली अधिकतम छवियों की संख्या जाँचें।

टेम्पलेट प्रबंधन

टूल	विवरण
create_template	वेरिएबल प्रतिस्थापन के साथ छवियाँ बनाने के लिए एक पुन: प्रयोज्य HTML/CSS टेम्पलेट सहेजें।
update_template	template_id और नई सामग्री प्रदान करके मौजूदा टेम्पलेट को संशोधित करें।
list_templates	अपने खाते में सभी सहेजे गए टेम्पलेट देखें। प्रति अनुरोध 100 तक टेम्पलेट लौटाता है।
list_template_versions	किसी विशिष्ट टेम्पलेट का संस्करण इतिहास देखें।

प्रमाणीकरण

MCP सर्वर प्रमाणीकरण के लिए OAuth का उपयोग करता है। जब आप पहली बार कनेक्ट होते हैं, तो आपके HTML/CSS to Image खाते तक पहुँच को अधिकृत करने के लिए आपका ब्राउज़र स्वचालित रूप से खुल जाएगा। किसी मैन्युअल क्रेडेंशियल कॉन्फ़िगरेशन की आवश्यकता नहीं है।

Cursor के लिए सेटअप

Cursor में HTML/CSS to Image MCP सर्वर को स्वचालित रूप से इंस्टॉल करने के लिए नीचे दिए गए बटन पर क्लिक करें:

या अपनी .cursor/mcp.json फ़ाइल में निम्नलिखित कॉन्फ़िगरेशन मैन्युअल रूप से जोड़ें:

{
  "mcpServers": {
    "hcti": {
      "type": "http",
      "url": "https://mcp.hcti.io"
    }
  }
}

कॉन्फ़िगरेशन सहेजने के बाद Cursor को पुनरारंभ करें। पहली बार जब आप सर्वर का उपयोग करेंगे, तो आपको अपने ब्राउज़र के माध्यम से पहुँच अधिकृत करने के लिए संकेत दिया जाएगा।

Claude Code के लिए सेटअप

Claude Code के साथ MCP सर्वर का उपयोग करने के लिए, निम्नलिखित कमांड चलाएँ:

claude mcp add hcti --transport http https://mcp.hcti.io

सर्वर जोड़ा गया था यह सत्यापित करने के लिए:

claude mcp list

पहली बार जब आप सर्वर का उपयोग करेंगे, तो आपको अपने ब्राउज़र के माध्यम से पहुँच अधिकृत करने के लिए संकेत दिया जाएगा।

Claude Desktop के लिए सेटअप

Claude Desktop (स्टैंडअलोन ऐप) भी MCP सर्वर का समर्थन करता है। अपनी Claude Desktop कॉन्फ़िगरेशन फ़ाइल संपादित करें:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Windows: %APPDATA%\Claude\claude_desktop_config.json

निम्नलिखित कॉन्फ़िगरेशन जोड़ें:

{
  "mcpServers": {
    "hcti": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.hcti.io"]
    }
  }
}

कॉन्फ़िगरेशन सहेजने के बाद Claude Desktop को पुनरारंभ करें। पहली बार जब आप सर्वर का उपयोग करेंगे, तो आपको अपने ब्राउज़र के माध्यम से पहुँच अधिकृत करने के लिए संकेत दिया जाएगा।

Windsurf के लिए सेटअप

Windsurf (Codeium द्वारा) MCP सर्वर का समर्थन करता है। अपनी ~/.codeium/windsurf/mcp_config.json फ़ाइल में निम्नलिखित जोड़ें:

{
  "mcpServers": {
    "hcti": {
      "serverUrl": "https://mcp.hcti.io"
    }
  }
}

कॉन्फ़िगरेशन अपडेट करने के बाद Windsurf को पुनरारंभ करें। पहली बार जब आप सर्वर का उपयोग करेंगे, तो आपको अपने ब्राउज़र के माध्यम से पहुँच अधिकृत करने के लिए संकेत दिया जाएगा।

Cline (VS Code) के लिए सेटअप

Cline VS Code के लिए एक लोकप्रिय स्वायत्त कोडिंग एजेंट है। MCP सर्वर जोड़ने के लिए:

1. VS Code खोलें और Cline Settings पर जाएँ
2. MCP Servers पर नेविगेट करें
3. Add Server पर क्लिक करें और कॉन्फ़िगर करें:

{
  "hcti": {
    "url": "https://mcp.hcti.io"
  }
}

वैकल्पिक रूप से, अपनी Cline MCP सेटिंग्स फ़ाइल को सीधे ~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json पर संपादित करें।

पहली बार जब आप सर्वर का उपयोग करेंगे, तो आपको अपने ब्राउज़र के माध्यम से पहुँच अधिकृत करने के लिए संकेत दिया जाएगा।

Zed के लिए सेटअप

Zed AI सुविधाओं के साथ एक उच्च-प्रदर्शन कोड संपादक है। अपनी Zed सेटिंग्स (~/.config/zed/settings.json) में MCP सर्वर जोड़ें:

{
  "context_servers": {
    "hcti": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.hcti.io"]
    }
  }
}

पहली बार जब आप सर्वर का उपयोग करेंगे, तो आपको अपने ब्राउज़र के माध्यम से पहुँच अधिकृत करने के लिए संकेत दिया जाएगा।

OpenCode के लिए सेटअप

OpenCode एक ओपन-सोर्स AI कोडिंग सहायक है। अपनी opencode.json कॉन्फ़िगरेशन फ़ाइल में MCP सर्वर जोड़ें:

{
  "mcp": {
    "hcti": {
      "type": "remote",
      "url": "https://mcp.hcti.io",
      "enabled": true
    }
  }
}

वैकल्पिक रूप से, इसे कमांड लाइन के माध्यम से जोड़ें:

opencode mcp add

पहली बार जब आप सर्वर का उपयोग करेंगे, तो आपको अपने ब्राउज़र के माध्यम से पहुँच अधिकृत करने के लिए संकेत दिया जाएगा।

स्वचालन प्लेटफ़ॉर्म

आप स्वचालन प्लेटफ़ॉर्म के साथ भी MCP सर्वर का उपयोग कर सकते हैं:

Zapier

Zapier के पास एक समर्पित MCP क्लाइंट है जो MCP सर्वर से जुड़ता है। यह आपको कोड लिखे बिना Zapier वर्कफ़्लो के भीतर HTML/CSS to Image MCP सर्वर का उपयोग करने देता है।

Zapier MCP क्लाइंट एकीकरण

Pipedream

Pipedream सर्वरलेस वर्कफ़्लो बनाने के लिए MCP सर्वर का समर्थन करता है। अपने Pipedream वर्कफ़्लो में छवि निर्माण को स्वचालित करने के लिए HTML/CSS to Image MCP सर्वर कनेक्ट करें।

Pipedream MCP एकीकरण

MCP सर्वर Smithery पर भी सूचीबद्ध है।

उदाहरण प्रॉम्प्ट

एक बार कॉन्फ़िगर हो जाने पर, आप अपने AI सहायक से स्वाभाविक रूप से छवियाँ बनाने के लिए कह सकते हैं। यहाँ कुछ उदाहरण दिए गए हैं:

HTML से एक छवि बनाएँ:

• "एक नीला बटन बनाएँ जिस पर 'Subscribe Now' लिखा हो, गोल कोनों और हल्की छाया के साथ"
• "ग्रेडिएंट बैकग्राउंड और 'Hello World' शीर्षक के साथ एक सोशल कार्ड बनाएँ"

किसी वेबसाइट का स्क्रीनशॉट लें:

• "उच्च रिज़ॉल्यूशन के लिए device_scale 2 पर सेट करके https://stripe.com का स्क्रीनशॉट लें"
• "सेलेक्टर '.pricing-grid' का उपयोग करके https://example.com/pricing पर मूल्य तालिका का स्क्रीनशॉट लें"

सोशल मीडिया छवियाँ बनाएँ:

• "ग्रेडिएंट बैकग्राउंड, 'Launching Soon' शीर्षक और हमारे लोगो के साथ एक Twitter/X कार्ड छवि बनाएँ"
• "Python के बारे में मेरे ब्लॉग पोस्ट के लिए एक Open Graph छवि बनाएँ"

बैच में छवियाँ बनाएँ:

• "प्रत्येक अलग बैकग्राउंड रंग के साथ उत्पाद कार्ड छवि के 10 वेरिएशन बनाएँ"

टेम्पलेट के साथ काम करें:

• "मेरे सहेजे गए टेम्पलेट सूचीबद्ध करें"
• "मेरे 'social-card' टेम्पलेट का उपयोग करके शीर्षक 'New Feature Release' पर सेट करके एक छवि बनाएँ"
• "इस HTML/CSS को 'blog-header' नामक टेम्पलेट के रूप में सहेजें ताकि मैं इसे पुन: उपयोग कर सकूँ"

यदि आप पहले डैशबोर्ड में टेम्पलेट डिज़ाइन करते हैं, तो Template Editor दस्तावेज़ ब्लॉक चुनने, वेरिएबल सेट करने और यह तय करने में मदद कर सकते हैं कि MCP सर्वर को template_values के रूप में कौन से मान पास करने चाहिए।

छवि पैरामीटर

छवियाँ बनाते समय, मुख्य पैरामीटर हैं:

पैरामीटर	प्रकार	विवरण
html	String	रेंडर करने के लिए HTML सामग्री। create_image के लिए आवश्यक।
css	String	आपके HTML के लिए CSS शैलियाँ।
url	String	स्क्रीनशॉट लेने के लिए URL। create_url_image के लिए आवश्यक।

अतिरिक्त पैरामीटर

नाम	प्रकार	विवरण
additional_header_origins	Array	विशिष्ट अतिरिक्त HTTP या HTTPS ऑरिजिन पर अनुरोधों पर कस्टम headers की अनुमति दें।
block_consent_banners	Boolean	जब true पर सेट किया जाता है, तो वेबसाइटों पर कुकी सहमति बैनर और पॉपअप स्वचालित रूप से ब्लॉक करता है। URL स्क्रीनशॉट के लिए सबसे उपयोगी।
color_scheme	String	Chrome को light या dark मोड में रेंडर करने के लिए सेट करें। prefers-color-scheme का उपयोग करने वाली वेबसाइटों को प्रभावित करता है।
dedupe_duration_s	Integer	छवि क्रेडिट का उपभोग किए बिना एक समान हालिया छवि का पुन: उपयोग करें। लुकबैक विंडो को सेकंड में सेट करता है; डिफ़ॉल्ट और अनुमत मान छवि प्रकार और योजना के अनुसार भिन्न होते हैं।
device_scale	Double	पिक्सेल अनुपात को 0.1 से 3 तक समायोजित करके रिज़ॉल्यूशन नियंत्रित करें। उच्च मान छवि गुणवत्ता और फ़ाइल आकार बढ़ाते हैं।
disable_twemoji	Boolean	Twemoji के बजाय मूल इमोजी फ़ॉन्ट का उपयोग करने के लिए true पर सेट करें।
format	String	प्रारंभ में लौटाए गए छवि URL में फ़ाइल एक्सटेंशन चुनें: png, jpg, webp, या pdf।
full_screen	Boolean	URL पृष्ठ की पूरी ऊँचाई की एक छवि बनाएँ।
google_fonts	String	एक या अधिक Google फ़ॉन्ट लोड करें, जैसे Roboto|Open Sans।
headers	Object	URL का स्क्रीनशॉट लेते समय कस्टम HTTP हेडर जोड़ें। हेडर अनुरोधित URL के ऑरिजिन और किसी भी additional_header_origins तक सीमित हैं।
identify_as_hcti	Boolean	URL का स्क्रीनशॉट लेते समय शीर्ष-स्तरीय अनुरोध में X-HCTI-SCREENSHOT: 1 जोड़ें।
include_headers_on_subrequests	Boolean	समान-ऑरिजिन सबरिक्वेस्ट और additional_header_origins से मेल खाने वाले सबरिक्वेस्ट में भी कस्टम headers जोड़ें।
jumbo_max_height	Integer	जंबो मोड में अधिकतम आउटपुट ऊँचाई, 80,000 पिक्सेल तक। jumbo_max_width के साथ सेट किया जाना चाहिए और अतिरिक्त छवि क्रेडिट का उपभोग करता है।
jumbo_max_width	Integer	जंबो मोड में अधिकतम आउटपुट चौड़ाई, 80,000 पिक्सेल तक। jumbo_max_height के साथ सेट किया जाना चाहिए और अतिरिक्त छवि क्रेडिट का उपभोग करता है।
max_wait_ms	Integer	स्क्रीनशॉट लेने से पहले प्रतीक्षा के लिए 500 से 10000 मिलीसेकंड तक अधिकतम समय सीमा निर्धारित करें।
media_type	String	Chrome को screen या print CSS मीडिया शैलियों का उपयोग करके रेंडर करने के लिए सेट करें।
ms_delay	Integer	छवि बनाने से पहले देरी। JavaScript की प्रतीक्षा करते समय उपयोगी; 500 मिलीसेकंड से शुरू करें।
pdf_options	Object	पृष्ठ आकार, मार्जिन, स्केल और बैकग्राउंड प्रिंटिंग के साथ PDF आउटपुट को अनुकूलित करें।
proxy_id	String	आउटबाउंड ट्रैफ़िक को आपके संगठन के कॉन्फ़िगर किए गए HTTP प्रॉक्सी में से एक के माध्यम से रूट करें। 10,000 छवियाँ/माह योजना या उच्चतर पर उपलब्ध।
render_when_ready	Boolean	JavaScript द्वारा ScreenshotReady() कॉल करने तक छवि बनाने की प्रतीक्षा करें।
selector	String	इस CSS सेलेक्टर से मेल खाने वाले तत्व के लिए छवि को क्रॉप करें, जैसे section#complete-toolkit.container-lg।
storage_destination_id	String	रेंडर की गई फ़ाइलों को आपके संगठन के कॉन्फ़िगर किए गए स्टोरेज डेस्टिनेशन में से एक में सहेजें। 10,000 छवियाँ/माह योजना या उच्चतर पर उपलब्ध।
timezone	String	IANA पहचानकर्ता जैसे America/New_York के साथ Chrome का टाइमज़ोन सेट करें।
transparent_background	Boolean	पारदर्शी बैकग्राउंड के साथ रेंडर करने के लिए true पर सेट करें।
viewport_height	Integer	Chrome के व्यूपोर्ट की ऊँचाई सेट करें। किसी एक का उपयोग करते समय दोनों आयाम सेट होने चाहिए।
viewport_landscape	Boolean	Chrome के व्यूपोर्ट को लैंडस्केप मोड में सेट करें।
viewport_mobile	Boolean	Chrome के व्यूपोर्ट को मोबाइल डिवाइस का अनुकरण करने के लिए सेट करें।
viewport_touch	Boolean	Chrome के व्यूपोर्ट को टच इवेंट का समर्थन करने के लिए सेट करें।
viewport_width	Integer	Chrome के व्यूपोर्ट की चौड़ाई सेट करें। किसी एक का उपयोग करते समय दोनों आयाम सेट होने चाहिए।

समस्या निवारण

प्रमाणीकरण त्रुटियाँ

यदि आपको प्रमाणीकरण त्रुटियाँ मिलती हैं:

• नया OAuth प्रवाह शुरू करने के लिए MCP सर्वर को डिस्कनेक्ट और पुनः कनेक्ट करने का प्रयास करें
• सुनिश्चित करें कि आप अपने ब्राउज़र में सही HTML/CSS to Image खाते में लॉग इन हैं
• जाँच करें कि OAuth विंडो खोलने का प्रयास करते समय पॉप-अप ब्लॉक न हों

कनेक्शन समस्याएँ

यदि MCP सर्वर कनेक्ट नहीं हो रहा है:

• सुनिश्चित करें कि आपका नेटवर्क आउटबाउंड HTTPS कनेक्शन की अनुमति देता है
• जाँचें कि URL बिल्कुल https://mcp.hcti.io है
• कॉन्फ़िगरेशन अपडेट करने के बाद अपने AI सहायक को पुनः आरंभ करें

छवि निर्माण त्रुटियाँ

यदि छवियाँ बनाने में विफल होती हैं:

• जाँचें कि आपके खाते में डैशबोर्ड पर उपलब्ध छवि क्रेडिट हैं
• सुनिश्चित करें कि HTML सामग्री मान्य है
• URL स्क्रीनशॉट के लिए, सत्यापित करें कि URL सार्वजनिक रूप से सुलभ है

---

सहायता चाहिए?

किसी मानव से बात करें। कृपया किसी भी प्रश्न के लिए हमें support@htmlcsstoimage.com पर ईमेल करें और हम आपको शुरू करने में खुशी से मदद करेंगे।