HTML/CSS to Image

Mengintegrasikan Server MCP HTML/CSS to Image

Ambil tangkapan layar situs web, render gambar atau PDF, dan kelola sumber daya organisasi Anda langsung dari asisten AI Anda.

Pendahuluan

Tidak peduli alat atau agen AI apa yang Anda gunakan, Anda dapat menghubungkannya ke HTML/CSS to Image melalui MCP. Berikan URL publik atau HTML/CSS ke asisten yang kompatibel, dan minta untuk mengambil tangkapan layar, merender PDF, atau membuat gambar dari template tersimpan Anda.

• Mulai gratis. Akun HCTI gratis berfungsi dengan integrasi apa pun. Membuat gambar menggunakan kredit gambar organisasi Anda yang tersedia seperti halnya API.
• Masuk dengan aman. Otorisasi akun Anda melalui OAuth di browser Anda, tanpa menyalin kunci API ke asisten Anda.
• Tidak perlu mengelola infrastruktur browser. HCTI menangani rendering dan mengembalikan URL yang di-hosting yang dapat Anda buka, unduh, atau bagikan.

Anda juga dapat meminta asisten Anda untuk mengonfigurasi proxy, tujuan penyimpanan, dan gambar Open Graph otomatis melalui kemampuan Management API. Operasi ini memerlukan izin OAuth tambahan; manajemen kunci API hanya melalui REST.

Pilih klien Anda

Pilih asisten Anda untuk petunjuk pengaturan dan contoh yang dapat disalin.

Klien	Cara menghubungkan
ChatGPT & Codex	Instal plugin resmi; gunakan dalam percakapan atau tugas coding.
Claude & Claude Code	Instal dari Direktori Konektor Claude, atau hubungkan Claude Code.
Cline	Hubungkan server HTTP Streamable dari ekstensi Cline.
Cursor	Tambahkan HCTI ke Cursor Agent dengan tombol instal atau konfigurasi MCP.
Gemini CLI	Hubungkan Gemini CLI dengan server HTTP jarak jauh dan masuk melalui browser.
GitHub Copilot	Hubungkan Copilot CLI dari terminal Anda.
Grok	Gunakan plugin HCTI atau koneksi MCP langsung di Grok Build.
JetBrains IDEs	Hubungkan AI Assistant melalui jembatan MCP yang mendukung OAuth.
OpenCode	Konfigurasikan server MCP jarak jauh dan otorisasi dari CLI.
VS Code	Tambahkan server HTTP jarak jauh dan gunakan alatnya dalam mode Copilot Agent.
Windsurf	Hubungkan HCTI ke Cascade untuk tangkapan layar dan rendering.
Zed	Tambahkan server MCP jarak jauh ke Panel Agen.

Apa itu MCP?

Model Context Protocol memungkinkan asisten memanggil alat eksternal. Server MCP yang di-hosting HCTI merender HTML/CSS atau URL publik yang disuplai oleh asisten Anda dan mengembalikan hasilnya. Anda tidak perlu menjalankan browser rendering sendiri.

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

Transport: Streamable HTTP

Autentikasi: OAuth

Plugin agen kami juga mengemas panduan alur kerja untuk menggunakan HCTI. Jika klien mendukung plugin tersebut, menginstalnya menyediakan koneksi dan instruksi untuk asisten. Koneksi MCP langsung memberikan akses ke alat-alat di bawah ini.

Alat yang tersedia

Alat inti ini berfungsi di semua klien MCP. Akses tergantung pada izin yang disetujui untuk koneksi Anda. Minta asisten Anda untuk menggunakan HCTI dengan menyebut namanya.

Penggunaan akun

Alat	Fungsinya
check_usage	Periksa gambar yang digunakan, jatah gambar, reset berikutnya, dan pengaturan kelebihan tanpa merender gambar.

Tangkapan layar dan rendering

Alat	Fungsinya
create_image	Render HTML/CSS sebagai PNG, JPG, WebP, atau PDF. Mendukung device_scale, viewport_width, viewport_height, dan ms_delay.
create_url_image	Tangkap halaman publik atau pemilih CSS, dengan pengaturan viewport dan pemblokiran spanduk cookie.
create_templated_image	Render template tersimpan dengan template_id dan template_values.
create_batch_images	Render variasi dengan default_options bersama dan variasi per gambar.
get_max_batch_size	Periksa batas batch akun sebelum menyiapkan batch.

Umpan balik

Alat	Fungsinya
submit_feedback	Laporkan bug, minta fitur, dan sarankan perbaikan ke tim HCTI. Lihat referensi alat umpan balik.

Manajemen template

Alat	Fungsinya
create_template	Simpan HTML/CSS sebagai template yang dapat digunakan kembali dengan variabel.
update_template	Perbarui template yang ada berdasarkan ID.
list_templates	Temukan template di akun yang terhubung.
list_template_versions	Periksa riwayat versi template.

