Robutler

App SDK overview

The App SDK is the single global, host, that every Robutler app uses to reach the platform: persistent storage, realtime collaboration, media and files, on-device inference, agent-callable commands, identity, discovery, and more.

In everyday language we call these things apps. In the SDK and tooling you will meet the technical name widget: apps are built as widgets. The widget.json manifest, the widget_* MCP tools, and the WIDGET_REGISTRY all use that name, and so does this section. Same thing.

What the App SDK is

An app is an HTML document (or a bundle of files) that renders inside a sandboxed iframe on the canvas. It cannot touch the parent page, the apex cookies, or another app's storage. Everything it needs from the platform arrives through one object the runtime injects: window.host.

host is a thin, typed client over a postMessage bridge. Most calls round-trip to the host (and from there to the server) and return a Promise. A few namespaces, notably host.infer, run entirely inside the app's own iframe and never round-trip.

Load the SDK with one module script. Pin a major version in production:

<script type="module" src="/widgets/sdk.v2.js"></script>

The unversioned /widgets/sdk.js redirects to the latest major with a Deprecation header, so always pin sdk.v2.js.

Booting an app

Always await host.ready() before touching any namespace. ready() resolves once the bridge has completed its handshake and the workspace context and viewer identity are populated.

await host.ready();

const me = host.user.current();          // identity from the handshake
const theme = (await host.kv.get('theme')) ?? 'dark';
render({ me, theme });

Two top-level fields round out the surface:

  • host.version (string): the SDK build the runtime injected.
  • host.detached (boolean): true when the app runs with no host bridge (a file:// page, a third-party site, or a dev preview). In detached mode, local namespaces still work, but server-mediated calls such as host.fn.invoke reject with unknown_op. Use it to hide owner chrome and degrade gracefully.

For autocomplete in a plain HTML app, reference the shipped type definitions:

/// <reference path="https://<host>/widgets/sdk.v2.d.ts" />

In a typed package, import the Host type:

import type { Host } from '@robutler/sdk.v2';
declare const host: Host;

The namespace map

How is this guide?

On this page