HTML/CSS to Image

Integrasi Server MCP

Hasilkan gambar dengan asisten AI menggunakan Model Context Protocol.

Fitur baru

Server MCP adalah fitur baru. Kami ingin mendengar masukan Anda! Kirim email ke support@htmlcsstoimage.com.

---

Apa itu MCP?

Model Context Protocol (MCP) adalah standar terbuka yang memungkinkan asisten AI terhubung ke alat dan layanan eksternal. Dengan server MCP kami, Anda dapat menghasilkan gambar langsung dari asisten coding AI Anda tanpa menulis kode apa pun.

Cukup deskripsikan apa yang Anda inginkan, dan AI akan menggunakan API HTML/CSS to Image untuk membuatnya untuk Anda.

URL Server MCP: mcp.hcti.io

Alat yang Tersedia

Server MCP menyediakan alat-alat berikut:

Pembuatan Gambar

Alat	Deskripsi
create_image	Hasilkan gambar dari HTML dan CSS. Mendukung semua parameter standar seperti device_scale, viewport_width, viewport_height, ms_delay, dan lainnya.
create_url_image	Ambil tangkapan layar dari URL publik apa pun. Termasuk opsi untuk selector, pengaturan viewport, dan pemblokiran banner cookie.
create_templated_image	Hasilkan gambar menggunakan template yang tersimpan. Berikan template_id dan template_values untuk mengganti variabel dalam template Anda.
create_batch_images	Buat hingga 25 gambar dalam satu permintaan. Atur default_options dan berikan variations untuk setiap gambar.
get_max_batch_size	Periksa jumlah maksimum gambar yang dapat Anda buat dalam satu batch berdasarkan paket Anda.

Manajemen Template

Alat	Deskripsi
create_template	Simpan template HTML/CSS yang dapat digunakan kembali untuk menghasilkan gambar dengan substitusi variabel.
update_template	Ubah template yang ada dengan memberikan template_id dan konten baru.
list_templates	Lihat semua template yang tersimpan di akun Anda. Mengembalikan hingga 100 template per permintaan.
list_template_versions	Lihat riwayat versi dari template tertentu.

Autentikasi

Server MCP menggunakan OAuth untuk autentikasi. Saat pertama kali terhubung, browser Anda akan terbuka secara otomatis untuk mengotorisasi akses ke akun HTML/CSS to Image Anda. Tidak diperlukan konfigurasi kredensial manual.

Pengaturan untuk Cursor

Klik tombol di bawah untuk menginstal server MCP HTML/CSS to Image secara otomatis di Cursor:

Atau tambahkan konfigurasi berikut secara manual ke file .cursor/mcp.json Anda:

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

Mulai ulang Cursor setelah menyimpan konfigurasi. Saat pertama kali menggunakan server, Anda akan diminta untuk mengotorisasi akses melalui browser Anda.

Pengaturan untuk Claude Code

Untuk menggunakan server MCP dengan Claude Code, jalankan perintah berikut:

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

Untuk memverifikasi bahwa server telah ditambahkan:

claude mcp list

Saat pertama kali menggunakan server, Anda akan diminta untuk mengotorisasi akses melalui browser Anda.

Pengaturan untuk Claude Desktop

Claude Desktop (aplikasi mandiri) juga mendukung server MCP. Edit file konfigurasi Claude Desktop Anda:

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

Windows: %APPDATA%\Claude\claude_desktop_config.json

Tambahkan konfigurasi berikut:

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

Mulai ulang Claude Desktop setelah menyimpan konfigurasi. Saat pertama kali menggunakan server, Anda akan diminta untuk mengotorisasi akses melalui browser Anda.

Pengaturan untuk Windsurf

Windsurf (oleh Codeium) mendukung server MCP. Tambahkan berikut ini ke file ~/.codeium/windsurf/mcp_config.json Anda:

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

Mulai ulang Windsurf setelah memperbarui konfigurasi. Saat pertama kali menggunakan server, Anda akan diminta untuk mengotorisasi akses melalui browser Anda.

Pengaturan untuk Cline (VS Code)

Cline adalah agen coding otonom yang populer untuk VS Code. Untuk menambahkan server MCP:

1. Buka VS Code dan pergi ke Pengaturan Cline
2. Navigasikan ke Server MCP
3. Klik Tambahkan Server dan konfigurasikan:

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

Atau, edit file pengaturan MCP Cline Anda secara langsung di ~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json.

Saat pertama kali menggunakan server, Anda akan diminta untuk mengotorisasi akses melalui browser Anda.

Pengaturan untuk Zed

Zed adalah editor kode berkinerja tinggi dengan fitur AI. Tambahkan server MCP ke pengaturan Zed Anda (~/.config/zed/settings.json):

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

Saat pertama kali menggunakan server, Anda akan diminta untuk mengotorisasi akses melalui browser Anda.

Pengaturan untuk OpenCode

OpenCode adalah asisten coding AI sumber terbuka. Tambahkan server MCP ke file konfigurasi opencode.json Anda:

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

Atau, tambahkan melalui baris perintah:

opencode mcp add

Saat pertama kali menggunakan server, Anda akan diminta untuk mengotorisasi akses melalui browser Anda.

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.

Integrasi 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.

