HTML/CSS to Image

Tích hợp MCP Server HTML/CSS to Image

Chụp ảnh màn hình trang web, hiển thị hình ảnh hoặc PDF, và quản lý tài nguyên của tổ chức bạn trực tiếp từ trợ lý AI.

Giới thiệu

Dù bạn sử dụng công cụ AI hoặc agent nào, bạn đều có thể kết nối nó với HTML/CSS to Image thông qua MCP. Cung cấp cho bất kỳ trợ lý tương thích nào một URL công khai hoặc HTML/CSS, và yêu cầu nó chụp ảnh màn hình, hiển thị PDF, hoặc tạo hình ảnh từ các mẫu đã lưu của bạn.

• Bắt đầu miễn phí. Tài khoản HCTI miễn phí hoạt động với mọi tích hợp. Việc tạo hình ảnh sử dụng tín dụng hình ảnh có sẵn của tổ chức bạn giống như API.
• Đăng nhập an toàn. Ủy quyền tài khoản của bạn thông qua OAuth trong trình duyệt, mà không cần sao chép khóa API vào trợ lý của bạn.
• Không cần quản lý hạ tầng trình duyệt. HCTI xử lý việc hiển thị và trả về một URL được lưu trữ mà bạn có thể mở, tải xuống, hoặc chia sẻ.

Bạn cũng có thể yêu cầu trợ lý của mình cấu hình proxy, đích lưu trữ, và hình ảnh Open Graph tự động thông qua khả năng Management API. Các thao tác này yêu cầu quyền OAuth bổ sung; quản lý khóa API chỉ dành riêng cho REST.

Chọn ứng dụng khách của bạn

Chọn trợ lý của bạn để xem hướng dẫn thiết lập và các ví dụ có thể sao chép.

Ứng dụng khách	Cách kết nối
ChatGPT & Codex	Cài đặt plugin chính thức; sử dụng trong cuộc trò chuyện hoặc tác vụ lập trình.
Claude & Claude Code	Cài đặt từ Claude Connectors Directory, hoặc kết nối Claude Code.
Cline	Kết nối máy chủ HTTP Streamable từ tiện ích mở rộng Cline.
Cursor	Thêm HCTI vào Cursor Agent bằng nút cài đặt hoặc cấu hình MCP.
Gemini CLI	Kết nối Gemini CLI với máy chủ HTTP từ xa và đăng nhập qua trình duyệt.
GitHub Copilot	Kết nối Copilot CLI từ terminal của bạn.
Grok	Sử dụng plugin HCTI hoặc kết nối MCP trực tiếp trong Grok Build.
JetBrains IDEs	Kết nối AI Assistant thông qua cầu nối MCP hỗ trợ OAuth.
OpenCode	Cấu hình máy chủ MCP từ xa và ủy quyền từ CLI.
VS Code	Thêm máy chủ HTTP từ xa và sử dụng các công cụ của nó trong chế độ Copilot Agent.
Windsurf	Kết nối HCTI với Cascade để chụp ảnh màn hình và hiển thị.
Zed	Thêm máy chủ MCP từ xa vào Agent Panel.

MCP là gì?

Model Context Protocol cho phép trợ lý gọi các công cụ bên ngoài. Máy chủ MCP được lưu trữ của HCTI hiển thị HTML/CSS hoặc URL công khai do trợ lý của bạn cung cấp và trả về kết quả. Bạn không cần tự chạy trình duyệt hiển thị.

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

Giao thức vận chuyển: HTTP Streamable

Xác thực: OAuth

Plugin agent của chúng tôi cũng đóng gói hướng dẫn quy trình làm việc để sử dụng HCTI. Nơi ứng dụng khách hỗ trợ plugin đó, việc cài đặt nó cung cấp cả kết nối và hướng dẫn cho trợ lý. Kết nối MCP trực tiếp cung cấp quyền truy cập vào các công cụ bên dưới.

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

Các công cụ cốt lõi này hoạt động trên các ứng dụng khách MCP. Quyền truy cập phụ thuộc vào quyền được phê duyệt cho kết nối của bạn. Hãy yêu cầu trợ lý của bạn sử dụng HCTI theo tên.

Sử dụng tài khoản

Công cụ	Chức năng
check_usage	Kiểm tra số hình ảnh đã sử dụng, hạn mức hình ảnh, lần đặt lại tiếp theo và cài đặt vượt mức mà không cần hiển thị hình ảnh.

Chụp ảnh màn hình và hiển thị

Công cụ	Chức năng
create_image	Hiển thị HTML/CSS dưới dạng PNG, JPG, WebP hoặc PDF. Hỗ trợ device_scale, viewport_width, viewport_height và ms_delay.
create_url_image	Chụp một trang công khai hoặc bộ chọn CSS, với cài đặt viewport và chặn biểu ngữ cookie.
create_templated_image	Hiển thị một mẫu đã lưu với template_id và template_values.
create_batch_images	Hiển thị các biến thể với default_options dùng chung và các biến thể theo từng hình ảnh.
get_max_batch_size	Kiểm tra giới hạn hàng loạt của tài khoản trước khi chuẩn bị một lô.

Phản hồi

Công cụ	Chức năng
submit_feedback	Báo cáo lỗi, yêu cầu tính năng và đề xuất cải tiến cho nhóm HCTI. Xem tham chiếu công cụ phản hồi.

Quản lý mẫu

Công cụ	Chức năng
create_template	Lưu HTML/CSS dưới dạng mẫu tái sử dụng với các biến.
update_template	Cập nhật một mẫu hiện có theo ID.
list_templates	Tìm các mẫu trong tài khoản đã kết nối.
list_template_versions	Kiểm tra lịch sử phiên bản của một mẫu.

