HTML/CSS to Image

HTML/CSS to Image MCP Sunucusunu Entegre Etme

Web sitesi ekran görüntüleri alın, görselleri veya PDF'leri işleyin ve kuruluşunuzun kaynaklarını doğrudan yapay zeka asistanınızdan yönetin.

Giriş

Hangi yapay zeka aracını veya ajanını kullanırsanız kullanın, MCP aracılığıyla HTML/CSS to Image'a bağlayabilirsiniz. Uyumlu herhangi bir asistana genel bir URL veya HTML/CSS verin ve ekran görüntüsü almasını, PDF işlemesini veya kayıtlı şablonlarınızdan görseller oluşturmasını isteyin.

• Ücretsiz başlayın. Ücretsiz bir HCTI hesabı herhangi bir entegrasyonla çalışır. Görsel oluşturmak, API'de olduğu gibi kuruluşunuzun mevcut görsel kredilerini kullanır.
• Güvenli şekilde oturum açın. API anahtarlarını asistanınıza kopyalamadan, tarayıcınızda OAuth ile hesabınızı yetkilendirin.
• Yönetmeniz gereken tarayıcı altyapısı yok. HCTI işlemeyi üstlenir ve açabileceğiniz, indirebileceğiniz veya paylaşabileceğiniz barındırılan bir URL döndürür.

Ayrıca asistanınızdan Yönetim API yetenekleri aracılığıyla proxy'leri, depolama hedeflerini ve otomatik Open Graph görsellerini yapılandırmasını isteyebilirsiniz. Bu işlemler ek OAuth izinleri gerektirir; API anahtarı yönetimi yalnızca REST üzerinden yapılır.

İstemcinizi seçin

Kurulum talimatları ve kopyalanabilir örnekler için asistanınızı seçin.

İstemci	Nasıl bağlanılır
ChatGPT & Codex	Resmi eklentiyi yükleyin; bir sohbette veya kodlama görevinde kullanın.
Claude & Claude Code	Claude Connectors Dizini'nden yükleyin veya Claude Code'u bağlayın.
Cline	Cline uzantısından bir Streamable HTTP sunucusu bağlayın.
Cursor	Kurulum düğmesi veya MCP yapılandırması ile Cursor Agent'a HCTI ekleyin.
Gemini CLI	Gemini CLI'yi uzak bir HTTP sunucusu ve tarayıcı oturum açma ile bağlayın.
GitHub Copilot	Terminalinizden Copilot CLI'yi bağlayın.
Grok	Grok Build'de HCTI eklentisini veya doğrudan bir MCP bağlantısını kullanın.
JetBrains IDE'leri	OAuth destekli bir MCP köprüsü aracılığıyla AI Assistant'ı bağlayın.
OpenCode	Uzak bir MCP sunucusu yapılandırın ve CLI'dan yetkilendirin.
VS Code	Uzak bir HTTP sunucusu ekleyin ve araçlarını Copilot Agent modunda kullanın.
Windsurf	Ekran görüntüleri ve işleme için HCTI'yi Cascade'e bağlayın.
Zed	Agent Paneli'ne uzak bir MCP sunucusu ekleyin.

MCP nedir?

Model Context Protocol, asistanların harici araçları çağırmasını sağlar. HCTI'nin barındırılan MCP sunucusu, asistanınızın sağladığı HTML/CSS veya genel URL'yi işler ve sonucu döndürür. Kendiniz bir işleme tarayıcısı çalıştırmanıza gerek yoktur.

MCP sunucu URL'si: https://mcp.hcti.io

Taşıma: Streamable HTTP

Kimlik doğrulama: OAuth

Ajan eklentimiz ayrıca HCTI kullanımı için iş akışı rehberliği paketler. Bir istemci bu eklentiyi destekliyorsa, yüklemek hem bağlantıyı hem de asistan için talimatları sağlar. Doğrudan bir MCP bağlantısı aşağıdaki araçlara erişim sağlar.

Kullanılabilir araçlar

Bu temel araçlar MCP istemcileri genelinde çalışır. Erişim, bağlantınız için onaylanan izinlere bağlıdır. Asistanınızdan HCTI'yi adıyla kullanmasını isteyin.

Hesap kullanımı

