HTML/CSS to Image

การผสานรวม MCP Server

สร้างรูปภาพด้วยผู้ช่วย AI โดยใช้ Model Context Protocol

ฟีเจอร์ใหม่

MCP server เป็นฟีเจอร์ใหม่ เรายินดีรับฟังความคิดเห็นจากคุณ! ส่งอีเมลถึงเราได้ที่ support@htmlcsstoimage.com

---

MCP คืออะไร?

Model Context Protocol (MCP) เป็นมาตรฐานเปิดที่ช่วยให้ผู้ช่วย AI สามารถเชื่อมต่อกับเครื่องมือและบริการภายนอกได้ ด้วย MCP server ของเรา คุณสามารถสร้างรูปภาพได้โดยตรงจากผู้ช่วยเขียนโค้ด AI โดยไม่ต้องเขียนโค้ดใดๆ

เพียงอธิบายสิ่งที่คุณต้องการ แล้ว AI จะใช้ HTML/CSS to Image API เพื่อสร้างรูปภาพให้คุณ

MCP Server URL: mcp.hcti.io

เครื่องมือที่มีให้ใช้งาน

MCP server มีเครื่องมือดังต่อไปนี้:

การสร้างรูปภาพ

เครื่องมือ	คำอธิบาย
create_image	สร้างรูปภาพจาก HTML และ CSS รองรับพารามิเตอร์มาตรฐานทั้งหมด เช่น device_scale, viewport_width, viewport_height, ms_delay และอื่นๆ
create_url_image	จับภาพหน้าจอของ URL สาธารณะใดๆ มีตัวเลือกสำหรับ selectors, การตั้งค่า viewport และการบล็อกแบนเนอร์คุกกี้
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 server ใช้ OAuth สำหรับการยืนยันตัวตน เมื่อคุณเชื่อมต่อครั้งแรก เบราว์เซอร์ของคุณจะเปิดขึ้นโดยอัตโนมัติเพื่ออนุญาตการเข้าถึงบัญชี HTML/CSS to Image ของคุณ ไม่จำเป็นต้องกำหนดค่าข้อมูลรับรองด้วยตนเอง

การตั้งค่าสำหรับ Cursor

คลิกปุ่มด้านล่างเพื่อติดตั้ง HTML/CSS to Image MCP server ใน Cursor โดยอัตโนมัติ:

หรือเพิ่มการกำหนดค่าต่อไปนี้ด้วยตนเองในไฟล์ .cursor/mcp.json ของคุณ:

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

รีสตาร์ท Cursor หลังจากบันทึกการกำหนดค่า ครั้งแรกที่คุณใช้เซิร์ฟเวอร์ คุณจะได้รับแจ้งให้อนุญาตการเข้าถึงผ่านเบราว์เซอร์ของคุณ

การตั้งค่าสำหรับ Claude Code

หากต้องการใช้ MCP server กับ Claude Code ให้รันคำสั่งต่อไปนี้:

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

เพื่อตรวจสอบว่าเพิ่มเซิร์ฟเวอร์แล้ว:

claude mcp list

ครั้งแรกที่คุณใช้เซิร์ฟเวอร์ คุณจะได้รับแจ้งให้อนุญาตการเข้าถึงผ่านเบราว์เซอร์ของคุณ

การตั้งค่าสำหรับ Claude Desktop

Claude Desktop (แอปแบบสแตนด์อโลน) รองรับ MCP server เช่นกัน แก้ไขไฟล์การกำหนดค่า 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 server เพิ่มสิ่งต่อไปนี้ในไฟล์ ~/.codeium/windsurf/mcp_config.json ของคุณ:

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

รีสตาร์ท Windsurf หลังจากอัปเดตการกำหนดค่า ครั้งแรกที่คุณใช้เซิร์ฟเวอร์ คุณจะได้รับแจ้งให้อนุญาตการเข้าถึงผ่านเบราว์เซอร์ของคุณ