Xem tham số hiển thị và Trình chỉnh sửa mẫu để biết các tùy chọn hình ảnh và thiết kế tái sử dụng. Tham chiếu công cụ đầy đủ cũng bao gồm proxy, đích lưu trữ, cấu hình Open Graph và các quyền bắt buộc.

Xác thực

Sau khi thêm HCTI, hãy sử dụng hành động kết nối hoặc đăng nhập của ứng dụng khách và hoàn tất ủy quyền trong trình duyệt của bạn. Đăng nhập vào tài khoản HCTI có mẫu và tín dụng mà bạn muốn sử dụng, xem lại tổ chức và quyền đã chọn, sau đó quay lại trợ lý. Mở Thêm quyền để chọn quyền truy cập quản lý bổ sung nếu cần. Một số ứng dụng khách tự động nhắc khi sử dụng lần đầu; các hướng dẫn riêng lẻ cho thấy cách kết nối một cách tường minh.

Để kiểm tra kết nối mà không cần hiển thị hình ảnh, hãy hỏi: “Sử dụng HCTI để kiểm tra mức sử dụng hình ảnh và giới hạn tài khoản của tôi.” Công cụ check_usage yêu cầu usage:read và trả về mức sử dụng và giới hạn mà không cần hiển thị hình ảnh. get_max_batch_size cũng yêu cầu usage:read. Các yêu cầu hiển thị sử dụng hạn mức hình ảnh của tài khoản HCTI của bạn; gói đăng ký trợ lý của bạn là riêng biệt.

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

Cách chụp ảnh màn hình trang web

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.

Mở URL được trả về để kiểm tra ảnh chụp. Để chụp chỉ một phần trang web của bạn, hãy cung cấp bộ chọn CSS như .pricing-grid thực sự tồn tại trên trang đó. HCTI phải có thể truy cập URL từ dịch vụ được lưu trữ của nó; localhost không thể truy cập được.

Cách hiển thị HTML và CSS dưới dạng 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.

Kết quả sẽ hiển thị văn bản trắng được căn giữa trên một thẻ màu xanh đậm. Trợ lý gửi HTML/CSS đến HCTI để hiển thị. Khi làm việc từ một kho lưu trữ, hãy yêu cầu nó đọc các tệp liên quan và cung cấp đánh dấu và kiểu dáng khép kín; các đường dẫn tài nguyên cục bộ cần được thay thế bằng các tài nguyên có thể truy cập.

Cách xuất 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.

Cách tái sử dụng mẫu và tạo biến thể

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.

Sử dụng Trình chỉnh sửa mẫu để thiết kế một mẫu và xác định các giá trị mà trợ lý của bạn nên truyền dưới dạng template_values.

Cách kiểm tra tài nguyên của tổ chức

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

Phê duyệt og_configs:read cho ví dụ này. Để tạo hoặc cập nhật cấu hình, cũng phê duyệt og_configs:create_update. Xem tham chiếu công cụ để biết các thao tác quản lý proxy, đích lưu trữ và OG.

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 đối với 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 đối với create_url_image.

Tham số bổ sung

Tên	Loại	Mô tả
additional_header_origins	Array	Cho phép tùy chỉnh headers 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 nhau 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ị được phép khác nhau tùy 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	Hình ảnh HTML/CSS và mẫu sử dụng Twemoji theo mặc định; đặt true để tắt. Hình ảnh URL chỉ chèn Twemoji khi được đặt rõ ràng thành false.
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 có 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 màn hình URL. Tiêu đề bị giới hạn ở 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 màn hình URL.
include_headers_on_subrequests	Boolean	Cũng thêm headers tùy chỉnh vào các yêu cầu phụ cùng nguồn gốc và các yêu cầu phụ 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 phương tiện CSS 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().
request_overrides	Array	Chặn các yêu cầu mạng của trình duyệt khớp với mẫu ký tự đại diện URL và/hoặc loại tài nguyên. Yêu cầu gói trả phí.
selector	String	Cắt hình ảnh theo 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 đã kết xuất 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 bằng mã định danh IANA như America/New_York.
transparent_background	Boolean	Đặt thành true để kết xuất 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 Chrome ở chế độ ngang.
viewport_mobile	Boolean	Đặt khung nhìn Chrome để mô phỏng thiết bị di động.
viewport_touch	Boolean	Đặt khung nhìn Chrome để hỗ trợ 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ở

Lỗi quyền

Một công cụ được liệt kê có thể yêu cầu quyền mà kết nối của bạn không có. Ngắt kết nối và kết nối lại HCTI, sau đó phê duyệt quyền truy cập cần thiết cho tổ chức dự định. Làm mới mã thông báo hiện có không thêm quyền. Không thử lại một thao tác bị từ chối cho đến khi quyền truy cập thay đổi. Xem ủy quyền MCP.

Lỗi giới hạn tốc độ

Giới hạn công cụ quản lý được chia sẻ với các yêu cầu REST cho tổ chức của bạn. Chờ 60 giây trước khi thử lại một công cụ bị giới hạn tốc độ; xem giới hạn tốc độ.

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 kết nối HTTPS đ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 khả dụng 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

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 MCP Client 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ủ MCP HTML/CSS to Image trong các quy trình làm việc của Zapier mà không cần viết mã.

MCP client của Zapier

Pipedream

Pipedream hỗ trợ các 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ủ MCP HTML/CSS to Image để tự động hóa việc tạo hình ảnh trong các quy trình làm việc của Pipedream.

Tích hợp MCP của Pipedream

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

Cần trợ giúp?

Nói chuyện với một con người. Gửi email đến support@htmlcsstoimage.com và chúng tôi sẽ giúp bạn bắt đầu.