Araç	Ne yapar
check_usage	Görsel işlemeden kullanılan görselleri, görsel kotasını, sonraki sıfırlamayı ve aşım ayarlarını kontrol edin.

Ekran görüntüleri ve işleme

Araç	Ne yapar
create_image	HTML/CSS'i PNG, JPG, WebP veya PDF olarak işleyin. device_scale, viewport_width, viewport_height ve ms_delay destekler.
create_url_image	Görünüm alanı ayarları ve çerez bildirimi engelleme ile genel bir sayfayı veya CSS seçicisini yakalayın.
create_templated_image	template_id ve template_values ile kayıtlı bir şablonu işleyin.
create_batch_images	Paylaşılan default_options ve görsel başına varyasyonlarla varyasyonlar işleyin.
get_max_batch_size	Bir toplu iş hazırlamadan önce hesabın toplu iş limitini kontrol edin.

Geri bildirim

Araç	Ne yapar
submit_feedback	HCTI ekibine hata bildirin, özellik isteyin ve iyileştirme önerin. Geri bildirim aracı referansına bakın.

Şablon yönetimi

Araç	Ne yapar
create_template	HTML/CSS'i değişkenlerle yeniden kullanılabilir bir şablon olarak kaydedin.
update_template	Kimliğe göre mevcut bir şablonu güncelleyin.
list_templates	Bağlı hesaptaki şablonları bulun.
list_template_versions	Bir şablonun sürüm geçmişini inceleyin.

Görsel seçenekleri ve yeniden kullanılabilir tasarımlar için işleme parametrelerine ve Şablon Düzenleyiciye bakın. Kapsamlı araçlar referansı ayrıca proxy'leri, depolama hedeflerini, Open Graph yapılandırmalarını ve gerekli izinleri kapsar.

Kimlik doğrulama

HCTI'yı ekledikten sonra, istemcinizin bağlan veya oturum aç eylemini kullanın ve tarayıcınızda yetkilendirmeyi tamamlayın. Kullanmak istediğiniz şablonların ve kredilerin bulunduğu HCTI hesabına oturum açın, seçilen kuruluşu ve izinleri gözden geçirin, ardından asistana dönün. Gerekirse ek yönetim erişimi seçmek için Daha Fazla İzin seçeneğini açın. Bazı istemciler ilk kullanımda otomatik olarak sorar; bireysel kılavuzlar açıkça nasıl bağlanılacağını gösterir.

Bağlantıyı görsel işlemeden kontrol etmek için şunu sorun: "HCTI'yı kullanarak görsel kullanımımı ve hesap limitlerimi kontrol et." check_usage aracı usage:read gerektirir ve görsel işlemeden kullanım ve limitleri döndürür. get_max_batch_size ayrıca usage:read gerektirir. İşleme istekleri HCTI hesabınızın görsel kotasını kullanır; asistan aboneliğiniz ayrıdır.

Örnek komutlar

Web sitesi ekran görüntüsü nasıl alınır

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.

Yakalamayı incelemek için döndürülen URL'yi açın. Kendi sitenizin yalnızca bir bölümünü yakalamak için, o sayfada gerçekten var olan .pricing-grid gibi bir CSS seçicisi sağlayın. HCTI, barındırılan hizmetinden URL'ye ulaşabilmelidir; localhost erişilebilir değildir.

HTML ve CSS'i PNG olarak nasıl işlenir

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.

Sonuç, koyu mavi bir kart üzerinde ortalanmış beyaz metin göstermelidir. Asistan, işleme için HTML/CSS'i HCTI'ya gönderir. Bir depodan çalışırken, ilgili dosyaları okumasını ve kendi kendine yeten işaretleme ve stiller sağlamasını isteyin; yerel varlık yollarının erişilebilir varlıklarla değiştirilmesi gerekir.

PDF nasıl dışa aktarılır

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.

Bir şablon nasıl yeniden kullanılır ve varyasyonlar oluşturulur

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.

Bir şablon tasarlamak ve asistanınızın template_values olarak geçmesi gereken değerleri tanımlamak için Şablon Düzenleyiciyi kullanın.

Kuruluş kaynakları nasıl incelenir

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