Contoh Prompt

Setelah dikonfigurasi, Anda dapat meminta asisten AI Anda untuk menghasilkan gambar secara alami. Berikut beberapa contohnya:

Buat gambar dari HTML:

• "Buat gambar tombol biru dengan tulisan 'Subscribe Now' dengan sudut membulat dan bayangan halus"
• "Hasilkan kartu sosial dengan latar belakang gradien dan judul 'Hello World'"

Tangkapan layar situs web:

• "Ambil tangkapan layar dari https://stripe.com dengan device_scale diatur ke 2 untuk resolusi tinggi"
• "Tangkapan layar tabel harga di https://example.com/pricing menggunakan selector '.pricing-grid'"

Hasilkan gambar media sosial:

• "Buat gambar kartu Twitter/X dengan latar belakang gradien, judul 'Launching Soon', dan logo kami"
• "Buat gambar Open Graph untuk posting blog saya tentang Python"

Buat gambar secara batch:

• "Buat 10 variasi gambar kartu produk, masing-masing dengan warna latar belakang berbeda"

Bekerja dengan template:

• "Daftarkan template saya yang tersimpan"
• "Buat gambar menggunakan template 'social-card' saya dengan judul diatur ke 'New Feature Release'"
• "Simpan HTML/CSS ini sebagai template bernama 'blog-header' agar bisa saya gunakan kembali"

Jika Anda mendesain template di dashboard terlebih dahulu, dokumentasi Template Editor dapat membantu Anda memilih blok, mengatur variabel, dan memutuskan nilai apa yang harus diteruskan server MCP sebagai template_values.

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 yang akan ditangkap layarnya. Diperlukan untuk create_url_image.

Parameter Tambahan

Nama	Tipe	Deskripsi
additional_header_origins	Array	Izinkan headers khusus pada permintaan ke asal HTTP atau HTTPS tambahan tertentu.
block_consent_banners	Boolean	Saat diatur ke true, secara otomatis memblokir banner persetujuan cookie dan popup di situs web. Paling berguna untuk tangkapan layar URL.
color_scheme	String	Atur Chrome untuk merender dalam mode light atau dark. Mempengaruhi situs web yang menggunakan prefers-color-scheme.
dedupe_duration_s	Integer	Gunakan kembali gambar identik terbaru tanpa menghabiskan kredit gambar. Mengatur jendela lookback dalam detik; nilai default dan 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	Atur ke true untuk menggunakan font emoji asli alih-alih Twemoji.
format	String	Pilih ekstensi file di URL gambar yang awalnya dikembalikan: png, jpg, webp, atau pdf.
full_screen	Boolean	Hasilkan gambar dengan tinggi penuh dari halaman URL.
google_fonts	String	Muat satu atau lebih font Google, seperti Roboto|Open Sans.
headers	Object	Tambahkan header HTTP khusus saat menangkap layar URL. Header dibatasi pada asal URL yang diminta dan additional_header_origins apa pun.
identify_as_hcti	Boolean	Tambahkan X-HCTI-SCREENSHOT: 1 ke permintaan tingkat atas saat menangkap layar URL.
include_headers_on_subrequests	Boolean	Juga tambahkan headers khusus ke subrequest asal yang sama dan subrequest yang cocok dengan additional_header_origins.
jumbo_max_height	Integer	Tinggi output maksimum dalam mode jumbo, hingga 80,000 piksel. Harus diatur dengan jumbo_max_width dan menghabiskan kredit gambar tambahan.
jumbo_max_width	Integer	Lebar output maksimum dalam mode jumbo, hingga 80,000 piksel. Harus diatur dengan jumbo_max_height dan menghabiskan kredit gambar tambahan.
max_wait_ms	Integer	Atur batas waktu maksimum dari 500 hingga 10000 milidetik untuk menunggu sebelum mengambil tangkapan layar.
media_type	String	Atur Chrome untuk merender menggunakan gaya CSS media screen atau print.
ms_delay	Integer	Penundaan sebelum menghasilkan gambar. Berguna saat menunggu JavaScript; mulai dengan 500 milidetik.
pdf_options	Object	Sesuaikan output PDF dengan ukuran halaman, margin, skala, dan pencetakan latar belakang.
proxy_id	String	Arahkan 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().
selector	String	Potong gambar ke elemen yang cocok dengan selector 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	Atur zona waktu Chrome dengan pengidentifikasi IANA seperti America/New_York.
transparent_background	Boolean	Atur ke true untuk merender dengan latar belakang transparan.
viewport_height	Integer	Atur tinggi viewport Chrome. Kedua dimensi harus diatur saat menggunakan salah satunya.
viewport_landscape	Boolean	Atur viewport Chrome ke mode lanskap.
viewport_mobile	Boolean	Atur viewport Chrome untuk meniru perangkat seluler.
viewport_touch	Boolean	Atur viewport Chrome untuk mendukung peristiwa sentuh.
viewport_width	Integer	Atur lebar viewport Chrome. Kedua dimensi harus diatur 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

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

---

Butuh bantuan?

Bicaralah dengan manusia. Silakan kirim email ke kami support@htmlcsstoimage.com dengan pertanyaan apa pun dan kami akan dengan senang hati membantu Anda memulai.