This reference is for the v0.8.0 SDK. Please see here for older versions.

Below is an example of how to use the Runtime SDK to post content on LinkedIn:

import { AnonRuntime } from "@anon/sdk-typescript";
import { LinkedIn } from "@anon/actions";

const anon = new AnonRuntime({ apiKey: "your api key here" });

// The username of the user whose account to use
const appUserId = "myProduct-user";
// The app sessions to inject
const apps = ["linkedin"];
// The action to be performed
const action = async (page) => {
  await page.goto("https://linkedin.com");
  await LinkedIn.createPost(page, {
    title: "I love Anon",
    content: "They make automating actions so easy! Check out docs.anon.com to learn more."
  });
}

// Run the action
(async () => {
  const { result, liveStreamingUrl } = await anon.run({
    appUserId,
    apps,
    action
  });

  // You can use the liveStreamingUrl to watch your action be performed.
  console.log(liveStreamingUrl);

  // Await the successful completion of the action
  await result;
})();

​
Advanced Configuration

​
Hosting

Anon supports running the automated browser session in a local or managed context. By default, the browser is managed by Anon. If you wish to run it in another environment, there are a few options available.

​
Remote Browser

You can connect Anon to a Chromium browser using a CDP (Chrome DevTools Protocol) URL.

const { result } = await anon.run({
  appUserId,
  apps,
  action
  cdpUrl: `wss://example.com`,
});

​
Proxying

Anon uses proxying to mimic the network behavior of your users. You can disable this, provide your own proxies, or use Anon’s proxies with your own browser instance.

​
Disable Proxying

const { result } = await anon.run({
  appUserId,
  apps,
  action,
  proxy: false,
});

​
Using your own Proxy

const { result } = await anon.run({
  appUserId,
  apps,
  action,
  proxy: {
    server: "my-example-proxy.com",
    username: "proxyUserName",
    password: "mysupersecretpasssword"
  }
});

​
Timeouts

A managed browser instance has a finite lifetime. There are two types of timeouts:

  • the permissible amount of time for a page to load (defaults to 30 seconds)

  • the total session lifetime (defaults to 15 minutes)

Both are configurable. Note that a local browser instance can be run indefinitely.

​
Setting the page timeout:

// Increase page load timeout to 1 minute
const { result } = await anon.run({ appUserId, apps, action, pageTimeout: 60 /* seconds */ });

​
Setting browser instance lifetime:

const sessionDuration = 30 * 60 // increase browser lifetime to 30 minutes
const { result } = await anon.run({ appUserId, apps, action, sessionDuration });

​
Monitoring

​
Live Session Rendering

Even though our managed instances are headless, you and your users can observe a rendered view of the webpage live.

const { result, liveStreamingUrl } = await anon.run({ appUserId, apps, action });

/// Opens a browser pointed at the liveStreamingUrl
async function launchMonitoringPage(liveStreamingUrl: string) {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  // Navigate to a website (replace with your desired URL)
  await page.goto(liveStreamingUrl);

  // Wait for 5 seconds to keep the browser open (you can adjust this)
  await page.waitForTimeout(5000);

  // Close the browser
  await browser.close();
}

await launchMonitoringPage(liveStreamingUrl)

You can even embed the webpage as an iframe. This can be shared with your users so that they can watch the automations as they happen.

import React, { useState } from 'react';
import { Button } from '@/components/ui/button';

const VNCViewer = ({ vncUrl }) => {
  const [isConnected, setIsConnected] = useState(false);

  const handleConnect = () => {
    setIsConnected(true);
  };

  const handleDisconnect = () => {
    setIsConnected(false);
  };

  return (
    <div className="p-4">
      <h2 className="text-2xl font-bold mb-4">VNC Viewer</h2>
      <div className="flex space-x-2 mb-4">
        <Button onClick={handleConnect} disabled={isConnected}>
          Connect
        </Button>
        <Button onClick={handleDisconnect} disabled={!isConnected}>
          Disconnect
        </Button>
      </div>
      {isConnected && (
        <div className="border border-gray-300 rounded">
          <iframe
            src={vncUrl}
            width="800"
            height="600"
            title="VNC Viewer"
            className="w-full h-[600px]"
          />
        </div>
      )}
    </div>
  );
};

​
Logs

You can pass in a custom Logger to the browser initialization for fine-grained control over logging:

// For example, to accumulate a list of all the logs for analytics, etc
const myLogs = [];

const { result } = await anon.run({
  appUserId,
  logger: {
    isEnabled: true,
    log: (name, severity, message, args) => myLogs.push({ name, severity, message, args})
  }
});

​
Screenshots

You can plug into the existing Playwright screenshot functionality as follows:

page.on("pageLoad", (e) => {
  const filename = `loaded_page_screenshot_${Date.now()}.png`;
  await page.screenshot(filename);
})

Was this page helpful?