OpenClaw v2026.2 için geçerlidir | Bu makale temel kurulumu tamamladığınızı ve OpenClaw’ı tarayıcı üzerinden yönetmek istediğinizi varsayar.

TL;DR: Web UI erişimi http://127.0.0.1:18789 adresindedir; Chat (Sohbet), Sessions (Oturumlar), Config (Yapılandırma), Nodes (Düğümler), Logs (Günlükler), Skills (Beceriler) sayfalarını içerir. Canvas, Agent tarafından yönlendirilen görselleştirme çalışma alanıdır; grafikler, panolar ve etkileşimli arayüzler oluşturabilir. Uzaktan erişim: Tailscale Serve veya SSH tüneli. Mobil Canvas iOS/Android Uygulamasında kullanılabilir.

Web Control UI

Web UI’ye Erişim

Gateway başlatıldıktan sonra tarayıcıda şu adresi açın:

http://127.0.0.1:18789

Arayüz Genel Bakışı

flowchart LR
    subgraph WebUI["Web Control UI"]
        Chat[Chat Sohbet]
        Sessions[Sessions Oturumlar]
        Config[Config Yapılandırma]
        Nodes[Nodes Düğümler]
        Logs[Logs Günlükler]
        Skills[Skills Beceriler]
    end
    
    subgraph Features["Özellikler"]
        F1[Gerçek zamanlı sohbet]
        F2[Oturum yönetimi]
        F3[Yapılandırma düzenleme]
        F4[Düğüm kontrolü]
        F5[Günlük görüntüleme]
        F6[Beceri yönetimi]
    end
    
    Chat --> F1
    Sessions --> F2
    Config --> F3
    Nodes --> F4
    Logs --> F5
    Skills --> F6

Sayfa İşlevleri

Chat (Sohbet)

Sessions (Oturumlar)

Config (Yapılandırma)

Nodes (Düğümler)

Logs (Günlükler)

Skills (Beceriler)

Web UI Yapılandırması

{
  "web": {
    "enabled": true,
    "port": 18789,
    "bind": "loopback",
    "auth": {
      "mode": "password",
      "password": "your-secure-password"
    },
    "theme": "dark"
  }
}

Uzaktan Erişim

Yöntem Bir: Tailscale

{
  "gateway": {
    "tailscale": {
      "mode": "serve"
    }
  }
}

Tailscale ağı üzerinden erişim:

https://your-tailnet-name.ts.net

Yöntem İki: SSH Tüneli

# Yerelde SSH tüneli oluştur
ssh -L 18789:localhost:18789 user@remote-server

# Sonra eriş
http://localhost:18789

Yöntem Üç: Ters Proxy

Caddy veya Nginx kullanın:

Caddyfile:

your-domain.com {
    reverse_proxy localhost:18789
}

Canvas Görselleştirme Çalışma Alanı

Canvas Nedir?

Canvas, Agent tarafından yönlendirilen bir görselleştirme çalışma alanıdır. Agent şunları yapabilir:

• Dinamik grafikler oluşturma
• Etkileşimli arayüzler oluşturma
• Gerçek zamanlı veri gösterme
• Panolar oluşturma
• Harici içerik gömme

Canvas Mimarisi

flowchart TB
    subgraph Agent["Agent"]
        PROMPT[İsteği analiz et]
        GEN[A2UI oluştur]
        EXEC[İşlemleri yürüt]
    end
    
    subgraph Canvas["Canvas Runtime"]
        RENDER[Render motoru]
        STATE[Durum yönetimi]
        EVENT[Olay işleme]
    end
    
    subgraph UI["Kullanıcı Arayüzü"]
        DISPLAY[Canvas göster]
        INTERACT[Kullanıcı etkileşimi]
    end
    
    Agent --> Canvas
    PROMPT --> GEN
    GEN --> RENDER
    RENDER --> DISPLAY
    DISPLAY --> INTERACT
    INTERACT --> EVENT
    EVENT --> EXEC

Temel Kullanım

Sohbette Canvas Kullanımı

Kullanıcı: Basit bir yapılacaklar uygulaması oluştur

Agent: Yapılacaklar Canvas uygulaması oluşturacağım...
[Canvas bileşeni oluşturur]

Canvas Komutları

Canvas Bileşenleri

Metin Bileşeni

canvas.text({
  content: "Hello, World!",
  style: {
    fontSize: "24px",
    color: "#333",
    fontWeight: "bold"
  }
})

Düğme Bileşeni

canvas.button({
  label: "Click Me",
  onClick: () => {
    console.log("Button clicked!")
  },
  style: {
    background: "#3b82f6",
    color: "white"
  }
})

Liste Bileşeni

canvas.list({
  items: ["Item 1", "Item 2", "Item 3"],
  onSelect: (item) => {
    console.log(`Selected: ${item}`)
  }
})

Grafik Bileşeni

canvas.chart({
  type: "bar",
  data: {
    labels: ["Jan", "Feb", "Mar"],
    datasets: [{
      label: "Revenue",
      data: [100, 200, 150]
    }]
  }
})

Form Bileşeni

canvas.form({
  fields: [
    { name: "username", type: "text", label: "Username" },
    { name: "email", type: "email", label: "Email" },
    { name: "submit", type: "submit", label: "Submit" }
  ],
  onSubmit: (data) => {
    console.log("Form submitted:", data)
  }
})

Pratik Örnekler

Örnek Bir: Veri Panosu

// Agent tarafından oluşturulan Canvas kodu
canvas.render(`
  <Dashboard>
    <Header title="Sales Dashboard" />
    <Row>
      <Card title="Total Revenue" value="$125,430" trend="+12%" />
      <Card title="Active Users" value="3,245" trend="+5%" />
      <Card title="Conversion Rate" value="4.2%" trend="-1%" />
    </Row>
    <Row>
      <Chart type="line" data={revenueData} title="Revenue Trend" />
      <Chart type="bar" data={usersData} title="User Growth" />
    </Row>
  </Dashboard>
`)

Örnek İki: Etkileşimli Hesap Makinesi

canvas.render(`
  <Calculator>
    <Display value={display} />
    <Keypad>
      <Button onClick={() => input('7')}>7</Button>
      <Button onClick={() => input('8')}>8</Button>
      <Button onClick={() => input('9')}>9</Button>
      <Button onClick={() => input('/')}>/</Button>
      // ... daha fazla düğme
    </Keypad>
  </Calculator>
`)

const state = { display: '0' }
function input(value) {
  state.display = calculate(state.display, value)
  canvas.update()
}

Örnek Üç: Gerçek Zamanlı İzleme

canvas.render(`
  <Monitor>
    <Header title="System Monitor" />
    <Metrics>
      <Metric 
        label="CPU Usage" 
        value={cpuUsage} 
        threshold={80}
        unit="%"
      />
      <Metric 
        label="Memory" 
        value={memoryUsed} 
        threshold={90}
        unit="GB"
      />
      <Metric 
        label="Disk I/O" 
        value={diskIO} 
        unit="MB/s"
      />
    </Metrics>
    <Chart type="line" data={historyData} realtime />
  </Monitor>
`)

// Verileri periyodik olarak güncelle
setInterval(() => {
  cpuUsage = getCpuUsage()
  memoryUsed = getMemoryUsed()
  diskIO = getDiskIO()
  canvas.update()
}, 1000)

Canvas API

canvas.render(template)

Canvas içeriğini render eder.

canvas.render(`
  <Container>
    <Text>Hello</Text>
  </Container>
`)

canvas.update()

Canvas durumunu günceller.

state.count++
canvas.update()

canvas.clear()

Canvas’ı temizler.

canvas.clear()

canvas.snapshot()

Canvas anlık görüntüsünü alır.

const image = await canvas.snapshot()

canvas.eval(code)

Canvas bağlamında kod çalıştırır.

await canvas.eval(`
  document.getElementById('counter').innerText = '${count}'
`)

A2UI Bileşen Kütüphanesi

Canvas, A2UI (Agent-to-UI) bileşen kütüphanesini kullanır:

Düzen Bileşenleri

Veri Gösterimi

Etkileşim Bileşenleri

Canvas ve Agent İşbirliği

Agent Canvas Oluşturur

Kullanıcı: Proje ilerleme takip paneli oluşturmama yardım et

Agent: Tamam, proje ilerleme takip Canvas'ı oluşturacağım...

Agent şunları yapar:

1. İhtiyacı analiz eder
2. Düzeni tasarlar
3. Canvas kodu oluşturur
4. Arayüzü render eder

Canvas Agent’ı Tetikler

Kullanıcı Canvas ile etkileşime girdiğinde Agent işlemlerini tetikleyebilir:

canvas.button({
  label: "Generate Report",
  onClick: async () => {
    await agent.send("Aylık rapor oluştur")
  }
})

Farklı Cihazlarda Canvas Kullanımı

macOS

Canvas bağımsız pencere olarak gösterilir:

openclaw canvas show

iOS

Canvas iOS Node App içinde entegre edilmiştir:

• OpenClaw iOS App’i açın
• Canvas sekmesine geçin

Android

Canvas Android Node App içinde entegre edilmiştir:

• OpenClaw Android App’i açın
• Canvas sekmesine geçin

Web

Canvas Web UI’de gösterilir:

• http://localhost:18789 adresini açın
• Canvas sekmesine tıklayın

Canvas Yapılandırması

{
  "canvas": {
    "enabled": true,
    "theme": "dark",
    "autoUpdate": true,
    "updateInterval": 1000,
    "maxComponents": 100,
    "persistState": true
  }
}

Özet

Web Control UI ve Canvas, OpenClaw’ı yalnızca bir sohbet asistanı değil, tam bir etkileşim platformu haline getirir:

• Web UI: Tarayıcı kontrol paneli, her şeyi yönetir
• Canvas: Agent tarafından yönlendirilen görselleştirme çalışma alanı
• A2UI: Zengin bileşen kütüphanesi, hızlı arayüz oluşturma
• Çapraz cihaz: macOS, iOS, Android, Web birleşik deneyim

Bu özellikler sayesinde Agent’ın panolar, yönetim arayüzleri ve etkileşimli araçlar oluşturmasını sağlayarak AI asistanının uygulama senaryolarını büyük ölçüde genişletebilirsiniz.

Bu Bölümün Özeti:

• Web Control UI’nin işlevlerini ve kullanımını öğrendiniz
• Canvas’ın temel kavramlarını ve bileşenlerini öğrendiniz
• A2UI bileşen kütüphanesini tanıdınız
• Canvas ile Agent arasındaki işbirliği yöntemlerini öğrendiniz
• Çoklu cihaz Canvas kullanım yöntemlerini öğrendiniz

Güncelleme Kayıtları:

• 2026-02-26: İlk sürüm yayınlandı, OpenClaw v2026.2 temel alındı

Seri Navigasyonu:

• ← Önceki: Agent Kişilik Özelleştirme
• → Sonraki: Çoklu Agent Yönlendirme ve Oturum İzolasyonu