Bu örnek için og_configs:read onaylayın. Yapılandırmalar oluşturmak veya güncellemek için ayrıca og_configs:create_update onaylayın. Proxy, depolama hedefi ve OG yönetim işlemleri için araçlar referansına bakın.

Görsel parametreleri

Görsel oluştururken ana parametreler şunlardır:

Parametre	Tür	Açıklama
html	String	İşlenecek HTML içeriği. create_image için gereklidir.
css	String	HTML'iniz için CSS stilleri.
url	String	Ekran görüntüsü alınacak URL. create_url_image için gereklidir.

Ek parametreler

Ad	Tür	Açıklama
additional_header_origins	Array	Belirli ek HTTP veya HTTPS kaynaklarına yapılan isteklerde özel headers kullanımına izin verir.
block_consent_banners	Boolean	true olarak ayarlandığında, web sitelerindeki çerez onayı banner'larını ve açılır pencereleri otomatik olarak engeller. En çok URL ekran görüntüleri için kullanışlıdır.
color_scheme	String	Chrome'u light veya dark modunda işleyecek şekilde ayarlar. prefers-color-scheme kullanan web sitelerini etkiler.
dedupe_duration_s	Integer	Görüntü kredisi harcamadan aynı yakın tarihli bir görüntüyü yeniden kullanır. Geriye bakma penceresini saniye cinsinden ayarlar; varsayılanlar ve izin verilen değerler görüntü türüne ve plana göre değişir.
device_scale	Double	Piksel oranını 0.1 ile 3 arasında ayarlayarak çözünürlüğü kontrol edin. Daha yüksek değerler görüntü kalitesini ve dosya boyutunu artırır.
disable_twemoji	Boolean	HTML/CSS ve şablon görüntüleri varsayılan olarak Twemoji kullanır; devre dışı bırakmak için true olarak ayarlayın. URL görüntüleri Twemoji'yi yalnızca açıkça false olarak ayarlandığında ekler.
format	String	Başlangıçta döndürülen görüntü URL'sindeki dosya uzantısını seçin: png, jpg, webp veya pdf.
full_screen	Boolean	Bir URL sayfasının tüm yüksekliğinde bir görüntü oluşturun.
google_fonts	String	Roboto|Open Sans gibi bir veya daha fazla Google fontu yükleyin.
headers	Object	Bir URL'nin ekran görüntüsünü alırken özel HTTP başlıkları ekleyin. Başlıklar, istenen URL'nin kaynağı ve herhangi bir additional_header_origins ile sınırlıdır.
identify_as_hcti	Boolean	Bir URL'nin ekran görüntüsünü alırken üst düzey isteğe X-HCTI-SCREENSHOT: 1 ekleyin.
include_headers_on_subrequests	Boolean	Ayrıca aynı kaynaklı alt isteklere ve additional_header_origins ile eşleşen alt isteklere özel headers ekleyin.
jumbo_max_height	Integer	Jumbo modda maksimum çıktı yüksekliği, 80,000 piksele kadar. jumbo_max_width ile birlikte ayarlanmalıdır ve ek görüntü kredisi tüketir.
jumbo_max_width	Integer	Jumbo modda maksimum çıktı genişliği, 80,000 piksele kadar. jumbo_max_height ile birlikte ayarlanmalıdır ve ek görüntü kredisi tüketir.
max_wait_ms	Integer	Ekran görüntüsünü almadan önce bekleme için 500 ile 10000 milisaniye arasında bir maksimum zaman sınırı ayarlayın.
media_type	String	Chrome'u screen veya print CSS medya stillerini kullanarak işleyecek şekilde ayarlayın.
ms_delay	Integer	Görüntüyü oluşturmadan önce gecikme. JavaScript beklerken kullanışlıdır; 500 milisaniye ile başlayın.
pdf_options	Object	Sayfa boyutu, kenar boşlukları, ölçek ve arka plan yazdırma ile PDF çıktısını özelleştirin.
proxy_id	String	Giden trafiği kuruluşunuzun yapılandırılmış HTTP proxy'lerinden birine yönlendirin. Aylık 10.000 görüntü planı veya üzerinde kullanılabilir.
render_when_ready	Boolean	JavaScript ScreenshotReady() çağırıncaya kadar görüntüyü oluşturmak için bekleyin.
request_overrides	Array	Bir URL wildcard deseni ve/veya kaynak türleriyle eşleşen tarayıcı ağ isteklerini engelleyin. Ücretli bir plan gerektirir.
selector	String	Görüntüyü bu CSS seçiciyle eşleşen bir öğeye kırpın, örneğin section#complete-toolkit.container-lg.
storage_destination_id	String	İşlenen dosyaları kuruluşunuzun yapılandırılmış depolama hedeflerinden birine kaydedin. Aylık 10.000 görüntü planı veya üzerinde kullanılabilir.
timezone	String	Chrome'un saat dilimini America/New_York gibi bir IANA tanımlayıcısıyla ayarlayın.
transparent_background	Boolean	Şeffaf bir arka planla işlemek için true olarak ayarlayın.
viewport_height	Integer	Chrome'un görünüm alanının yüksekliğini ayarlayın. Herhangi birini kullanırken her iki boyut da ayarlanmalıdır.
viewport_landscape	Boolean	Chrome'un görünüm alanını yatay moda ayarlayın.
viewport_mobile	Boolean	Chrome'un görünüm alanını bir mobil cihazı taklit edecek şekilde ayarlayın.
viewport_touch	Boolean	Chrome'un görünüm alanını dokunma olaylarını destekleyecek şekilde ayarlayın.
viewport_width	Integer	Chrome'un görünüm alanının genişliğini ayarlayın. Herhangi birini kullanırken her iki boyut da ayarlanmalıdır.

