Google Stitch SDK'yı Claude Code ve OpenClaw'a Skill Olarak Entegre Etmek

Stitch SDK Nedir?

Google Labs’ın geliştirdiği Stitch SDK, doğal dil promptlarından UI ekranları üreten bir TypeScript kütüphanesi. Bir prompt veriyorsunuz, karşılığında HTML markup ve screenshot alıyorsunuz. Vercel AI SDK, MCP Proxy ve doğrudan API olmak üzere birden fazla entegrasyon yolu sunuyor.

Bu SDK’yı AI agent iş akışlarıma entegre etmek istedim — hem Claude Code oturumlarında hem de OpenClaw’daki agentların kullanımı için.

Ne Yaptık?

1. Stitch SDK Skill Dosyası Oluşturduk

~/.claude/skills/stitch-sdk/SKILL.md dosyasını oluşturduk. Bu skill, Claude Code’a Stitch SDK’nın API’sini, kurulumunu ve kullanım kalıplarını öğretiyor. Artık Claude Code oturumlarında “stitch” veya “UI generation” gibi tetikleyicilerle otomatik olarak devreye giriyor.

2. OpenClaw’a da Ekledik

Aynı skill dosyasını ~/.openclaw/skills/stitch-sdk/SKILL.md olarak kopyaladık. Ayrıca ~/.openclaw/openclaw.json içindeki skills.entries bölümüne API key ile birlikte kaydettik:

"stitch-sdk": {
  "enabled": true,
  "env": {
    "STITCH_API_KEY": "AQ.Ab8RN..."
  }
}

3. API Key’i Kalıcı Hale Getirdik

STITCH_API_KEY environment variable’ını ~/.zshrc’ye ekleyerek tüm terminal oturumlarında kullanılabilir yaptık.

4. OpenClaw Gateway’i Yeniden Başlattık

Yeni skill’in yüklenmesi için gateway’i temiz bir şekilde yeniden başlattık. Telegram botu (@yalikavakbot) ve tüm agentlar sorunsuz bağlandı.

Sonuç

Tek bir SDK, üç farklı noktadan erişilebilir hale geldi:

Artık herhangi bir Claude Code veya OpenClaw oturumunda “bir login sayfası tasarla” demeniz yeterli — Stitch SDK devreye girip HTML ve screenshot üretecek. AI agentlarla repoları otomatik olarak yeniden tasarlatmak artık çok daha kolay.