Lihat parameter rendering dan Template Editor untuk opsi gambar dan desain yang dapat digunakan kembali. Referensi alat lengkap juga mencakup proxy, tujuan penyimpanan, konfigurasi Open Graph, dan izin yang diperlukan.

Autentikasi

Setelah menambahkan HCTI, gunakan tindakan hubungkan atau masuk dari klien Anda dan selesaikan otorisasi di browser Anda. Masuk ke akun HCTI yang template dan kreditnya ingin Anda gunakan, tinjau organisasi dan izin yang dipilih, lalu kembali ke asisten. Buka More Permissions untuk memilih akses manajemen tambahan jika diperlukan. Beberapa klien meminta secara otomatis pada penggunaan pertama; panduan masing-masing menunjukkan cara menghubungkan secara eksplisit.

Untuk memeriksa koneksi tanpa merender gambar, tanyakan: "Gunakan HCTI untuk memeriksa penggunaan gambar dan batas akun saya." Alat check_usage memerlukan usage:read dan mengembalikan penggunaan serta batas tanpa merender gambar. get_max_batch_size juga memerlukan usage:read. Permintaan rendering menggunakan jatah gambar akun HCTI Anda; langganan asisten Anda terpisah.

Contoh prompt

Cara mengambil tangkapan layar situs 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.

Buka URL yang dikembalikan untuk memeriksa hasil tangkapan. Untuk menangkap hanya sebagian dari situs Anda sendiri, berikan pemilih CSS seperti .pricing-grid yang benar-benar ada di halaman tersebut. HCTI harus dapat menjangkau URL dari layanan yang di-hosting; localhost tidak dapat dijangkau.

Cara merender HTML dan CSS sebagai 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.

Hasilnya harus menampilkan teks putih di tengah kartu biru tua. Asisten mengirim HTML/CSS ke HCTI untuk rendering. Saat bekerja dari repositori, minta untuk membaca file yang relevan dan menyuplai markup serta gaya yang mandiri; jalur aset lokal perlu diganti dengan aset yang dapat diakses.

Cara mengekspor 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.

Cara menggunakan kembali template dan membuat variasi

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.

Gunakan Template Editor untuk mendesain template dan menentukan nilai yang harus diteruskan asisten Anda sebagai template_values.

Cara memeriksa sumber daya organisasi

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

Setujui og_configs:read untuk contoh ini. Untuk membuat atau memperbarui konfigurasi, setujui juga og_configs:create_update. Lihat referensi alat untuk operasi proxy, tujuan penyimpanan, dan manajemen OG.

Parameter gambar

Saat membuat gambar, parameter utamanya adalah:

Parameter	Tipe	Deskripsi
html	String	Konten HTML yang akan dirender. Diperlukan untuk create_image.
css	String	Gaya CSS untuk HTML Anda.
url	String	URL untuk ditangkap layarnya. Diperlukan untuk create_url_image.

Parameter tambahan

