HTML/CSS to Image

การเชื่อมต่อ MCP Server ของ HTML/CSS to Image

ถ่ายภาพหน้าจอเว็บไซต์ เรนเดอร์รูปภาพหรือ PDF และจัดการทรัพยากรขององค์กรของคุณได้โดยตรงจากผู้ช่วย AI ของคุณ

บทนำ

ไม่ว่าคุณจะใช้เครื่องมือ AI หรือเอเจนต์ใด คุณสามารถเชื่อมต่อกับ HTML/CSS to Image ผ่าน MCP ได้ ให้ URL สาธารณะหรือ HTML/CSS แก่ผู้ช่วยที่เข้ากันได้ แล้วขอให้มันถ่ายภาพหน้าจอ เรนเดอร์ PDF หรือสร้างรูปภาพจากเทมเพลตที่บันทึกไว้ของคุณ

• เริ่มต้นใช้งานฟรี บัญชี HCTI ฟรีใช้งานได้กับการเชื่อมต่อทุกรูปแบบ การสร้างรูปภาพใช้เครดิตรูปภาพที่มีอยู่ขององค์กรของคุณ เช่นเดียวกับ API
• เข้าสู่ระบบอย่างปลอดภัย อนุญาตบัญชีของคุณผ่าน OAuth ในเบราว์เซอร์ โดยไม่ต้องคัดลอกคีย์ API ลงในผู้ช่วยของคุณ
• ไม่ต้องจัดการโครงสร้างพื้นฐานเบราว์เซอร์ HCTI จัดการการเรนเดอร์และส่งคืน URL ที่โฮสต์ไว้ซึ่งคุณสามารถเปิด ดาวน์โหลด หรือแชร์ได้

คุณยังสามารถขอให้ผู้ช่วยของคุณกำหนดค่าพร็อกซี ตำแหน่งจัดเก็บข้อมูล และรูปภาพ Open Graph อัตโนมัติผ่าน ความสามารถของ Management API การดำเนินการเหล่านี้ต้องมี สิทธิ์ OAuth เพิ่มเติม; การจัดการคีย์ API รองรับเฉพาะ REST เท่านั้น

เลือกไคลเอนต์ของคุณ

เลือกผู้ช่วยของคุณเพื่อดูคำแนะนำการติดตั้งและตัวอย่างที่สามารถคัดลอกได้

ไคลเอนต์	วิธีเชื่อมต่อ
ChatGPT & Codex	ติดตั้งปลั๊กอินอย่างเป็นทางการ ใช้ในการสนทนาหรืองานเขียนโค้ด
Claude & Claude Code	ติดตั้งจาก Claude Connectors Directory หรือเชื่อมต่อ Claude Code
Cline	เชื่อมต่อ Streamable HTTP server จากส่วนขยาย Cline
Cursor	เพิ่ม HCTI ไปยัง Cursor Agent ด้วยปุ่มติดตั้งหรือการกำหนดค่า MCP
Gemini CLI	เชื่อมต่อ Gemini CLI ด้วย remote HTTP server และการเข้าสู่ระบบผ่านเบราว์เซอร์
GitHub Copilot	เชื่อมต่อ Copilot CLI จากเทอร์มินัลของคุณ
Grok	ใช้ปลั๊กอิน HCTI หรือการเชื่อมต่อ MCP โดยตรงใน Grok Build
JetBrains IDEs	เชื่อมต่อ AI Assistant ผ่านสะพาน MCP ที่รองรับ OAuth
OpenCode	กำหนดค่า remote MCP server และอนุญาตจาก CLI
VS Code	เพิ่ม remote HTTP server และใช้เครื่องมือในโหมด Copilot Agent
Windsurf	เชื่อมต่อ HCTI ไปยัง Cascade สำหรับการถ่ายภาพหน้าจอและการเรนเดอร์
Zed	เพิ่ม remote MCP server ไปยัง Agent Panel

MCP คืออะไร?

Model Context Protocol ช่วยให้ผู้ช่วยสามารถเรียกใช้เครื่องมือภายนอกได้ MCP server ที่โฮสต์โดย HCTI เรนเดอร์ HTML/CSS หรือ URL สาธารณะที่ผู้ช่วยของคุณส่งให้ และส่งคืนผลลัพธ์ คุณไม่จำเป็นต้องรันเบราว์เซอร์สำหรับการเรนเดอร์ด้วยตัวเอง

MCP server URL: https://mcp.hcti.io

Transport: 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 selector พร้อมการตั้งค่า viewport และการบล็อกแบนเนอร์คุกกี้
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 เพื่อเลือกการเข้าถึงการจัดการเพิ่มเติมหากจำเป็น ไคลเอนต์บางตัวแจ้งเตือนอัตโนมัติเมื่อใช้งานครั้งแรก คู่มือรายบุคคลแสดงวิธีเชื่อมต่ออย่างชัดเจน

