> ## Documentation Index
> Fetch the complete documentation index at: https://outcrawl.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Examples

> Five working Scout examples: research, a form fill, a compare, a sign-in, and the same research on Outcrawl's cloud.

export const OutcrawlStyles = () => {
  if (typeof document !== 'undefined' && !document.getElementById('outcrawl-overrides')) {
    const s = document.createElement('style');
    s.id = 'outcrawl-overrides';
    s.textContent = `
      /* Match the product's radius grid (4 / 6 / 8 / 9999), not Mintlify's default. */
      .rounded-sm { border-radius: 0.375rem !important; } /* 6px, --r-ctl */
      .rounded-md { border-radius: 0.375rem !important; } /* 6px, --r-ctl */
      .rounded-lg { border-radius: 0.5rem !important; }   /* 8px, --r-panel */
      .rounded-l-sm { border-top-left-radius: 0.375rem !important; border-bottom-left-radius: 0.375rem !important; }
      .rounded-r-sm { border-top-right-radius: 0.375rem !important; border-bottom-right-radius: 0.375rem !important; }
      .rounded-l-md { border-top-left-radius: 0.375rem !important; border-bottom-left-radius: 0.375rem !important; }
      .rounded-r-md { border-top-right-radius: 0.375rem !important; border-bottom-right-radius: 0.375rem !important; }
      .rounded-l-lg { border-top-left-radius: 0.5rem !important; border-bottom-left-radius: 0.5rem !important; }
      .rounded-r-lg { border-top-right-radius: 0.5rem !important; border-bottom-right-radius: 0.5rem !important; }

      /* Cards: never pure white in light mode, matching the one-big-card surface tone. */
      .card { background-color: #fcfcfc !important; border-radius: 0.5rem !important; }
      html.dark .card { background-color: #141311 !important; }

      /* Docs hero box */
      .oc-hero { background-color: #fcfcfc; border: 1px solid #e5e2dc; }
      html.dark .oc-hero { background-color: #141311; border-color: #26241f; }
      html.dark .oc-hero h1 { color: #edeae4; }

      /* Thin, transparent-track, hide-until-hover scrollbar. */
      ::-webkit-scrollbar { width: 6px; height: 6px; background-color: transparent; }
      ::-webkit-scrollbar-track { background-color: transparent; }
      ::-webkit-scrollbar-thumb { background-color: rgba(155, 155, 155, 0.5); border-radius: 10px; transition: opacity 0.3s ease; opacity: 0; }
      ::-webkit-scrollbar-thumb:hover { background-color: rgba(155, 155, 155, 0.7); }
      *:hover::-webkit-scrollbar-thumb,
      *:focus::-webkit-scrollbar-thumb,
      *:active::-webkit-scrollbar-thumb { opacity: 1; }
      * { scrollbar-width: thin; scrollbar-color: rgba(155, 155, 155, 0.5) transparent; }
    `;
    document.head.appendChild(s);
  }
  return null;
};

<OutcrawlStyles />

