HTML/CSS to Image

Tích hợp máy chủ MCP

Tạo hình ảnh với trợ lý AI bằng Giao thức Ngữ cảnh Mô hình (Model Context Protocol).

Tính năng mới

Máy chủ MCP là một tính năng mới. Chúng tôi rất mong nhận được phản hồi từ bạn! Hãy gửi email cho chúng tôi theo địa chỉ support@htmlcsstoimage.com.

---

MCP là gì?

Giao thức Ngữ cảnh Mô hình (MCP) là một tiêu chuẩn mở cho phép các trợ lý AI kết nối với các công cụ và dịch vụ bên ngoài. Với máy chủ MCP của chúng tôi, bạn có thể tạo hình ảnh trực tiếp từ trợ lý lập trình AI mà không cần viết bất kỳ mã nào.

Chỉ cần mô tả những gì bạn muốn, và AI sẽ sử dụng API HTML/CSS to Image để tạo ra nó cho bạn.

URL máy chủ MCP: mcp.hcti.io

Các công cụ có sẵn

Máy chủ MCP cung cấp các công cụ sau:

Tạo hình ảnh

Công cụ	Mô tả
create_image	Tạo hình ảnh từ HTML và CSS. Hỗ trợ tất cả các tham số tiêu chuẩn như device_scale, viewport_width, viewport_height, ms_delay, và nhiều hơn nữa.
create_url_image	Chụp ảnh màn hình của bất kỳ URL công khai nào. Bao gồm các tùy chọn cho bộ chọn, cài đặt khung nhìn và chặn biểu ngữ cookie.
create_templated_image	Tạo hình ảnh bằng cách sử dụng một mẫu đã lưu. Truyền template_id và template_values để thay thế các biến trong mẫu của bạn.
create_batch_images	Tạo tối đa 25 hình ảnh trong một yêu cầu duy nhất. Đặt default_options và cung cấp variations cho mỗi hình ảnh.
get_max_batch_size	Kiểm tra số lượng hình ảnh tối đa bạn có thể tạo trong một lô dựa trên gói của bạn.

Quản lý mẫu

Công cụ	Mô tả
create_template	Lưu một mẫu HTML/CSS có thể tái sử dụng để tạo hình ảnh với thay thế biến.
update_template	Sửa đổi một mẫu hiện có bằng cách cung cấp template_id và nội dung mới.
list_templates	Xem tất cả các mẫu đã lưu trong tài khoản của bạn. Trả về tối đa 100 mẫu cho mỗi yêu cầu.
list_template_versions	Xem lịch sử phiên bản của một mẫu cụ thể.

Xác thực

Máy chủ MCP sử dụng OAuth để xác thực. Khi bạn kết nối lần đầu, trình duyệt của bạn sẽ tự động mở để ủy quyền truy cập vào tài khoản HTML/CSS to Image của bạn. Không cần cấu hình thông tin xác thực thủ công.

Thiết lập cho Cursor

Nhấp vào nút bên dưới để tự động cài đặt máy chủ HTML/CSS to Image MCP trong Cursor:

Hoặc thêm thủ công cấu hình sau vào tệp .cursor/mcp.json của bạn:

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

Khởi động lại Cursor sau khi lưu cấu hình. Lần đầu tiên bạn sử dụng máy chủ, bạn sẽ được nhắc ủy quyền truy cập qua trình duyệt của mình.

Thiết lập cho Claude Code

Để sử dụng máy chủ MCP với Claude Code, chạy lệnh sau:

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

Để xác minh máy chủ đã được thêm:

claude mcp list

Lần đầu tiên bạn sử dụng máy chủ, bạn sẽ được nhắc ủy quyền truy cập qua trình duyệt của mình.

Thiết lập cho Claude Desktop

Claude Desktop (ứng dụng độc lập) cũng hỗ trợ máy chủ MCP. Chỉnh sửa tệp cấu hình Claude Desktop của bạn:

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

Windows: %APPDATA%\Claude\claude_desktop_config.json

Thêm cấu hình sau:

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

Khởi động lại Claude Desktop sau khi lưu cấu hình. Lần đầu tiên bạn sử dụng máy chủ, bạn sẽ được nhắc ủy quyền truy cập qua trình duyệt của mình.

Thiết lập cho Windsurf

Windsurf (bởi Codeium) hỗ trợ máy chủ MCP. Thêm nội dung sau vào tệp ~/.codeium/windsurf/mcp_config.json của bạn:

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

Khởi động lại Windsurf sau khi cập nhật cấu hình. Lần đầu tiên bạn sử dụng máy chủ, bạn sẽ được nhắc ủy quyền truy cập qua trình duyệt của mình.

Thiết lập cho Cline (VS Code)

Cline là một tác nhân lập trình tự động phổ biến cho VS Code. Để thêm máy chủ MCP:

1. Mở VS Code và đi đến Cài đặt Cline
2. Điều hướng đến Máy chủ MCP
3. Nhấp Thêm máy chủ và cấu hình:

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

Ngoài ra, bạn có thể chỉnh sửa trực tiếp tệp cài đặt MCP của Cline tại ~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json.