Sorun Giderme

Kimlik Doğrulama Hataları

Kimlik doğrulama hataları alırsanız:

• Yeni bir OAuth akışı tetiklemek için MCP sunucusunun bağlantısını kesip yeniden bağlamayı deneyin
• Tarayıcınızda doğru HTML/CSS to Image hesabına giriş yaptığınızdan emin olun
• OAuth penceresi açılmaya çalıştığında açılır pencerelerin engellenmediğini kontrol edin

İzin Hataları

Listelenen bir araç, bağlantınızın sahip olmadığı izinler gerektirebilir. HCTI'nin bağlantısını kesip yeniden bağlayın ve ardından ilgili kuruluş için gerekli erişimi onaylayın. Mevcut bir belirteci yenilemek izin eklemez. Erişim değişene kadar reddedilen bir işlemi tekrar denemeyin. MCP yetkilendirmesine bakın.

Hız Sınırı Hataları

Yönetim aracı limitleri, kuruluşunuz için REST istekleriyle paylaşılır. Hız sınırına takılan bir aracı yeniden denemeden önce 60 saniye bekleyin; hız limitlerine bakın.

Bağlantı Sorunları

MCP sunucusu bağlanmıyorsa:

• Ağınızın giden HTTPS bağlantılarına izin verdiğinden emin olun
• URL'nin tam olarak https://mcp.hcti.io olduğunu kontrol edin
• Yapılandırmayı güncelledikten sonra yapay zeka asistanınızı yeniden başlatın

Görüntü Oluşturma Hataları

Görüntüler oluşturulamıyorsa:

• Hesabınızda panelde kullanılabilir görüntü kredisi olduğunu kontrol edin
• HTML içeriğinin geçerli olduğundan emin olun
• URL ekran görüntüleri için URL'nin herkese açık erişilebilir olduğunu doğrulayın

Otomasyon Platformları

MCP sunucusunu otomasyon platformlarıyla da kullanabilirsiniz:

Zapier

Zapier'in MCP sunucularına bağlanan özel bir MCP İstemcisi vardır. Bu, kod yazmadan Zapier iş akışlarında HTML/CSS to Image MCP sunucusunu kullanmanızı sağlar.

Zapier MCP istemcisi

Pipedream

Pipedream, sunucusuz iş akışları oluşturmak için MCP sunucularını destekler. Pipedream iş akışlarınızda görüntü oluşturmayı otomatikleştirmek için HTML/CSS to Image MCP sunucusunu bağlayın.

Pipedream MCP entegrasyonu

MCP sunucusu ayrıca Smithery üzerinde listelenmiştir.

Yardıma mı ihtiyacınız var?

Bir insanla konuşun. support@htmlcsstoimage.com adresine e-posta gönderin, başlamanıza yardımcı olalım.