HTML/CSS to Image

MCP Sunucu Entegrasyonu

Model Context Protocol kullanarak yapay zeka asistanlarıyla görseller oluşturun.

Yeni özellik

MCP sunucusu yeni bir özelliktir. Geri bildirimlerinizi duymak isteriz! Bize support@htmlcsstoimage.com adresinden e-posta gönderin.

---

MCP Nedir?

Model Context Protocol (MCP), yapay zeka asistanlarının harici araçlara ve hizmetlere bağlanmasını sağlayan açık bir standarttır. MCP sunucumuz sayesinde, herhangi bir kod yazmadan doğrudan yapay zeka kodlama asistanınızdan görsel oluşturabilirsiniz.

Ne istediğinizi basitçe tanımlayın; yapay zeka, sizin için oluşturmak üzere HTML/CSS to Image API'sini kullanacaktır.

MCP Sunucu URL'si: mcp.hcti.io

Kullanılabilir Araçlar

MCP sunucusu aşağıdaki araçları sağlar:

Görsel Oluşturma

Araç	Açıklama
create_image	HTML ve CSS'ten görsel oluşturun. device_scale, viewport_width, viewport_height, ms_delay ve daha fazlası gibi tüm standart parametreleri destekler.
create_url_image	Herhangi bir genel URL'nin ekran görüntüsünü alın. Seçiciler, görünüm alanı ayarları ve çerez bildirimi engelleme seçeneklerini içerir.
create_templated_image	Kayıtlı bir şablon kullanarak görsel oluşturun. Şablonunuzdaki değişkenleri değiştirmek için template_id ve template_values değerlerini iletin.
create_batch_images	Tek bir istekte 25'e kadar görsel oluşturun. Her görsel için default_options değerini ayarlayın ve variations sağlayın.
get_max_batch_size	Planınıza göre tek bir toplu işlemde oluşturabileceğiniz maksimum görsel sayısını kontrol edin.

Şablon Yönetimi

Araç	Açıklama
create_template	Değişken değiştirme ile görsel oluşturmak için yeniden kullanılabilir bir HTML/CSS şablonu kaydedin.
update_template	template_id ve yeni içeriği sağlayarak mevcut bir şablonu değiştirin.
list_templates	Hesabınızdaki tüm kayıtlı şablonları görüntüleyin. İstek başına 100'e kadar şablon döndürür.
list_template_versions	Belirli bir şablonun sürüm geçmişini görüntüleyin.

Kimlik Doğrulama

MCP sunucusu kimlik doğrulama için OAuth kullanır. İlk bağlandığınızda, HTML/CSS to Image hesabınıza erişimi yetkilendirmek için tarayıcınız otomatik olarak açılır. Manuel kimlik bilgisi yapılandırması gerekmez.

Cursor için Kurulum

HTML/CSS to Image MCP sunucusunu Cursor'a otomatik olarak kurmak için aşağıdaki düğmeye tıklayın:

Veya .cursor/mcp.json dosyanıza aşağıdaki yapılandırmayı manuel olarak ekleyin:

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

Yapılandırmayı kaydettikten sonra Cursor'u yeniden başlatın. Sunucuyu ilk kullanışınızda, tarayıcınız üzerinden erişimi yetkilendirmeniz istenecektir.

Claude Code için Kurulum

MCP sunucusunu Claude Code ile kullanmak için aşağıdaki komutu çalıştırın:

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

Sunucunun eklendiğini doğrulamak için:

claude mcp list

Sunucuyu ilk kullanışınızda, tarayıcınız üzerinden erişimi yetkilendirmeniz istenecektir.

Claude Desktop için Kurulum

Claude Desktop (bağımsız uygulama) da MCP sunucularını destekler. Claude Desktop yapılandırma dosyanızı düzenleyin:

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

Windows: %APPDATA%\Claude\claude_desktop_config.json

Aşağıdaki yapılandırmayı ekleyin:

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

Yapılandırmayı kaydettikten sonra Claude Desktop'u yeniden başlatın. Sunucuyu ilk kullanışınızda, tarayıcınız üzerinden erişimi yetkilendirmeniz istenecektir.

Windsurf için Kurulum

Windsurf (Codeium tarafından) MCP sunucularını destekler. ~/.codeium/windsurf/mcp_config.json dosyanıza aşağıdakini ekleyin:

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

Yapılandırmayı güncelledikten sonra Windsurf'u yeniden başlatın. Sunucuyu ilk kullanışınızda, tarayıcınız üzerinden erişimi yetkilendirmeniz istenecektir.

Cline (VS Code) için Kurulum

Cline, VS Code için popüler bir otonom kodlama aracısıdır. MCP sunucusunu eklemek için:

1. VS Code'u açın ve Cline Ayarları'na gidin
2. MCP Sunucuları'na gidin
3. Sunucu Ekle'ye tıklayın ve yapılandırın:

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

Alternatif olarak, Cline MCP ayarlar dosyanızı doğrudan ~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json konumunda düzenleyin.

Sunucuyu ilk kullanışınızda, tarayıcınız üzerinden erişimi yetkilendirmeniz istenecektir.

Zed için Kurulum

Zed, yapay zeka özelliklerine sahip yüksek performanslı bir kod düzenleyicisidir. MCP sunucusunu Zed ayarlarınıza (~/.config/zed/settings.json) ekleyin:

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

Sunucuyu ilk kullanışınızda, tarayıcınız üzerinden erişimi yetkilendirmeniz istenecektir.