การตั้งค่าสำหรับ Cline (VS Code)

Cline เป็นเอเจนต์เขียนโค้ดอัตโนมัติยอดนิยมสำหรับ VS Code หากต้องการเพิ่ม MCP server:

1. เปิด VS Code และไปที่ Cline Settings
2. นำทางไปยัง MCP Servers
3. คลิก Add Server และกำหนดค่า:

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

หรือแก้ไขไฟล์การตั้งค่า MCP ของ Cline โดยตรงที่ ~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json

ครั้งแรกที่คุณใช้เซิร์ฟเวอร์ คุณจะได้รับแจ้งให้อนุญาตการเข้าถึงผ่านเบราว์เซอร์ของคุณ

การตั้งค่าสำหรับ Zed

Zed เป็นโปรแกรมแก้ไขโค้ดประสิทธิภาพสูงพร้อมฟีเจอร์ AI เพิ่ม MCP server ในการตั้งค่า Zed ของคุณ (~/.config/zed/settings.json):

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

ครั้งแรกที่คุณใช้เซิร์ฟเวอร์ คุณจะได้รับแจ้งให้อนุญาตการเข้าถึงผ่านเบราว์เซอร์ของคุณ

การตั้งค่าสำหรับ OpenCode

OpenCode เป็นผู้ช่วยเขียนโค้ด AI แบบโอเพนซอร์ส เพิ่ม MCP server ในไฟล์การกำหนดค่า opencode.json ของคุณ:

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

หรือเพิ่มผ่านบรรทัดคำสั่ง:

opencode mcp add

ครั้งแรกที่คุณใช้เซิร์ฟเวอร์ คุณจะได้รับแจ้งให้อนุญาตการเข้าถึงผ่านเบราว์เซอร์ของคุณ

แพลตฟอร์มอัตโนมัติ

คุณยังสามารถใช้ MCP server กับแพลตฟอร์มอัตโนมัติ:

Zapier

Zapier มี MCP Client เฉพาะที่เชื่อมต่อกับ MCP server ซึ่งช่วยให้คุณใช้ HTML/CSS to Image MCP server ภายในเวิร์กโฟลว์ Zapier ได้โดยไม่ต้องเขียนโค้ด

การผสานรวม Zapier MCP Client

Pipedream

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

การผสานรวม Pipedream MCP

MCP server ยังถูกระบุไว้บน Smithery ด้วย

ตัวอย่างพรอมต์

เมื่อกำหนดค่าแล้ว คุณสามารถขอให้ผู้ช่วย AI สร้างรูปภาพได้อย่างเป็นธรรมชาติ นี่คือตัวอย่างบางส่วน:

สร้างรูปภาพจาก HTML:

• “สร้างรูปภาพปุ่มสีน้ำเงินที่มีข้อความ ‘Subscribe Now’ พร้อมมุมโค้งและเงาอ่อนๆ”
• “สร้างการ์ดโซเชียลที่มีพื้นหลังแบบไล่เฉดและชื่อ ‘Hello World’”

จับภาพหน้าจอเว็บไซต์:

• “จับภาพหน้าจอของ https://stripe.com โดยตั้งค่า device_scale เป็น 2 เพื่อความละเอียดสูง”
• “จับภาพหน้าจอตารางราคาบน https://example.com/pricing โดยใช้ selector ‘.pricing-grid’”

สร้างรูปภาพโซเชียลมีเดีย:

• “สร้างการ์ด Twitter/X ที่มีพื้นหลังแบบไล่เฉด ชื่อ ‘Launching Soon’ และโลโก้ของเรา”
• “สร้างรูปภาพ Open Graph สำหรับโพสต์บล็อกของฉันเกี่ยวกับ Python”

สร้างรูปภาพเป็นชุด:

• “สร้างรูปภาพการ์ดผลิตภัณฑ์ 10 แบบ แต่ละแบบมีสีพื้นหลังต่างกัน”