Lần đầu tiên bạn sử dụng máy chủ, bạn sẽ được nhắc ủy quyền truy cập qua trình duyệt của mình.

Thiết lập cho Zed

Zed là một trình soạn thảo mã hiệu suất cao với các tính năng AI. Thêm máy chủ MCP vào cài đặt Zed của bạn (~/.config/zed/settings.json):

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

Lần đầu tiên bạn sử dụng máy chủ, bạn sẽ được nhắc ủy quyền truy cập qua trình duyệt của mình.

Thiết lập cho OpenCode

OpenCode là một trợ lý lập trình AI mã nguồn mở. Thêm máy chủ MCP vào tệp cấu hình opencode.json của bạn:

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

Ngoài ra, thêm nó qua dòng lệnh:

opencode mcp add

Lần đầu tiên bạn sử dụng máy chủ, bạn sẽ được nhắc ủy quyền truy cập qua trình duyệt của mình.

Nền tảng tự động hóa

Bạn cũng có thể sử dụng máy chủ MCP với các nền tảng tự động hóa:

Zapier

Zapier có một Máy khách MCP chuyên dụng kết nối với các máy chủ MCP. Điều này cho phép bạn sử dụng máy chủ HTML/CSS to Image MCP trong các quy trình làm việc của Zapier mà không cần viết mã.

Tích hợp Máy khách MCP Zapier

Pipedream

Pipedream hỗ trợ máy chủ MCP để xây dựng các quy trình làm việc không máy chủ. Kết nối máy chủ HTML/CSS to Image MCP để tự động hóa việc tạo hình ảnh trong các quy trình làm việc Pipedream của bạn.

Tích hợp MCP Pipedream

Máy chủ MCP cũng được liệt kê trên Smithery.

Ví dụ về lời nhắc

Sau khi được cấu hình, bạn có thể yêu cầu trợ lý AI của mình tạo hình ảnh một cách tự nhiên. Dưới đây là một số ví dụ:

Tạo hình ảnh từ HTML:

• “Tạo hình ảnh một nút màu xanh có dòng chữ ‘Đăng ký ngay’ với các góc bo tròn và bóng đổ nhẹ”
• “Tạo một thẻ mạng xã hội với nền gradient và tiêu đề ‘Xin chào thế giới’”

Chụp ảnh màn hình một trang web:

• “Chụp ảnh màn hình của https://stripe.com với device_scale được đặt thành 2 để có độ phân giải cao”
• “Chụp ảnh màn hình bảng giá trên https://example.com/pricing bằng bộ chọn ‘.pricing-grid’”

Tạo hình ảnh mạng xã hội:

• “Tạo hình ảnh thẻ Twitter/X với nền gradient, tiêu đề ‘Sắp ra mắt’ và logo của chúng tôi”
• “Tạo hình ảnh Open Graph cho bài viết blog của tôi về Python”

Tạo hàng loạt hình ảnh:

• “Tạo 10 biến thể của hình ảnh thẻ sản phẩm, mỗi biến thể có màu nền khác nhau”

Làm việc với các mẫu:

• “Liệt kê các mẫu đã lưu của tôi”
• “Tạo hình ảnh bằng mẫu ‘social-card’ của tôi với tiêu đề được đặt thành ‘Phát hành tính năng mới’”
• “Lưu HTML/CSS này dưới dạng mẫu có tên ‘blog-header’ để tôi có thể tái sử dụng”

Nếu bạn thiết kế các mẫu trong bảng điều khiển trước, tài liệu Trình chỉnh sửa mẫu có thể giúp bạn chọn khối, thiết lập biến và quyết định giá trị mà máy chủ MCP nên truyền dưới dạng template_values.

Tham số hình ảnh

Khi tạo hình ảnh, các tham số chính là:

Tham số	Loại	Mô tả
html	String	Nội dung HTML cần hiển thị. Bắt buộc cho create_image.
css	String	Kiểu CSS cho HTML của bạn.
url	String	URL cần chụp ảnh màn hình. Bắt buộc cho create_url_image.

Tham số bổ sung