Nama	Tipe	Deskripsi
additional_header_origins	Array	Izinkan headers kustom pada permintaan ke origin HTTP atau HTTPS tambahan tertentu.
block_consent_banners	Boolean	Saat disetel ke true, secara otomatis memblokir banner persetujuan cookie dan popup di situs web. Paling berguna untuk tangkapan layar URL.
color_scheme	String	Setel Chrome untuk merender dalam mode light atau dark. Mempengaruhi situs web yang menggunakan prefers-color-scheme.
dedupe_duration_s	Integer	Gunakan kembali gambar terbaru yang identik tanpa menghabiskan kredit gambar. Menyetel jendela pencarian mundur dalam detik; nilai default dan nilai yang diizinkan bervariasi menurut jenis gambar dan paket.
device_scale	Double	Kontrol resolusi dengan menyesuaikan rasio piksel dari 0.1 hingga 3. Nilai yang lebih tinggi meningkatkan kualitas gambar dan ukuran file.
disable_twemoji	Boolean	Gambar HTML/CSS dan template menggunakan Twemoji secara default; setel true untuk menonaktifkannya. Gambar URL menyuntikkan Twemoji hanya jika secara eksplisit disetel ke false.
format	String	Pilih ekstensi file di URL gambar yang awalnya dikembalikan: png, jpg, webp, atau pdf.
full_screen	Boolean	Hasilkan gambar dengan tinggi seluruh halaman URL.
google_fonts	String	Muat satu atau lebih font Google, seperti Roboto|Open Sans.
headers	Object	Tambahkan header HTTP kustom saat mengambil tangkapan layar URL. Header dibatasi pada origin URL yang diminta dan additional_header_origins apa pun.
identify_as_hcti	Boolean	Tambahkan X-HCTI-SCREENSHOT: 1 ke permintaan tingkat atas saat mengambil tangkapan layar URL.
include_headers_on_subrequests	Boolean	Juga tambahkan headers kustom ke subpermintaan asal yang sama dan subpermintaan yang cocok dengan additional_header_origins.
jumbo_max_height	Integer	Tinggi keluaran maksimum dalam mode jumbo, hingga 80,000 piksel. Harus disetel dengan jumbo_max_width dan menghabiskan kredit gambar tambahan.
jumbo_max_width	Integer	Lebar keluaran maksimum dalam mode jumbo, hingga 80,000 piksel. Harus disetel dengan jumbo_max_height dan menghabiskan kredit gambar tambahan.
max_wait_ms	Integer	Setel batas waktu maksimum dari 500 hingga 10000 milidetik untuk menunggu sebelum mengambil tangkapan layar.
media_type	String	Setel Chrome untuk merender menggunakan gaya media CSS screen atau print.
ms_delay	Integer	Penundaan sebelum menghasilkan gambar. Berguna saat menunggu JavaScript; mulai dengan 500 milidetik.
pdf_options	Object	Sesuaikan keluaran PDF dengan ukuran halaman, margin, skala, dan pencetakan latar belakang.
proxy_id	String	Rutekan lalu lintas keluar melalui salah satu proxy HTTP yang dikonfigurasi organisasi Anda. Tersedia pada paket 10.000 gambar/bulan atau lebih tinggi.
render_when_ready	Boolean	Tunggu untuk menghasilkan gambar hingga JavaScript memanggil ScreenshotReady().
request_overrides	Array	Blokir permintaan jaringan browser yang cocok dengan pola wildcard URL dan/atau jenis sumber daya. Membutuhkan paket berbayar.
selector	String	Potong gambar ke elemen yang cocok dengan pemilih CSS ini, seperti section#complete-toolkit.container-lg.
storage_destination_id	String	Simpan file yang dirender ke salah satu tujuan penyimpanan yang dikonfigurasi organisasi Anda. Tersedia pada paket 10.000 gambar/bulan atau lebih tinggi.
timezone	String	Setel zona waktu Chrome dengan pengidentifikasi IANA seperti America/New_York.
transparent_background	Boolean	Setel ke true untuk merender dengan latar belakang transparan.
viewport_height	Integer	Setel tinggi viewport Chrome. Kedua dimensi harus disetel saat menggunakan salah satunya.
viewport_landscape	Boolean	Setel viewport Chrome ke mode lanskap.
viewport_mobile	Boolean	Setel viewport Chrome untuk meniru perangkat seluler.
viewport_touch	Boolean	Setel viewport Chrome untuk mendukung peristiwa sentuh.
viewport_width	Integer	Setel lebar viewport Chrome. Kedua dimensi harus disetel saat menggunakan salah satunya.

Pemecahan Masalah

Kesalahan Autentikasi

Jika Anda menerima kesalahan autentikasi:

• Coba putuskan dan sambungkan kembali server MCP untuk memicu alur OAuth baru
• Pastikan Anda masuk ke akun HTML/CSS to Image yang benar di browser Anda
• Periksa bahwa pop-up tidak diblokir saat jendela OAuth mencoba terbuka

Kesalahan Izin

Alat yang terdaftar mungkin memerlukan izin yang tidak dimiliki koneksi Anda. Putuskan dan sambungkan kembali HCTI, lalu setujui akses yang diperlukan untuk organisasi yang dituju. Menyegarkan token yang ada tidak menambahkan izin. Jangan mencoba ulang operasi yang ditolak sampai akses berubah. Lihat otorisasi MCP.

Kesalahan Batas Kecepatan

Batas alat manajemen dibagikan dengan permintaan REST untuk organisasi Anda. Tunggu 60 detik sebelum mencoba ulang alat yang terkena batas kecepatan; lihat batas kecepatan.

Masalah Koneksi

Jika server MCP tidak terhubung:

• Pastikan jaringan Anda mengizinkan koneksi HTTPS keluar
• Periksa bahwa URL persis https://mcp.hcti.io
• Mulai ulang asisten AI Anda setelah memperbarui konfigurasi

Kesalahan Pembuatan Gambar

Jika gambar gagal dibuat:

• Periksa bahwa akun Anda memiliki kredit gambar yang tersedia di dasbor
• Pastikan konten HTML valid
• Untuk tangkapan layar URL, verifikasi bahwa URL dapat diakses publik

Platform Otomatisasi

Anda juga dapat menggunakan server MCP dengan platform otomatisasi:

Zapier

Zapier memiliki Klien MCP khusus yang terhubung ke server MCP. Ini memungkinkan Anda menggunakan server MCP HTML/CSS to Image dalam alur kerja Zapier tanpa menulis kode.

Klien MCP Zapier

Pipedream

Pipedream mendukung server MCP untuk membangun alur kerja serverless. Hubungkan server MCP HTML/CSS to Image untuk mengotomatiskan pembuatan gambar dalam alur kerja Pipedream Anda.

Integrasi MCP Pipedream

Server MCP juga terdaftar di Smithery.

Butuh bantuan?

Bicaralah dengan manusia. Kirim email ke support@htmlcsstoimage.com dan kami akan membantu Anda memulai.