HTML/CSS to Image

HTML/CSS to Image MCP सर्वर को एकीकृत करना

अपने AI सहायक से सीधे वेबसाइट स्क्रीनशॉट लें, चित्र या PDF रेंडर करें, और अपने संगठन के संसाधनों का प्रबंधन करें।

परिचय

आप चाहे किसी भी AI टूल या एजेंट का उपयोग करें, आप इसे MCP के माध्यम से HTML/CSS to Image से जोड़ सकते हैं। किसी भी संगत सहायक को सार्वजनिक URL या HTML/CSS दें, और उसे स्क्रीनशॉट लेने, PDF रेंडर करने, या आपके सहेजे गए टेम्पलेट्स से चित्र बनाने के लिए कहें।

• मुफ्त में शुरू करें। एक निःशुल्क HCTI खाता किसी भी एकीकरण के साथ काम करता है। चित्र बनाना API की तरह ही आपके संगठन की उपलब्ध चित्र क्रेडिट का उपयोग करता है।
• सुरक्षित रूप से साइन इन करें। अपने ब्राउज़र में OAuth के माध्यम से अपने खाते को अधिकृत करें, बिना अपने सहायक में API कुंजियाँ कॉपी किए।
• कोई ब्राउज़र इंफ्रास्ट्रक्चर प्रबंधित नहीं करना पड़ता। HCTI रेंडरिंग संभालता है और एक होस्टेड URL लौटाता है जिसे आप खोल सकते हैं, डाउनलोड कर सकते हैं, या साझा कर सकते हैं।

आप अपने सहायक से Management API क्षमताओं के माध्यम से प्रॉक्सी, स्टोरेज डेस्टिनेशन और स्वचालित Open Graph चित्र कॉन्फ़िगर करने के लिए भी कह सकते हैं। इन कार्यों के लिए अतिरिक्त OAuth अनुमतियाँ आवश्यक हैं; API कुंजी प्रबंधन केवल REST-आधारित है।

अपना क्लाइंट चुनें

सेटअप निर्देशों और कॉपी करने योग्य उदाहरणों के लिए अपना सहायक चुनें।

क्लाइंट	कैसे कनेक्ट करें
ChatGPT & Codex	आधिकारिक प्लगइन इंस्टॉल करें; इसे बातचीत या कोडिंग कार्य में उपयोग करें।
Claude & Claude Code	Claude Connectors Directory से इंस्टॉल करें, या Claude Code कनेक्ट करें।
Cline	Cline एक्सटेंशन से एक Streamable HTTP सर्वर कनेक्ट करें।
Cursor	इंस्टॉल बटन या MCP कॉन्फ़िगरेशन के साथ Cursor Agent में HCTI जोड़ें।
Gemini CLI	Gemini CLI को रिमोट HTTP सर्वर और ब्राउज़र साइन-इन के साथ कनेक्ट करें।
GitHub Copilot	अपने टर्मिनल से Copilot CLI कनेक्ट करें।
Grok	Grok Build में HCTI प्लगइन या सीधा MCP कनेक्शन उपयोग करें।
JetBrains IDEs	OAuth-सक्षम MCP ब्रिज के माध्यम से AI Assistant कनेक्ट करें।
OpenCode	एक रिमोट MCP सर्वर कॉन्फ़िगर करें और इसे CLI से अधिकृत करें।
VS Code	एक रिमोट HTTP सर्वर जोड़ें और Copilot Agent मोड में इसके टूल उपयोग करें।
Windsurf	स्क्रीनशॉट और रेंडरिंग के लिए Cascade में HCTI कनेक्ट करें।
Zed	Agent Panel में एक रिमोट MCP सर्वर जोड़ें।

MCP क्या है?

Model Context Protocol सहायकों को बाहरी टूल कॉल करने की अनुमति देता है। HCTI का होस्टेड MCP सर्वर आपके सहायक द्वारा आपूर्ति किए गए HTML/CSS या सार्वजनिक URL को रेंडर करता है और परिणाम लौटाता है। आपको स्वयं रेंडरिंग ब्राउज़र चलाने की आवश्यकता नहीं है।

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

ट्रांसपोर्ट: Streamable HTTP

प्रमाणीकरण: OAuth