Tasks you would do in a browser yourself, written the way you would ask a colleague. Each is a working file in [`packages/scout/examples`](https://github.com/outcrawlai/scout/tree/main/packages/scout/examples), and each reads its models from the environment through [`examples/models.ts`](https://github.com/outcrawlai/scout/blob/main/packages/scout/examples/models.ts) (see [models from the environment](/docs/scout/models#models-from-the-environment)).

Each file's header gives the command that runs it from `packages/scout`, for example:

```bash theme={"theme":{"light":"github-light","dark":"catppuccin-mocha"}}
SCOUT_BASE_URL=https://your-endpoint/v1 SCOUT_API_KEY=... SCOUT_HANDS_MODEL=your-model-id \
  npx tsx examples/research.ts
```

The first four run on a local Chromium, `browser: { launch: {} }`. The last runs the research task on Outcrawl's cloud, the one line that changes.

## Research

The three most-commented stories on the Hacker News front page, as structured results. [`research.ts`](https://github.com/outcrawlai/scout/blob/main/packages/scout/examples/research.ts)

```ts wrap theme={"theme":{"light":"github-light","dark":"catppuccin-mocha"}}
const scout = new Scout({ browser: { launch: {} }, models: modelsFromEnv() });

const result = await scout.run(
  'Go to https://news.ycombinator.com and report the three stories with the most comments on the front page: ' +
    'title, link and comment count for each.',
  {
    caps: { steps: 15, duration: '8m' },
    schema: { /* stories: [{ title, url, comments }], at most 3 */ },
    onStep: (step) => console.log(`step ${String(step.index)}: ${step.action.description}`),
  },
);
```

## Fill in a form

Text fields, radio buttons, checkboxes and a submit, then read back what the server received. [`form-fill.ts`](https://github.com/outcrawlai/scout/blob/main/packages/scout/examples/form-fill.ts)

```ts wrap theme={"theme":{"light":"github-light","dark":"catppuccin-mocha"}}
const result = await scout.run(
  'Open https://httpbin.org/forms/post and order a pizza: customer name Ada Lovelace, telephone 555-0100, ' +
    'email ada@example.com, size Large, toppings Bacon and Extra Cheese, delivery time 19:30, ' +
    'delivery instructions "Ring twice". Submit the order, then report the customer name, size and toppings ' +
    'exactly as the page that loads after submitting shows them.',
  {
    caps: { steps: 25, duration: '10m' },
    schema: { /* customer, size, toppings */ },
  },
);
```

## Compare

Open two books and compare price and stock in one answer. A run that moves across several pages is where a `brain` model helps, so this one suggests setting `SCOUT_BRAIN_MODEL` as well. [`compare.ts`](https://github.com/outcrawlai/scout/blob/main/packages/scout/examples/compare.ts)

```ts wrap theme={"theme":{"light":"github-light","dark":"catppuccin-mocha"}}
const result = await scout.run(
  'On https://books.toscrape.com find the books "A Light in the Attic" and "Tipping the Velvet". ' +
    "Open each book's own page and report its price and how many copies are in stock, then say which is cheaper.",
  {
    caps: { steps: 30, duration: '15m' },
    // One named field per book rather than a list: Scout merges what each page
    // gives it field by field, so the first book's details survive while it
    // reads the second book's page. A list is replaced whole by each new read.
    schema: { /* lightInTheAttic, tippingTheVelvet, cheaper */ },
  },
);
```

## Sign in

Sign in, then read the page that is only there once you are signed in. The site is a public test site whose demo credentials are printed on its own login page. For a real site, read the credentials from your environment rather than writing them into the task. [`login.ts`](https://github.com/outcrawlai/scout/blob/main/packages/scout/examples/login.ts)

```ts wrap theme={"theme":{"light":"github-light","dark":"catppuccin-mocha"}}
const username = process.env['DEMO_USERNAME'] ?? 'student';
const password = process.env['DEMO_PASSWORD'] ?? 'Password123';

const result = await scout.run(
  `Go to https://practicetestautomation.com/practice-test-login/ and sign in with username "${username}" and ` +
    `password "${password}". Once you are signed in, extract the heading and the message of the page that welcomes you.`,
  {
    caps: { steps: 25, duration: '10m' },
    schema: { /* heading, message */ },
  },
);
```

## On Outcrawl's cloud

The research task again, on Outcrawl's cloud. One option changes, `browser: 'outcrawl'`: same agent, same models, same result shape, plus a replay link. Set `OUTCRAWL_API_KEY` as well. [`outcrawl.ts`](https://github.com/outcrawlai/scout/blob/main/packages/scout/examples/outcrawl.ts)

```ts wrap theme={"theme":{"light":"github-light","dark":"catppuccin-mocha"}}
// Reads OUTCRAWL_API_KEY. Pass { outcrawl: { apiKey, proxy, record } } to set them in code.
const scout = new Scout({ browser: 'outcrawl', models: modelsFromEnv() });

const result = await scout.run(/* the research task and schema */);

console.log(result.status, result.stopReason);
console.log(JSON.stringify(result.data, null, 2));
console.log('watch the run:', result.replayUrl ?? '(not recorded)');
```

Want the answer in a fixed shape, such as a list of names and prices? Pass a JSON Schema with the task, as every example here does, and the answer comes back in exactly that shape. See [running tasks](/docs/scout/runs#schema).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.