Tên	Loại	Mô tả
additional_header_origins	Array	Cho phép headers tùy chỉnh trên các yêu cầu đến các nguồn gốc HTTP hoặc HTTPS bổ sung cụ thể.
block_consent_banners	Boolean	Khi được đặt thành true, tự động chặn các biểu ngữ đồng ý cookie và cửa sổ bật lên trên các trang web. Hữu ích nhất cho ảnh chụp màn hình URL.
color_scheme	String	Đặt Chrome hiển thị ở chế độ light hoặc dark. Ảnh hưởng đến các trang web sử dụng prefers-color-scheme.
dedupe_duration_s	Integer	Tái sử dụng một hình ảnh gần đây giống hệt mà không tiêu tốn tín dụng hình ảnh. Đặt cửa sổ xem lại tính bằng giây; giá trị mặc định và giá trị cho phép thay đổi theo loại hình ảnh và gói.
device_scale	Double	Kiểm soát độ phân giải bằng cách điều chỉnh tỷ lệ pixel từ 0.1 đến 3. Giá trị cao hơn làm tăng chất lượng hình ảnh và kích thước tệp.
disable_twemoji	Boolean	Đặt thành true để sử dụng phông chữ biểu tượng cảm xúc gốc thay vì Twemoji.
format	String	Chọn phần mở rộng tệp trong URL hình ảnh được trả về ban đầu: png, jpg, webp hoặc pdf.
full_screen	Boolean	Tạo hình ảnh với toàn bộ chiều cao của một trang URL.
google_fonts	String	Tải một hoặc nhiều phông chữ Google, chẳng hạn như Roboto|Open Sans.
headers	Object	Thêm tiêu đề HTTP tùy chỉnh khi chụp ảnh màn hình một URL. Tiêu đề bị giới hạn trong nguồn gốc của URL được yêu cầu và bất kỳ additional_header_origins nào.
identify_as_hcti	Boolean	Thêm X-HCTI-SCREENSHOT: 1 vào yêu cầu cấp cao nhất khi chụp ảnh màn hình một URL.
include_headers_on_subrequests	Boolean	Cũng thêm headers tùy chỉnh vào các yêu cầu con cùng nguồn gốc và các yêu cầu con khớp với additional_header_origins.
jumbo_max_height	Integer	Chiều cao đầu ra tối đa ở chế độ jumbo, lên đến 80,000 pixel. Phải được đặt cùng với jumbo_max_width và tiêu tốn thêm tín dụng hình ảnh.
jumbo_max_width	Integer	Chiều rộng đầu ra tối đa ở chế độ jumbo, lên đến 80,000 pixel. Phải được đặt cùng với jumbo_max_height và tiêu tốn thêm tín dụng hình ảnh.
max_wait_ms	Integer	Đặt giới hạn thời gian tối đa từ 500 đến 10000 mili giây để chờ trước khi chụp ảnh màn hình.
media_type	String	Đặt Chrome hiển thị bằng cách sử dụng kiểu CSS media screen hoặc print.
ms_delay	Integer	Trì hoãn trước khi tạo hình ảnh. Hữu ích khi chờ JavaScript; bắt đầu với 500 mili giây.
pdf_options	Object	Tùy chỉnh đầu ra PDF với kích thước trang, lề, tỷ lệ và in nền.
proxy_id	String	Định tuyến lưu lượng truy cập đi qua một trong các proxy HTTP đã cấu hình của tổ chức bạn. Khả dụng trên gói 10.000 hình ảnh/tháng trở lên.
render_when_ready	Boolean	Chờ để tạo hình ảnh cho đến khi JavaScript gọi ScreenshotReady().
selector	String	Cắt hình ảnh đến một phần tử khớp với bộ chọn CSS này, chẳng hạn như section#complete-toolkit.container-lg.
storage_destination_id	String	Lưu các tệp đã hiển thị vào một trong các đích lưu trữ đã cấu hình của tổ chức bạn. Khả dụng trên gói 10.000 hình ảnh/tháng trở lên.
timezone	String	Đặt múi giờ của Chrome với mã định danh IANA chẳng hạn như America/New_York.
transparent_background	Boolean	Đặt thành true để hiển thị với nền trong suốt.
viewport_height	Integer	Đặt chiều cao của khung nhìn Chrome. Cả hai kích thước phải được đặt khi sử dụng một trong hai.
viewport_landscape	Boolean	Đặt khung nhìn của Chrome ở chế độ ngang.
viewport_mobile	Boolean	Đặt khung nhìn của Chrome để mô phỏng thiết bị di động.
viewport_touch	Boolean	Đặt khung nhìn của Chrome để hỗ trợ các sự kiện chạm.
viewport_width	Integer	Đặt chiều rộng của khung nhìn Chrome. Cả hai kích thước phải được đặt khi sử dụng một trong hai.

Xử lý sự cố

Lỗi xác thực

Nếu bạn nhận được lỗi xác thực:

• Thử ngắt kết nối và kết nối lại máy chủ MCP để kích hoạt luồng OAuth mới
• Đảm bảo bạn đã đăng nhập vào đúng tài khoản HTML/CSS to Image trong trình duyệt của mình
• Kiểm tra rằng cửa sổ bật lên không bị chặn khi cửa sổ OAuth cố mở

Sự cố kết nối

Nếu máy chủ MCP không kết nối:

• Đảm bảo mạng của bạn cho phép các kết nối HTTPS đi ra ngoài
• Kiểm tra rằng URL chính xác là https://mcp.hcti.io
• Khởi động lại trợ lý AI của bạn sau khi cập nhật cấu hình

Lỗi tạo hình ảnh

Nếu hình ảnh không tạo được:

• Kiểm tra rằng tài khoản của bạn có đủ tín dụng hình ảnh trên bảng điều khiển
• Đảm bảo nội dung HTML hợp lệ
• Đối với ảnh chụp màn hình URL, hãy xác minh URL có thể truy cập công khai

---

Cần trợ giúp?

Hãy liên hệ với con người. Vui lòng gửi email cho chúng tôi theo địa chỉ support@htmlcsstoimage.com nếu có bất kỳ câu hỏi nào và chúng tôi sẽ sẵn lòng giúp bạn bắt đầu.