Para OpenClaw v2026.2 | Este artículo asume que ya completaste la instalación básica y deseas gestionar OpenClaw a través del navegador.

TL;DR: Accede a la Web UI en http://127.0.0.1:18789. Incluye las páginas Chat (conversación), Sessions (sesiones), Config (configuración), Nodes (nodos), Logs (registros) y Skills (habilidades). Canvas es un espacio de trabajo visual impulsado por el Agent que permite crear gráficos, paneles de control e interfaces interactivas. Acceso remoto: Tailscale Serve o túnel SSH. Canvas móvil disponible en apps iOS/Android.

Web Control UI

Acceder a la Web UI

Después de iniciar el Gateway, abre el navegador y accede a:

http://127.0.0.1:18789

Vista general de la interfaz

flowchart LR
    subgraph WebUI["Web Control UI"]
        Chat[Chat Conversación]
        Sessions[Sessions Sesiones]
        Config[Config Configuración]
        Nodes[Nodes Nodos]
        Logs[Logs Registros]
        Skills[Skills Habilidades]
    end
    
    subgraph Features["Funciones"]
        F1[Conversación en tiempo real]
        F2[Gestión de sesiones]
        F3[Edición de configuración]
        F4[Control de nodos]
        F5[Visualización de registros]
        F6[Gestión de habilidades]
    end
    
    Chat --> F1
    Sessions --> F2
    Config --> F3
    Nodes --> F4
    Logs --> F5
    Skills --> F6

Funciones de las páginas

Chat (Conversación)

Sessions (Sesiones)

Config (Configuración)

Nodes (Nodos)

Logs (Registros)

Skills (Habilidades)

Configurar la Web UI

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

Acceso remoto

Método uno: Tailscale

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

Accede a través de la red Tailscale:

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

Método dos: Túnel SSH

# Crear un túnel SSH en local
ssh -L 18789:localhost:18789 user@remote-server

# Luego accede a
http://localhost:18789

Método tres: Proxy inverso

Usando Caddy o Nginx:

Caddyfile:

your-domain.com {
    reverse_proxy localhost:18789
}

Canvas: Espacio de trabajo visual

¿Qué es Canvas?

Canvas es un espacio de trabajo visual impulsado por el Agent. El Agent puede:

• Crear gráficos dinámicos
• Construir interfaces interactivas
• Mostrar datos en tiempo real
• Generar paneles de control
• Incrustar contenido externo

Arquitectura de Canvas

flowchart TB
    subgraph Agent["Agent"]
        PROMPT[Analizar solicitud]
        GEN[Generar A2UI]
        EXEC[Ejecutar operación]
    end
    
    subgraph Canvas["Canvas Runtime"]
        RENDER[Motor de renderizado]
        STATE[Gestión de estado]
        EVENT[Manejo de eventos]
    end
    
    subgraph UI["Interfaz de usuario"]
        DISPLAY[Mostrar Canvas]
        INTERACT[Interacción del usuario]
    end
    
    Agent --> Canvas
    PROMPT --> GEN
    GEN --> RENDER
    RENDER --> DISPLAY
    DISPLAY --> INTERACT
    INTERACT --> EVENT
    EVENT --> EXEC

Uso básico

Usar Canvas en el chat

Usuario: Crea una aplicación simple de lista de tareas

Agent: Voy a crear una aplicación Canvas de lista de tareas...
[Genera componentes Canvas]

Comandos de Canvas

Componentes de Canvas

Componente de texto

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

Componente de botón

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

Componente de lista

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

Componente de gráfico

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

Componente de formulario

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

Ejemplos prácticos

Ejemplo uno: Panel de datos

// Código Canvas generado por el 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>
`)

Ejemplo dos: Calculadora interactiva

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>
      // ... más botones
    </Keypad>
  </Calculator>
`)

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

Ejemplo tres: Monitoreo en tiempo real

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

// Actualizar datos periódicamente
setInterval(() => {
  cpuUsage = getCpuUsage()
  memoryUsed = getMemoryUsed()
  diskIO = getDiskIO()
  canvas.update()
}, 1000)

Canvas API

canvas.render(template)

Renderiza el contenido del Canvas.

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

canvas.update()

Actualiza el estado del Canvas.

state.count++
canvas.update()

canvas.clear()

Vacía el Canvas.

canvas.clear()

canvas.snapshot()

Obtiene una captura del Canvas.

const image = await canvas.snapshot()

canvas.eval(code)

Ejecuta código en el contexto del Canvas.

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

Biblioteca de componentes A2UI

Canvas utiliza la biblioteca de componentes A2UI (Agent-to-UI):

Componentes de diseño

Visualización de datos

Componentes interactivos

Colaboración entre Canvas y Agent

Agent crea Canvas

Usuario: Ayúdame a crear un panel de seguimiento de progreso del proyecto

Agent: De acuerdo, voy a crear un Canvas de seguimiento de progreso del proyecto...

El Agent:

1. Analiza los requisitos
2. Diseña la disposición
3. Genera el código Canvas
4. Renderiza la interfaz

Canvas activa el Agent

Cuando el usuario interactúa con Canvas, puede activar operaciones del Agent:

canvas.button({
  label: "Generate Report",
  onClick: async () => {
    await agent.send("Generar informe mensual")
  }
})

Usar Canvas en diferentes dispositivos

macOS

Canvas se muestra como una ventana independiente:

openclaw canvas show

iOS

Canvas está integrado en la iOS Node App:

• Abre la app OpenClaw para iOS
• Cambia a la pestaña Canvas

Android

Canvas está integrado en la Android Node App:

• Abre la app OpenClaw para Android
• Cambia a la pestaña Canvas

Web

Canvas se muestra en la Web UI:

• Abre http://localhost:18789
• Haz clic en la pestaña Canvas

Configurar Canvas

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

Resumen

Web Control UI y Canvas hacen de OpenClaw no solo un asistente de chat, sino una plataforma de interacción completa:

• Web UI: Panel de control en el navegador para gestionar todo
• Canvas: Espacio de trabajo visual impulsado por el Agent
• A2UI: Rica biblioteca de componentes para construir interfaces rápidamente
• Multiplataforma: Experiencia unificada en macOS, iOS, Android y Web

Con estas funciones, puedes hacer que el Agent cree paneles de control, interfaces de gestión y herramientas interactivas, ampliando enormemente los escenarios de aplicación del asistente IA.

Resumen de este artículo:

• Dominaste las funciones y el uso de la Web Control UI
• Aprendiste los conceptos básicos y componentes de Canvas
• Conociste la biblioteca de componentes A2UI
• Aprendiste cómo Canvas y el Agent colaboran
• Dominaste el uso de Canvas en múltiples dispositivos

Historial de actualizaciones:

• 2026-02-26: Publicación inicial, basada en OpenClaw v2026.2

Navegación de la serie:

• ← Anterior: Personalización de la personalidad del Agent
• → Siguiente: Enrutamiento multi-Agent y aislamiento de sesiones