Web Interface & TUI
Relevant source files
The following files were used as context for generating this wiki page:
Clawdbot provides a multi-layered interface strategy comprising a web-based Control UI, a rich Terminal User Interface (TUI) via the CLI, and a specialized streaming protocol for agent-driven interfaces known as A2UI. The system is designed to allow users to configure the gateway, monitor agent status, and interact with specialized "Canvas" views for rich media content.
The primary purpose of these interfaces is to bridge the gap between headless agent operations and human oversight, providing visualization for system health, security audits, and real-time agent reasoning.
Control UI & Web Rendering
The Control UI is a web-based dashboard used for managing Clawdbot gateway settings, viewing agent identities, and configuring messaging channels. It is served by the gateway server and can be accessed via Tailscale, LAN, or loopback depending on the bind configuration.
Configuration Forms
The web interface utilizes a dynamic configuration form generator that renders JSON schema-based settings into a modern UI. This system organizes settings into logical sections such as Environment Variables, Updates, Agents, and Channels.
The diagram above shows the flow from raw JSON schema to the rendered configuration components in the Web UI.
Sources: ui/src/ui/views/config-form.render.ts:101-140, ui/src/ui/views/config-form.render.ts:200-250
UI Section Categories
| Section | Description |
|---|---|
| Agents | Configuration for agent IDs, models, and identities. |
| Channels | Setup for Telegram, Discord, Slack, and other messaging integrations. |
| Canvas Host | Settings for rendering and displaying web content on connected nodes. |
| Security/Auth | Management of API keys and authentication profiles. |
| Gateway | Server settings including port, binding mode, and auth. |
Sources: ui/src/ui/views/config-form.render.ts:110-137
Terminal User Interface (TUI) & Status Reporting
The TUI provides high-density system information directly in the terminal using the clawdbot status command. It renders formatted tables and security audit summaries to give an immediate overview of the bot's health.
Dashboard & Reachability
The TUI displays a "Dashboard" link (e.g., http://<tailscale-host>:18789) which serves as the entry point to the web-based Control UI. It also provides real-time reachability status for the gateway, indicating if it is connected via Tailscale, LAN, or loopback.
This flow illustrates the sequence of operations when the TUI status command is invoked.
Sources: src/commands/status.command.ts:133-180, src/commands/status.command.ts:400-450
Security Auditing in TUI
The TUI includes a summary of the runSecurityAudit results, highlighting:
- Critical Findings: High-risk issues requiring immediate remediation.
- Warnings: Potential misconfigurations.
- Remediation: Suggested CLI commands or config changes to fix detected issues.
Sources: src/commands/status.command.ts:460-490
A2UI: Agent-to-User Interface
A2UI is an open-source streaming protocol integrated into Clawdbot that allows agents to "speak UI." Instead of raw text, agents send declarative JSON describing UI components which the client renders using native libraries.
High-Level Architecture
A2UI disconnects UI generation from execution, ensuring that LLM-generated interfaces are safe like data but expressive like code.
The sequence shows how agent intent is transformed into concrete UI elements via A2UI.
Sources: vendor/a2ui/README.md:80-100
Key Principles of A2UI
- Security First: Clients maintain a "catalog" of trusted components; agents cannot execute arbitrary code.
- LLM-Friendly: Uses a flat list of components with ID references, optimized for incremental LLM generation.
- Framework Agnostic: The same JSON payload can be rendered on Flutter, Web (Lit/Angular), or SwiftUI.
Sources: vendor/a2ui/README.md:40-70
Canvas Host & Media Display
The Canvas system allows agents to present HTML content on connected Clawdbot nodes (Mac, iOS, Android). It utilizes a dedicated HTTP server (Port 18793) to serve static assets.
Interaction Flow
The Canvas supports several interactive actions controlled via the canvas tool:
| Action | Description |
|---|---|
present | Displays a target URL on the node's canvas view. |
navigate | Changes the current canvas URL. |
eval | Executes JavaScript within the rendered canvas. |
snapshot | Captures a screenshot of the current canvas. |
hide | Dismisses the canvas view. |
Sources: skills/canvas/SKILL.md:40-60
Networking & Tailscale
Because the Canvas Host binds to specific interfaces, the UI is often accessed via Tailscale hostnames to ensure cross-device connectivity.
This diagram represents the networking relationship between the Canvas host and the connected viewing nodes.
Sources: skills/canvas/SKILL.md:15-35
Agent Reasoning Visualization
The system prompt configuration allows for visualizing the agent's internal thought process. When reasoning is enabled (via /reasoning on), the TUI and potentially the Web UI display <think>...</think> tags to show the logic leading to a final response.
Sources: src/agents/system-prompt.ts:250-270, src/commands/status.command.ts:660-665
Summary
Clawdbot's interface ecosystem provides a comprehensive suite for both local management via the TUI and remote control through the Web UI. By integrating the A2UI protocol and the Canvas Host, Clawdbot extends simple chat capabilities into a rich, interactive environment where agents can generate complex interfaces and visualizations safely.