Agents – Interactive browser terminals in Sandboxes

Agents – Interactive browser terminals in Sandboxes

The Sandbox SDK now supports PTY (pseudo-terminal) passthrough, enabling browser-based terminal UIs to connect to sandbox shells via WebSocket.

sandbox.terminal(request)

The new terminal() method proxies a WebSocket upgrade to the container’s PTY endpoint, with output buffering for replay on reconnect.

  • JavaScript

    // Worker: proxy WebSocket to container terminal
    return sandbox.terminal(request, { cols: 80, rows: 24 });
  • TypeScript

    // Worker: proxy WebSocket to container terminal
    return sandbox.terminal(request, { cols: 80, rows: 24 });

Multiple terminals per sandbox

Each session can have its own terminal with an isolated working directory and environment, so users can run separate shells side-by-side in the same container.

  • JavaScript

    // Multiple isolated terminals in the same sandbox
    const dev = await sandbox.getSession("dev");
    return dev.terminal(request);
  • TypeScript

    // Multiple isolated terminals in the same sandbox
    const dev = await sandbox.getSession("dev");
    return dev.terminal(request);

xterm.js addon

The new @cloudflare/sandbox/xterm export provides a SandboxAddon for xterm.js with automatic reconnection (exponential backoff + jitter), buffered output replay, and resize forwarding.

  • JavaScript

    import { SandboxAddon } from "@cloudflare/sandbox/xterm";
    const addon = new SandboxAddon({
    getWebSocketUrl: ({ sandboxId, origin }) =>
    `${origin}/ws/terminal?id=${sandboxId}`,
    onStateChange: (state, error) => updateUI(state),
    });
    terminal.loadAddon(addon);
    addon.connect({ sandboxId: "my-sandbox" });
  • TypeScript

    import { SandboxAddon } from "@cloudflare/sandbox/xterm";
    const addon = new SandboxAddon({
    getWebSocketUrl: ({ sandboxId, origin }) =>
    `${origin}/ws/terminal?id=${sandboxId}`,
    onStateChange: (state, error) => updateUI(state),
    });
    terminal.loadAddon(addon);
    addon.connect({ sandboxId: "my-sandbox" });

Upgrade

To update to the latest version:

npm i @cloudflare/sandbox@latest

Source: Cloudflare



Latest Posts

Pass It On
Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *