Compatible avec OpenClaw v2026.2 | Cet article suppose que vous avez terminé l’installation de base et souhaitez gérer OpenClaw via le navigateur.

TL;DR : Accéder au Web UI via http://127.0.0.1:18789, qui comprend les pages Chat (conversation), Sessions (sessions), Config (configuration), Nodes (nœuds), Logs (journaux) et Skills (compétences). Canvas est un espace de travail visuel piloté par l’Agent, permettant de créer des graphiques, tableaux de bord et interfaces interactives. Accès distant : Tailscale Serve ou tunnel SSH. Le Canvas mobile est disponible dans les applications iOS/Android.

Web Control UI

Accéder au Web UI

Après avoir lancé le Gateway, ouvrez votre navigateur à l’adresse :

http://127.0.0.1:18789

Vue d’ensemble de l’interface

flowchart LR
    subgraph WebUI["Web Control UI"]
        Chat[Chat – Conversation]
        Sessions[Sessions]
        Config[Config – Configuration]
        Nodes[Nodes – Nœuds]
        Logs[Logs – Journaux]
        Skills[Skills – Compétences]
    end
    
    subgraph Features["Fonctionnalités"]
        F1[Conversation en temps réel]
        F2[Gestion des sessions]
        F3[Édition de la configuration]
        F4[Contrôle des nœuds]
        F5[Consultation des journaux]
        F6[Gestion des compétences]
    end
    
    Chat --> F1
    Sessions --> F2
    Config --> F3
    Nodes --> F4
    Logs --> F5
    Skills --> F6

Fonctionnalités des pages

Chat (Conversation)

Sessions

Config (Configuration)

Nodes (Nœuds)

Logs (Journaux)

Skills (Compétences)

Configurer le Web UI

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

Accès distant

Méthode 1 : Tailscale

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

Accès via le réseau Tailscale :

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

Méthode 2 : Tunnel SSH

# Créer un tunnel SSH local
ssh -L 18789:localhost:18789 user@remote-server

# Puis accéder à
http://localhost:18789

Méthode 3 : Reverse proxy

Avec Caddy ou Nginx :

Caddyfile :

your-domain.com {
    reverse_proxy localhost:18789
}

Canvas : espace de travail visuel

Qu’est-ce que Canvas ?

Canvas est un espace de travail visuel piloté par l’Agent. L’Agent peut :

• Créer des graphiques dynamiques
• Construire des interfaces interactives
• Afficher des données en temps réel
• Générer des tableaux de bord
• Intégrer du contenu externe

Architecture de Canvas

flowchart TB
    subgraph Agent["Agent"]
        PROMPT[Analyser la requête]
        GEN[Générer A2UI]
        EXEC[Exécuter l'opération]
    end
    
    subgraph Canvas["Canvas Runtime"]
        RENDER[Moteur de rendu]
        STATE[Gestion d'état]
        EVENT[Gestion des événements]
    end
    
    subgraph UI["Interface utilisateur"]
        DISPLAY[Afficher le Canvas]
        INTERACT[Interaction utilisateur]
    end
    
    Agent --> Canvas
    PROMPT --> GEN
    GEN --> RENDER
    RENDER --> DISPLAY
    DISPLAY --> INTERACT
    INTERACT --> EVENT
    EVENT --> EXEC

Utilisation de base

Utiliser Canvas dans le chat

Utilisateur : Crée une application de liste de tâches simple

Agent : Je vais créer une application Canvas de liste de tâches...
[Génération des composants Canvas]

Commandes Canvas

Composants Canvas

Composant texte

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

Composant bouton

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

Composant liste

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

Composant graphique

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

Composant formulaire

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)
  }
})

Exemples pratiques

Exemple 1 : Tableau de bord de données

// Code Canvas généré par l'Agent
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>
`)

Exemple 2 : Calculatrice interactive

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>
      // ... more buttons
    </Keypad>
  </Calculator>
`)

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

Exemple 3 : Monitoring en temps réel

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>
`)

// Mise à jour périodique des données
setInterval(() => {
  cpuUsage = getCpuUsage()
  memoryUsed = getMemoryUsed()
  diskIO = getDiskIO()
  canvas.update()
}, 1000)

API Canvas

canvas.render(template)

Rend le contenu du Canvas.

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

canvas.update()

Met à jour l’état du Canvas.

state.count++
canvas.update()

canvas.clear()

Vide le Canvas.

canvas.clear()

canvas.snapshot()

Capture un instantané du Canvas.

const image = await canvas.snapshot()

canvas.eval(code)

Exécute du code dans le contexte du Canvas.

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

Bibliothèque de composants A2UI

Canvas utilise la bibliothèque de composants A2UI (Agent-to-UI) :

Composants de mise en page

Affichage de données

Composants interactifs

Collaboration entre Canvas et l’Agent

L’Agent crée un Canvas

Utilisateur : Crée-moi un tableau de suivi de l'avancement du projet

Agent : D'accord, je vais créer un Canvas de suivi de projet...

L’Agent va :

1. Analyser le besoin
2. Concevoir la mise en page
3. Générer le code Canvas
4. Rendre l’interface

Canvas déclenche l’Agent

Lorsque l’utilisateur interagit avec le Canvas, cela peut déclencher des actions de l’Agent :

canvas.button({
  label: "Generate Report",
  onClick: async () => {
    await agent.send("Générer le rapport mensuel")
  }
})

Utiliser Canvas sur différents appareils

macOS

Canvas s’affiche dans une fenêtre indépendante :

openclaw canvas show

iOS

Canvas est intégré dans l’application iOS Node :

• Ouvrir l’application OpenClaw iOS
• Basculer vers l’onglet Canvas

Android

Canvas est intégré dans l’application Android Node :

• Ouvrir l’application OpenClaw Android
• Basculer vers l’onglet Canvas

Web

Canvas s’affiche dans le Web UI :

• Ouvrir http://localhost:18789
• Cliquer sur l’onglet Canvas

Configurer Canvas

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

Résumé

Le Web Control UI et Canvas font d’OpenClaw bien plus qu’un simple assistant de chat — c’est une plateforme d’interaction complète :

• Web UI : Panneau de contrôle dans le navigateur, pour tout gérer
• Canvas : Espace de travail visuel piloté par l’Agent
• A2UI : Riche bibliothèque de composants pour construire rapidement des interfaces
• Multi-appareils : Expérience unifiée sur macOS, iOS, Android et Web

Grâce à ces fonctionnalités, vous pouvez faire créer par l’Agent des tableaux de bord, des interfaces de gestion et des outils interactifs, élargissant considérablement les cas d’usage de l’assistant IA.

Résumé de cet article :

• Maîtrise des fonctionnalités et de l’utilisation du Web Control UI
• Apprentissage des concepts de base et des composants de Canvas
• Découverte de la bibliothèque de composants A2UI
• Compréhension de la collaboration entre Canvas et l’Agent
• Maîtrise de l’utilisation multi-appareils de Canvas

Historique des mises à jour :

• 2026-02-26 : Publication initiale, basée sur OpenClaw v2026.2

Navigation de la série :

• ← Précédent : Personnalisation de l’Agent
• → Suivant : Routage multi-Agent et isolation des sessions