หากต้องการตรวจสอบการเชื่อมต่อโดยไม่ต้องเรนเดอร์รูปภาพ ให้ถามว่า: "Use HCTI to check my image usage and account limits." เครื่องมือ 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 selector เช่น .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 เพื่อเรนเดอร์ เมื่อทำงานจาก repository ให้ขอให้อ่านไฟล์ที่เกี่ยวข้องและส่งมาร์กอัปและสไตล์ที่สมบูรณ์ในตัวเอง เส้นทางทรัพยากรในเครื่องต้องถูกแทนที่ด้วยทรัพยากรที่เข้าถึงได้

วิธีส่งออก 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	สไตล์ CSS สำหรับ HTML ของคุณ
url	String	URL ที่จะถ่ายภาพหน้าจอ จำเป็นสำหรับ create_url_image

พารามิเตอร์เพิ่มเติม

ชื่อ	ชนิด	คำอธิบาย
additional_header_origins	Array	อนุญาตให้ใช้ headers ที่กำหนดเองบนคำขอไปยังต้นทาง HTTP หรือ HTTPS เพิ่มเติมที่เฉพาะเจาะจง
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	เพิ่มส่วนหัว HTTP ที่กำหนดเองเมื่อจับภาพหน้าจอ URL ส่วนหัวถูกจำกัดเฉพาะต้นทางของ URL ที่ร้องขอและ additional_header_origins ใดๆ
identify_as_hcti	Boolean	เพิ่ม X-HCTI-SCREENSHOT: 1 ลงในคำขอระดับบนสุดเมื่อจับภาพหน้าจอ URL
include_headers_on_subrequests	Boolean	เพิ่ม headers ที่กำหนดเองให้กับคำขอย่อยต้นทางเดียวกันและคำขอย่อยที่ตรงกับ additional_header_origins ด้วย
jumbo_max_height	Integer	ความสูงเอาต์พุตสูงสุดในโหมด jumbo สูงสุด 80,000 พิกเซล ต้องตั้งค่าด้วย jumbo_max_width และใช้เครดิตภาพเพิ่มเติม
jumbo_max_width	Integer	ความกว้างเอาต์พุตสูงสุดในโหมด jumbo สูงสุด 80,000 พิกเซล ต้องตั้งค่าด้วย jumbo_max_height และใช้เครดิตภาพเพิ่มเติม
max_wait_ms	Integer	ตั้งค่าขีดจำกัดเวลาสูงสุดจาก 500 ถึง 10000 มิลลิวินาทีสำหรับการรอก่อนจับภาพหน้าจอ
media_type	String	ตั้งค่า Chrome ให้แสดงผลโดยใช้สไตล์ CSS media ของ screen หรือ print
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	ตั้งค่าเขตเวลาของ Chrome ด้วยตัวระบุ IANA เช่น America/New_York
transparent_background	Boolean	ตั้งค่าเป็น true เพื่อแสดงผลด้วยพื้นหลังโปร่งใส
viewport_height	Integer	ตั้งค่าความสูงของวิวพอร์ตของ Chrome ต้องตั้งค่าทั้งสองมิติเมื่อใช้อย่างใดอย่างหนึ่ง
viewport_landscape	Boolean	ตั้งค่าวิวพอร์ตของ Chrome เป็นโหมดแนวนอน
viewport_mobile	Boolean	ตั้งค่าวิวพอร์ตของ Chrome เพื่อจำลองอุปกรณ์มือถือ
viewport_touch	Boolean	ตั้งค่าวิวพอร์ตของ Chrome เพื่อรองรับเหตุการณ์สัมผัส
viewport_width	Integer	ตั้งค่าความกว้างของวิวพอร์ตของ Chrome ต้องตั้งค่าทั้งสองมิติเมื่อใช้อย่างใดอย่างหนึ่ง

การแก้ไขปัญหา

ข้อผิดพลาดการรับรองความถูกต้อง

หากคุณได้รับข้อผิดพลาดการรับรองความถูกต้อง:

• ลองยกเลิกการเชื่อมต่อและเชื่อมต่อเซิร์ฟเวอร์ MCP ใหม่เพื่อเริ่มโฟลว์ OAuth ใหม่
• ตรวจสอบว่าคุณเข้าสู่ระบบบัญชี 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 ซึ่งช่วยให้คุณใช้เซิร์ฟเวอร์ HTML/CSS to Image MCP ภายในเวิร์กโฟลว์ Zapier โดยไม่ต้องเขียนโค้ด

ไคลเอนต์ MCP ของ Zapier

Pipedream

Pipedream รองรับเซิร์ฟเวอร์ MCP สำหรับการสร้างเวิร์กโฟลว์แบบไร้เซิร์ฟเวอร์ เชื่อมต่อเซิร์ฟเวอร์ HTML/CSS to Image MCP เพื่อทำให้การสร้างรูปภาพในเวิร์กโฟลว์ Pipedream ของคุณเป็นอัตโนมัติ

การผสานรวม MCP ของ Pipedream

เซิร์ฟเวอร์ MCP ยังแสดงอยู่ใน Smithery

ต้องการความช่วยเหลือ?

พูดคุยกับมนุษย์ อีเมล support@htmlcsstoimage.com แล้วเราจะช่วยคุณเริ่มต้น