OpenBrowserClaw

OpenBrowserClaw follows a specific execution flow for processing messages:

1. Input: You send a message via the built-in browser chat or the Telegram channel.
2. Orchestration: The orchestrator checks for trigger patterns, saves the message to IndexedDB, and queues it.
3. Agent Processing: An agent-worker (running in a Web Worker) sends the message and conversation history to the Anthropic API.
4. Tool Loop: If Claude decides to use a tool (like bash, javascript, or fetch_url), the tool result is fed back into the loop. This continues until a final text response is generated.
5. Output: The final response is routed back to the original channel (Browser or Telegram).

Since OpenBrowserClaw has zero runtime dependencies and runs entirely in the browser, you can deploy it to any static hosting provider (e.g., GitHub Pages, Cloudflare Pages, Netlify, Vercel, or S3).

Deployment Steps:

1. Build the production assets.
2. Upload the contents of the dist/ directory to your chosen host.

npm run build
# Upload dist/ to any static host

The bash tool requires a v86-emulated Alpine Linux environment. By default, this tool will return an error if the necessary assets are missing. To enable it, you must provide the following files in the public/assets/ directory:

• public/assets/v86.wasm
• public/assets/v86/libv86.js
• public/assets/alpine-rootfs.ext2

Once placed, the VM will boot automatically (taking approximately 5-15 seconds) upon the first use of the bash tool.

You can optionally use Telegram as a communication channel. This works via pure HTTPS and does not require WebSockets.

Important: The browser tab must remain open for the bot to respond. Messages sent to the bot while the tab is closed will queue on Telegram's side and be processed once you reopen the tab.

Setup Steps:

1. Create a bot using @BotFather on Telegram to obtain a bot token.
2. Open the Settings menu in OpenBrowserClaw and paste your bot token.
3. Send the /chatid command to your bot to retrieve your unique chat ID.
4. Enter that chat ID into the Settings in OpenBrowserClaw.

To run OpenBrowserClaw locally for development, follow these steps:

1. Navigate to the project directory.
2. Install dependencies using npm.
3. Start the development server.
4. Open the local URL in your browser.
5. Provide your Anthropic API key in the UI to begin chatting.

Note: This project runs entirely in the browser; no backend server is required.

cd openbrowserclaw
npm install
npm run dev

The TelegramChannel implementation includes built-in handlers for two specific commands to assist with configuration and connectivity testing:

• /chatid: Responds with the current chat's ID. Use this to find the ID you need to register in your OpenBrowserClaw settings.
• /ping: Responds with Pong! 🏓 OpenBrowserClaw is running. to verify the bot is active.

The OpenBrowserClaw shell emulator supports a subset of common bash commands and operators to facilitate lightweight terminal tasks in the browser.

Supported Builtins:

• Output: echo, printf
• File Reading: cat, head, tail
• Text Processing: wc, grep, sort, uniq, tr, cut, sed, awk
• Filesystem: ls, mkdir, cp, mv, rm, touch, pwd, cd
• Utilities: date, env, printenv, export, sleep, seq, base64, md5sum, sha256sum, tee, xargs, rev, basename, dirname, jq, which, command, true, false, test, [

Supported Operators:

• Pipes: |
• Redirection: >, >>
• Logical Operators: &&, ||
• Sequencing: ;
• Subshells/Interpolation: $(), `, $VAR, "interpolation"

To bridge the Orchestrator logic with the reactive UI state, you must call initOrchestratorStore with an instance of the Orchestrator. This function sets up the internal singleton, subscribes to all EventBus events (such as message, typing, tool-activity, and state-change), and automatically loads the message history from the database.

This must be called during the application startup sequence before any UI components attempt to access the store.

import { initOrchestratorStore } from './stores/orchestrator-store.js';
import { Orchestrator } from './orchestrator.js';

const orch = new Orchestrator(/* ... config ... */);
await initOrchestratorStore(orch);

The App component serves as the main entrypoint for the OpenBrowserClaw application shell. It manages the lifecycle of the Orchestrator instance, which is the core engine of the application.

During the boot process, the component:

1. Instantiates a new Orchestrator.
2. Calls orch.init() to prepare the engine.
3. Calls initOrchestratorStore(orch) to synchronize the orchestrator with the global application state.

If the orchestrator is not configured (checked via orch.isConfigured()), the application automatically redirects the user to the /settings route. Once configured, the default landing page is /chat.

import { App } from './App';

// The App component handles the orchestration lifecycle and routing.
// It manages transitions between /settings (if unconfigured) and /chat (if configured).
<App />

To use the WebVM functionality, the following assets must be served as static files from your web server. The VM expects them at these specific paths:

• Alpine Linux RootFS: /assets/alpine-rootfs.ext2 (approx. 30MB)
• v86 WASM Binary: /assets/v86.wasm
• v86 Library: /assets/v86/libv86.js

If these files are not present at these locations, the VM will fail to boot and executeInVM will return an error message suggesting alternative tools.

The agent can use the following tools to interact with the environment: