Quick Start

This is the fastest way to understand the framework: open a page, snapshot it, save a persist key, extract structured data, inspect the network, and close the session.

Install

npm install opensteer
npx playwright install chromium

For CLI-only exploration:

npm install -g opensteer

Explore with the CLI

Open a persistent workspace session:

opensteer open https://example.com --workspace demo

Take an action snapshot and inspect the counters:

opensteer snapshot action --workspace demo

Click an element and save a reusable key while you do it:

opensteer click 3 --workspace demo --persist "primary call to action"

Take an extraction snapshot and save an extraction descriptor:

opensteer snapshot extraction --workspace demo
opensteer extract '{"title":{"element":2},"url":{"source":"current_url"}}' \
  --workspace demo \
  --persist "page summary"

Capture and inspect network traffic:

opensteer goto https://example.com/search?q=laptop --workspace demo --capture-network search
opensteer network query --workspace demo --capture search --json
opensteer network detail rec_123 --workspace demo --probe

When you are done:

opensteer close --workspace demo

Do the same thing in the SDK

import { Opensteer } from "opensteer";

const opensteer = new Opensteer({
  workspace: "demo",
  rootDir: process.cwd(),
});

try {
  await opensteer.open("https://example.com");

  const actionHtml = await opensteer.snapshot("action");
  console.log(actionHtml);

  await opensteer.click({
    element: 3,
    persist: "primary call to action",
  });

  await opensteer.snapshot("extraction");

  const data = await opensteer.extract({
    persist: "page summary",
    schema: {
      title: { element: 2 },
      url: { source: "current_url" },
    },
  });

  console.log(data);

  await opensteer.goto("https://example.com/search?q=laptop", {
    captureNetwork: "search",
  });

  const records = await opensteer.network.query({
    capture: "search",
    json: true,
  });

  const firstRecord = records.records[0];
  if (firstRecord) {
    const detail = await opensteer.network.detail(firstRecord.recordId, {
      probe: true,
    });

    console.log(detail.summary.url);
    console.log(detail.transportProbe?.recommended);
  }
} finally {
  await opensteer.close();
}

Final production code usually uses fetch()

During exploration you usually rely on snapshots, actions, and network.query().

Once you understand the site, production code often becomes a normal HTTP call through the browser session:

const response = await opensteer.fetch(
  "https://api.example.com/search",
  {
    query: {
      keyword: "laptop",
      count: 24,
    },
    cookies: true,
  },
);

const json = await response.json();
console.log(json);

That keeps the final artifact small. OpenSteer stays in the loop for session state, cookies, and transport selection.

What to read next

• Workspaces
• Selectors
• Network
• SDK Methods