हमारा एजेंट प्लगइन HCTI उपयोग के लिए वर्कफ़्लो मार्गदर्शन भी पैकेज करता है। जहाँ कोई क्लाइंट उस प्लगइन का समर्थन करता है, वहाँ इसे इंस्टॉल करने से कनेक्शन और सहायक के लिए निर्देश दोनों मिलते हैं। एक सीधा MCP कनेक्शन नीचे दिए गए टूल तक पहुँच प्रदान करता है।

उपलब्ध टूल

ये मुख्य टूल सभी MCP क्लाइंट्स पर काम करते हैं। पहुँच आपके कनेक्शन के लिए अनुमोदित अनुमतियों पर निर्भर करती है। अपने सहायक से नाम से HCTI उपयोग करने के लिए कहें।

खाता उपयोग

टूल	यह क्या करता है
check_usage	चित्र रेंडर किए बिना उपयोग किए गए चित्र, चित्र भत्ता, अगला रीसेट और ओवरेज सेटिंग्स जाँचें।

स्क्रीनशॉट और रेंडरिंग

टूल	यह क्या करता है
create_image	HTML/CSS को PNG, JPG, WebP, या PDF के रूप में रेंडर करें। device_scale, viewport_width, viewport_height और ms_delay का समर्थन करता है।
create_url_image	व्यू पोर्ट सेटिंग्स और कुकी-बैनर ब्लॉकिंग के साथ सार्वजनिक पेज या CSS सेलेक्टर कैप्चर करें।
create_templated_image	template_id और template_values के साथ एक सहेजा गया टेम्पलेट रेंडर करें।
create_batch_images	साझा default_options और प्रति-चित्र वेरिएशन के साथ वेरिएशन रेंडर करें।
get_max_batch_size	बैच तैयार करने से पहले खाते की बैच सीमा जाँचें।

फीडबैक

टूल	यह क्या करता है
submit_feedback	HCTI टीम को बग रिपोर्ट करें, फीचर अनुरोध करें और सुधार सुझाएँ। फीडबैक टूल संदर्भ देखें।

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

टूल	यह क्या करता है
create_template	HTML/CSS को वेरिएबल्स के साथ पुन: प्रयोज्य टेम्पलेट के रूप में सहेजें।
update_template	ID द्वारा मौजूदा टेम्पलेट अपडेट करें।
list_templates	कनेक्टेड खाते में टेम्पलेट खोजें।
list_template_versions	टेम्पलेट का संस्करण इतिहास निरीक्षण करें।

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

प्रमाणीकरण

HCTI जोड़ने के बाद, अपने क्लाइंट की कनेक्ट या लॉगिन क्रिया का उपयोग करें और ब्राउज़र में प्राधिकरण पूरा करें। उस HCTI खाते में साइन इन करें जिसके टेम्पलेट और क्रेडिट आप उपयोग करना चाहते हैं, चयनित संगठन और अनुमतियों की समीक्षा करें, फिर सहायक पर लौटें। यदि आवश्यक हो तो अतिरिक्त प्रबंधन पहुँच का चयन करने के लिए More Permissions खोलें। कुछ क्लाइंट पहले उपयोग पर स्वचालित रूप से संकेत देते हैं; व्यक्तिगत गाइड दिखाते हैं कि स्पष्ट रूप से कैसे कनेक्ट करें।

चित्र रेंडर किए बिना कनेक्शन जाँचने के लिए, पूछें: "मेरी चित्र उपयोग और खाता सीमाएँ जाँचने के लिए HCTI का उपयोग करें।" check_usage टूल को usage:read की आवश्यकता होती है और यह चित्र रेंडर किए बिना उपयोग और सीमाएँ लौटाता है। get_max_batch_size को भी usage:read की आवश्यकता होती है। रेंडरिंग अनुरोध आपके HCTI खाते की चित्र भत्ता का उपयोग करते हैं; आपका सहायक सदस्यता अलग है।

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

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

Use HTML/CSS to Image to screenshot https://example.com as a PNG.
Set viewport_width to 1440 and device_scale to 1. Return the image URL.

कैप्चर का निरीक्षण करने के लिए लौटाए गए URL को खोलें। अपनी साइट के केवल एक हिस्से को कैप्चर करने के लिए, एक CSS सेलेक्टर प्रदान करें जैसे .pricing-grid जो उस पेज पर वास्तव में मौजूद हो। HCTI अपनी होस्टेड सेवा से URL तक पहुँचने में सक्षम होना चाहिए; localhost पहुँच योग्य नहीं है।

