Try it · in this page

Run code in the sandbox

The left side is yours: the functions a host hands to the sandbox, running in this page against mocked data, and the code an agent would write against them. Press Run and the code executes in a Worker inside an opaque-origin frame, through @faustine-ai/browser-sandbox as installed from npm. The right side is the RunResult: value or error, the console, every call and its decision.

Pick an example to see approval, the busy-loop watchdog, the call cap or what an escape attempt finds. Nothing leaves your browser.

Functions

Host · runs in the page

1// Host side: these run in the page, with the page's session. The sandboxed
2// code can call them as sdk.<name>(input) and nothing else.
3// In scope here: defineFunctions, log(...) (prints below as "host"), sleep(ms).
4
5const orders = [
6  { id: 'ord_8f21', customer: 'Acme Corp', total: 180, status: 'open' },
7  { id: 'ord_8f3a', customer: 'Globex', total: 42, status: 'open' },
8  { id: 'ord_9012', customer: 'Initech', total: 310, status: 'open' },
9  { id: 'ord_77c0', customer: 'Acme Corp', total: 95, status: 'shipped' },
10];
11
12return defineFunctions({
13  'orders.list': async ({ status } = {}) => {
14    log('orders.list', status ?? 'all');
15    await sleep(120); // pretend this is an HTTP call
16    return orders.filter((o) => !status || o.status === status);
17  },
18
19  'orders.get': ({ id }) => orders.find((o) => o.id === id) ?? null,
20
21  'orders.cancel': {
22    call: ({ id }) => {
23      log('cancelling', id);
24      return { id, status: 'cancelled' };
25    },
26    approval: true,
27    description: 'Cancels an order. Cannot be undone.',
28  },
29
30  'util.sum': { call: (...nums) => nums.reduce((a, b) => a + b, 0), positional: true },
31
32  help: () => 'Try sdk.orders.list({ status: "open" })',
33});
34

// Host side: these run in the page, with the page's session. The sandboxed
// code can call them as sdk.<name>(input) and nothing else.
// In scope here: defineFunctions, log(...) (prints below as "host"), sleep(ms).

const orders = [
  { id: 'ord_8f21', customer: 'Acme Corp', total: 180, status: 'open' },
  { id: 'ord_8f3a', customer: 'Globex', total: 42, status: 'open' },
  { id: 'ord_9012', customer: 'Initech', total: 310, status: 'open' },
  { id: 'ord_77c0', customer: 'Acme Corp', total: 95, status: 'shipped' },
];

return defineFunctions({
  'orders.list': async ({ status } = {}) => {
    log('orders.list', status ?? 'all');
    await sleep(120); // pretend this is an HTTP call
    return orders.filter((o) => !status || o.status === status);
  },

  'orders.get': ({ id }) => orders.find((o) => o.id === id) ?? null,

  'orders.cancel': {
    call: ({ id }) => {
      log('cancelling', id);
      return { id, status: 'cancelled' };
    },
    approval: true,
    description: 'Cancels an order. Cannot be undone.',
  },

  'util.sum': { call: (...nums) => nums.reduce((a, b) => a + b, 0), positional: true },

  help: () => 'Try sdk.orders.list({ status: "open" })',
});

Agent code

Sandbox · runs in the Worker

Example

1// Agent side: runs in the Worker as the body of an async function.
2// `sdk` is the tree defined on the left; `console` is captured. Nothing else is here.
3
4const open = await sdk.orders.list({ status: 'open' });
5console.log(`${open.length} open orders`);
6
7const big = open.filter((o) => o.total > 100);
8console.info('over 100:', big.map((o) => o.id));
9
10return big.map((o) => ({ id: o.id, customer: o.customer, total: o.total }));
11

// Agent side: runs in the Worker as the body of an async function.
// `sdk` is the tree defined on the left; `console` is captured. Nothing else is here.

const open = await sdk.orders.list({ status: 'open' });
console.log(`${open.length} open orders`);

const big = open.filter((o) => o.total > 100);
console.info('over 100:', big.map((o) => o.id));

return big.map((o) => ({ id: o.id, customer: o.customer, total: o.total }));

Calls a function, logs, returns a value. The happy path.

Output

RunResult

Not run yet · caps timeout 20 s · busy 3 s · 50 ops · frame srcdoc

Console

console.log in the agent code and log() in the functions land here.

Calls

Every function call that crossed the bridge, with its decision.