17. Web Interface

OpenCLaw provides a web interface for configuration, monitoring, and interaction. This interface must be both functional for power users and accessible for casual interaction.

Architecture Overview

The web interface uses a client-server architecture with a lightweight backend that proxies requests to the OpenCLaw core and a single-page application frontend that handles rendering and state management.

# web_interface.py
from aiohttp import web
import asyncio

class WebInterface:
    def __init__(self, openclaw_core, config: WebConfig):
        self.core = openclaw_core
        self.config = config
        self.app = web.Application()
        self.setup_routes()
    
    def setup_routes(self):
        self.app.router.add_get('/', self.handle_index)
        self.app.router.add_get('/api/status', self.handle_status)
        self.app.router.add_get('/api/conversations', self.handle_conversations)
        self.app.router.add_post('/api/interact', self.handle_interact)
        self.app.router.add_get('/api/settings', self.handle_settings)
        self.app.router.add_post('/api/settings', self.update_settings)
        self.app.router.add_static('/static', self.config.static_path)
    
    async def handle_interact(self, request: web.Request) -> web.Response:
        data = await request.json()
        response = await self.core.process_message(
            data['message'],
            user_id=data.get('user_id', 'web_default')
        )
        return web.json_response({
            'response': response.content,
            'message_id': response.message_id
        })
    
    async def start(self):
        runner = web.AppRunner(self.app)
        await runner.setup()
        site = web.TCPSite(runner, self.config.host, self.config.port)
        await site.start()

Real-time Updates

The interface maintains real-time awareness of agent state through WebSocket connections. Events propagate to all connected clients, enabling live monitoring.

class WebSocketManager:
    def __init__(self):
        self.connections = {}
        self.broadcast_queue = asyncio.Queue()
    
    async def handle_connection(self, ws, user_id: str):
        self.connections[user_id] = ws
        
        try:
            while True:
                message = await ws.receive()
                if message.type == WSMsgType.CLOSE:
                    break
                await self.handle_client_message(user_id, message)
        finally:
            del self.connections[user_id]
    
    async def broadcast(self, event: Event):
        for ws in self.connections.values():
            try:
                await ws.send_json(event.to_dict())
            except:
                pass

UI Components

The frontend implements several key components: conversation view (scrollable history with message bubbles), input area (expandable textarea with send button), status indicator (connection state, processing indicator), and settings panel (tabbed configuration interface).

Local verification checkpoint

Run the smallest example from this chapter in a local workspace and record the package version, runtime, data path, and observed output. If the result depends on model size, vector count, CPU/GPU backend, or available memory, note that constraint beside the exercise so the lesson remains reproducible.