AI Görselleştirme / Ofis Simülasyonu
Claude Office: Ajanlarınızı 2D Piksel Ofisinde Canlı İzleyin
Claude Code ve OpenCode ajanlarının çalışmasını, araç kullanımlarını ve alt ajanlarını retro bir 2D piksel ofisinde görselleştiren paulrobello/claude-office projesini inceledik.
AI kodlama ajanları arka planda dosya okurken, komut çalıştırırken ve alt ajanlar türetirken bu süreçleri izlemek heyecan verici olabilir. paulrobello/claude-office, Claude Code ve OpenCode yaşam döngüsü olaylarını yakalayarak 2D retro piksel ofis ortamında avatar hareketlerine dönüştüren eğlenceli ve güçlü bir görselleştirme aracıdır.
Teknoloji Yığını & Sistem Mimarisi
| Bileşen | Teknoloji / Detay |
|---|---|
| Geliştirici / Depo | paulrobello/claude-office |
| Frontend | Next.js + PixiJS (2D Canvas render engine) |
| Backend | FastAPI (REST & WebSocket canlı veri yayını) |
| Entegrasyonlar | Claude Code Hooks & OpenCode Plugin |
| Lisans | MIT |
Olay Eşleme (Event Mapping) Nasıl Çalışır?
Claude Code veya OpenCode üzerinde bir işlem başladığında entegre kancalar (hooks) FastAPI sunucusuna veri aktarır:
- 1Session Start: Ofise yeni bir piksel avatar girer ve boş bir masa seçer.
- 2Pre-Tool Use: Karakter masasında çalışmaya başlar, araç simgesi başının üstünde belirir.
- 3Subagent Start: Ana ajan yeni bir alt ajan türettiğinde masasının yanında ikinci bir çalışma arkadaşı doğar.
- 4Permission Request: Karakter kullanıcının onayını beklerken duraklama animasyonuna geçer.
- 5Context Compacting / Reporting: Token harcamaları ve bellek temizliği canlı panellerde güncellenir.
Gelişmiş Beyaz Tahta & AI İsimlendirme
Uygulamada yer alan 12 farklı beyaz tahta modu sayesinde proje istatistikleri, ajan çalışma geçmişi ve token tüketimi grafik olarak takip edilebilir. Claude OAuth entegrasyonu sağlandığında ajanlara otonom isimler verilmektedir.