OpenCode için Kurulum

OpenCode, açık kaynaklı bir yapay zeka kodlama asistanıdır. MCP sunucusunu opencode.json yapılandırma dosyanıza ekleyin:

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

Alternatif olarak, komut satırından ekleyin:

opencode mcp add

Sunucuyu ilk kullanışınızda, tarayıcınız üzerinden erişimi yetkilendirmeniz istenecektir.

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 İstemci Entegrasyonu

Pipedream

Pipedream, sunucusuz iş akışları oluşturmak için MCP sunucularını destekler. Pipedream iş akışlarınızda görsel 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.

Örnek Komutlar

Yapılandırıldıktan sonra, yapay zeka asistanınızdan doğal bir şekilde görsel oluşturmasını isteyebilirsiniz. İşte bazı örnekler:

HTML'den görsel oluşturun:

• "Yuvarlatılmış köşeleri ve hafif bir gölgesi olan 'Şimdi Abone Ol' yazan mavi bir butonun görselini oluştur"
• "Gradyan arka planlı ve 'Merhaba Dünya' başlıklı bir sosyal kart oluştur"

Bir web sitesinin ekran görüntüsünü alın:

• "https://stripe.com adresinin yüksek çözünürlük için device_scale değeri 2 olarak ayarlanmış ekran görüntüsünü al"
• "https://example.com/pricing adresindeki fiyatlandırma tablosunun '.pricing-grid' seçicisini kullanarak ekran görüntüsünü al"

Sosyal medya görselleri oluşturun:

• "Gradyan arka planlı, 'Yakında Yayında' başlıklı ve logomuzu içeren bir Twitter/X kart görseli oluştur"
• "Python hakkındaki blog yazım için bir Open Graph görseli yap"

Toplu görsel oluşturun:

• "Her biri farklı bir arka plan rengine sahip bir ürün kartı görselinin 10 varyasyonunu oluştur"

Şablonlarla çalışın:

• "Kayıtlı şablonlarımı listele"
• "'social-card' şablonumu kullanarak başlığı 'Yeni Özellik Sürümü' olarak ayarlanmış bir görsel oluştur"
• "Bu HTML/CSS'i yeniden kullanabilmem için 'blog-header' adında bir şablon olarak kaydet"

Önce panelde şablonlar tasarlarsanız, Şablon Düzenleyici belgeleri, blokları seçmenize, değişkenleri ayarlamanıza ve MCP sunucusunun template_values olarak hangi değerleri iletmesi gerektiğine karar vermenize yardımcı olabilir.

Görsel Parametreleri

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

Parametre	Tür	Açıklama
html	String	Oluşturulacak 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 değerlerine izin verin.
block_consent_banners	Boolean	true olarak ayarlandığında, web sitelerindeki çerez onayı bildirimlerini 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 oluşturacak şekilde ayarlayın. prefers-color-scheme kullanan web sitelerini etkiler.
dedupe_duration_s	Integer	Görsel kredisi tüketmeden aynı yakın tarihli bir görseli yeniden kullanın. Saniye cinsinden geriye bakma penceresini ayarlar; varsayılanlar ve izin verilen değerler görsel 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örsel kalitesini ve dosya boyutunu artırır.
disable_twemoji	Boolean	Twemoji yerine yerel emoji yazı tiplerini kullanmak için true olarak ayarlayın.
format	String	Başlangıçta döndürülen görsel 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örsel oluşturun.
google_fonts	String	Roboto|Open Sans gibi bir veya daha fazla Google yazı tipini 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	Aynı kaynaklı alt isteklere ve additional_header_origins ile eşleşen alt isteklere de özel headers ekleyin.
jumbo_max_height	Integer	Jumbo modunda maksimum çıktı yüksekliği, 80,000 piksele kadar. jumbo_max_width ile birlikte ayarlanmalıdır ve ek görsel kredisi tüketir.
jumbo_max_width	Integer	Jumbo modunda maksimum çıktı genişliği, 80,000 piksele kadar. jumbo_max_height ile birlikte ayarlanmalıdır ve ek görsel kredisi tüketir.
max_wait_ms	Integer	Ekran görüntüsünü almadan önce beklemek için 500 ile 10000 milisaniye arasında bir maksimum süre sınırı belirleyin.
media_type	String	Chrome'u screen veya print CSS medya stillerini kullanarak oluşturacak şekilde ayarlayın.
ms_delay	Integer	Görseli 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. Ayda 10.000 görsel veya daha yüksek planlarda kullanılabilir.
render_when_ready	Boolean	JavaScript ScreenshotReady() çağırıncaya kadar görseli oluşturmak için bekleyin.
selector	String	Görseli, section#complete-toolkit.container-lg gibi bu CSS seçicisiyle eşleşen bir öğeye kırpın.
storage_destination_id	String	Oluşturulan dosyaları kuruluşunuzun yapılandırılmış depolama hedeflerinden birine kaydedin. Ayda 10.000 görsel veya daha yüksek planlarda 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 oluşturmak için true olarak ayarlayın.
viewport_height	Integer	Chrome'un görünüm alanının yüksekliğini ayarlayın. 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. 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ışı başlatmak 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

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 panoda kullanılabilir görüntü kredisi olup olmadığını 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

---

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

Bir insanla konuşun. Herhangi bir sorunuz için lütfen bize support@htmlcsstoimage.com adresinden e-posta gönderin; size memnuniyetle yardımcı oluruz.