HTML और CSS को PNG के रूप में कैसे रेंडर करें

Use HCTI to render this HTML and CSS as a PNG with device_scale set to 1.
HTML: <div class="card">Hello from HCTI</div>
CSS: .card { width: 1200px; height: 630px; display: flex;
align-items: center; justify-content: center; background: #172554;
color: white; font: 64px sans-serif; }
Return the hosted image URL.

परिणाम में गहरे नीले कार्ड पर सफेद टेक्स्ट केंद्रित दिखना चाहिए। सहायक रेंडरिंग के लिए HTML/CSS को HCTI भेजता है। रिपॉजिटरी से काम करते समय, उसे प्रासंगिक फाइलें पढ़ने और स्व-निहित मार्कअप और स्टाइल प्रदान करने के लिए कहें; स्थानीय एसेट पथों को सुलभ एसेट्स से बदलने की आवश्यकता है।

PDF कैसे निर्यात करें

Format the following report as HTML and CSS, then render it with HCTI
using format="pdf". Use clear headings and a readable table.
Report: January revenue $12,000; February revenue $14,500; March revenue $16,200.
Return the PDF URL.

टेम्पलेट का पुन: उपयोग और वेरिएशन कैसे बनाएं

Use HCTI to list my saved templates. Find the social-card template and
inspect its variables before rendering it with the headline "New release".

Use HCTI to check my maximum batch size. Create five variations of the
HTML/CSS card we just rendered, with a different accent color in each.
Return a labeled list of image URLs.

टेम्पलेट डिज़ाइन करने और उन मानों को परिभाषित करने के लिए Template Editor का उपयोग करें जिन्हें आपका सहायक template_values के रूप में पास करे।

संगठन संसाधनों का निरीक्षण कैसे करें

Use HCTI to list my OG configurations and inspect the blog configuration.
Explain its template mappings and refresh interval.

इस उदाहरण के लिए og_configs:read अनुमोदित करें। कॉन्फ़िगरेशन बनाने या अपडेट करने के लिए, og_configs:create_update भी अनुमोदित करें। प्रॉक्सी, स्टोरेज डेस्टिनेशन और OG प्रबंधन कार्यों के लिए टूल संदर्भ देखें।

चित्र पैरामीटर

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

पैरामीटर	प्रकार	विवरण
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	HTML/CSS और टेम्पलेट छवियाँ डिफ़ॉल्ट रूप से Twemoji का उपयोग करती हैं; इसे अक्षम करने के लिए true सेट करें। URL छवियाँ Twemoji को केवल तभी इंजेक्ट करती हैं जब स्पष्ट रूप से false पर सेट किया गया हो।
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() कॉल करने तक छवि उत्पन्न करने के लिए प्रतीक्षा करें।
request_overrides	Array	URL वाइल्डकार्ड पैटर्न और/या संसाधन प्रकारों से मेल खाने वाले ब्राउज़र नेटवर्क अनुरोधों को ब्लॉक करें। भुगतान योजना की आवश्यकता है।
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 विंडो खोलने का प्रयास करते समय पॉप-अप अवरुद्ध नहीं हैं

अनुमति त्रुटियाँ

सूचीबद्ध टूल को आपके कनेक्शन के पास न होने वाली अनुमतियों की आवश्यकता हो सकती है। HCTI को डिस्कनेक्ट और पुनः कनेक्ट करें, फिर इच्छित संगठन के लिए आवश्यक पहुँच को अनुमोदित करें। मौजूदा टोकन को रीफ्रेश करने से अनुमतियाँ नहीं जुड़ती हैं। पहुँच बदलने तक अस्वीकृत ऑपरेशन को दोबारा प्रयास न करें। MCP प्राधिकरण देखें।

दर सीमा त्रुटियाँ

प्रबंधन टूल सीमाएँ आपके संगठन के REST अनुरोधों के साथ साझा की जाती हैं। दर-सीमित टूल को दोबारा प्रयास करने से पहले 60 सेकंड प्रतीक्षा करें; दर सीमाएँ देखें।

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

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

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

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

यदि छवियाँ उत्पन्न करने में विफल होती हैं:

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

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

आप 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 पर भी सूचीबद्ध है।

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

किसी इंसान से बात करें। ईमेल करें support@htmlcsstoimage.com और हम आपको शुरू करने में मदद करेंगे।