ทำงานกับเทมเพลต:

• “แสดงรายการเทมเพลตที่บันทึกไว้ของฉัน”
• “สร้างรูปภาพโดยใช้เทมเพลต ‘social-card’ ของฉันโดยตั้งชื่อเป็น ‘New Feature Release’”
• “บันทึก HTML/CSS นี้เป็นเทมเพลตชื่อ ‘blog-header’ เพื่อให้ฉันนำกลับมาใช้ใหม่ได้”

หากคุณออกแบบเทมเพลตในแดชบอร์ดก่อน เอกสาร Template Editor สามารถช่วยคุณเลือกบล็อก ตั้งค่าตัวแปร และตัดสินใจว่าค่าใดที่ MCP server ควรส่งเป็น template_values

พารามิเตอร์รูปภาพ

เมื่อสร้างรูปภาพ พารามิเตอร์หลักคือ:

พารามิเตอร์	ชนิด	คำอธิบาย
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	ตั้งค่าเป็น true เพื่อใช้ฟอนต์อีโมจิเนทีฟแทน Twemoji
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()
selector	String	ตัดรูปภาพให้เหลือองค์ประกอบที่ตรงกับ CSS selector นี้ เช่น 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	ตั้งค่าความสูงของ viewport ของ Chrome ต้องตั้งค่าทั้งสองมิติเมื่อใช้อย่างใดอย่างหนึ่ง
viewport_landscape	Boolean	ตั้งค่า viewport ของ Chrome เป็นโหมดแนวนอน
viewport_mobile	Boolean	ตั้งค่า viewport ของ Chrome เพื่อจำลองอุปกรณ์มือถือ
viewport_touch	Boolean	ตั้งค่า viewport ของ Chrome เพื่อรองรับเหตุการณ์สัมผัส
viewport_width	Integer	ตั้งค่าความกว้างของ viewport ของ Chrome ต้องตั้งค่าทั้งสองมิติเมื่อใช้อย่างใดอย่างหนึ่ง

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

ข้อผิดพลาดการยืนยันตัวตน

หากคุณได้รับข้อผิดพลาดการยืนยันตัวตน:

• ลองตัดการเชื่อมต่อและเชื่อมต่อ MCP server ใหม่เพื่อเริ่มโฟลว์ OAuth ใหม่
• ตรวจสอบว่าคุณเข้าสู่ระบบบัญชี HTML/CSS to Image ที่ถูกต้องในเบราว์เซอร์ของคุณ
• ตรวจสอบว่าป๊อปอัปไม่ถูกบล็อกเมื่อหน้าต่าง OAuth พยายามเปิด

ปัญหาการเชื่อมต่อ

หาก MCP server ไม่เชื่อมต่อ:

• ตรวจสอบให้แน่ใจว่าเครือข่ายของคุณอนุญาตการเชื่อมต่อ HTTPS ขาออก
• ตรวจสอบว่า URL ตรงกับ https://mcp.hcti.io ทุกประการ
• รีสตาร์ทผู้ช่วย AI ของคุณหลังจากการอัปเดตการกำหนดค่า

ข้อผิดพลาดในการสร้างภาพ

หากการสร้างภาพล้มเหลว:

• ตรวจสอบว่าบัญชีของคุณมีเครดิตภาพเพียงพอบน แดชบอร์ด
• ตรวจสอบว่าเนื้อหา HTML ถูกต้อง
• สำหรับการจับภาพหน้าจอจาก URL ให้ตรวจสอบว่า URL นั้นสามารถเข้าถึงได้สาธารณะ

---

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

พูดคุยกับมนุษย์ เรายินดีให้ความช่วยเหลือ กรุณาส่งอีเมลถึงเราได้ที่ support@htmlcsstoimage.com พร้อมคำถามใด ๆ และเราจะช่วยคุณเริ่มต้นได้อย่างเต็มที่