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

# Web Navigation Agent

> Build an agent that navigates multi-step UI flows — search, filter, select, checkout

Web navigation is where Stratus delivers its clearest wins. A standard LLM agent guesses each step from context. Stratus **encodes the current page state into a 768-dim embedding**, predicts what the next state will look like after each action, then hands a focused execution prompt to your LLM — using 68% fewer tokens with 2–3x higher task success.

<CardGroup cols={3}>
  <Card title="10/10 Levels" icon="trophy" color="#fbbf24">
    Stratus-powered agents completed every level in our benchmark. Baseline: 4/10.
  </Card>

  <Card title="2.3× Score" icon="chart-line" color="#22d3ee">
    8717 vs 3750 total points. The gap widens on tasks with cascading state transitions.
  </Card>

  <Card title="68% Fewer Tokens" icon="bolt" color="#c084fc">
    World model compression keeps context tight — your LLM sees a focused plan, not raw page noise.
  </Card>
</CardGroup>

## What We're Building

A hotel booking agent that navigates the full flow:

1. Search for "NYC hotels December 15–18"
2. Filter by rating and price
3. Select a hotel and check availability
4. Fill in guest details and proceed to checkout

Each step transitions the page state. Stratus predicts those transitions upfront and embeds them into the execution prompt — so your LLM doesn't get lost between steps.

## Setup

```bash theme={null}
npm install openai dotenv
```

```bash theme={null}
# .env
STRATUS_API_KEY=stratus_sk_live_your-key-here
```

## The Agent

<CodeGroup>
  ```typescript TypeScript theme={null}
  import OpenAI from 'openai';

  const client = new OpenAI({
    baseURL: 'https://api.stratus.run/v1',
    apiKey: process.env.STRATUS_API_KEY
  });

  interface NavigationStep {
    state: string;
    goal: string;
  }

  async function navigate(step: NavigationStep) {
    const response = await client.chat.completions.create({
      model: 'stratus-x1ac-base-gpt-4o',
      messages: [
        { role: 'system', content: `Current state: ${step.state}` },
        { role: 'user', content: step.goal }
      ]
    });

    const { action_sequence, confidence, planning_time_ms } = response.stratus;

    return {
      action: response.choices[0].message.content,
      plan: action_sequence,
      confidence
    };
  }

  async function bookHotel() {
    const flow: NavigationStep[] = [
      {
        state: 'Google homepage. Search box visible and active.',
        goal: 'Search for "NYC hotels December 15-18"'
      },
      {
        state: 'Google search results. Hotel listings visible. Filter panel on left: Price, Rating, Amenities.',
        goal: 'Filter by 4+ star rating and sort by price low to high'
      },
      {
        state: 'Filtered results. Top result: "The Manhattan Hotel" $189/night, 4.7 stars, "Check Availability" button visible.',
        goal: 'Click Check Availability for The Manhattan Hotel'
      },
      {
        state: 'Hotel availability page. Date picker shows Dec 15-18 pre-filled. Room types: Standard ($189), Deluxe ($249), Suite ($399). "Book Now" buttons next to each.',
        goal: 'Select the Standard room and click Book Now'
      },
      {
        state: 'Booking form. Fields: First Name, Last Name, Email, Phone. "Continue to Payment" button at bottom.',
        goal: 'Fill in guest details: John Smith, john@example.com, +1-555-0100'
      }
    ];

    for (const [i, step] of flow.entries()) {
      const result = await navigate(step);
      console.log(`Step ${i + 1}: ${result.action}`);
      console.log(`  Plan: ${result.plan.join(' → ')}`);
      console.log(`  Confidence: ${result.overall_confidence}\n`);
    }
  }

  bookHotel();
  ```

  ```python Python theme={null}
  import os
  from openai import OpenAI

  client = OpenAI(
      base_url="https://api.stratus.run/v1",
      api_key=os.environ["STRATUS_API_KEY"]
  )

  flow = [
      {
          "state": "Google homepage. Search box visible and active.",
          "goal": "Search for 'NYC hotels December 15-18'"
      },
      {
          "state": "Google search results. Hotel listings visible. Filter panel on left.",
          "goal": "Filter by 4+ star rating, sort by price low to high"
      },
      {
          "state": "Filtered results. Top: 'The Manhattan Hotel' $189/night, 4.7 stars. 'Check Availability' button visible.",
          "goal": "Click Check Availability for The Manhattan Hotel"
      },
      {
          "state": "Availability page. Dec 15-18 pre-filled. Standard $189, Deluxe $249, Suite $399.",
          "goal": "Select Standard room and click Book Now"
      },
      {
          "state": "Booking form. Fields: First Name, Last Name, Email, Phone.",
          "goal": "Fill in: John Smith, john@example.com, +1-555-0100"
      }
  ]

  for i, step in enumerate(flow):
      response = client.chat.completions.create(
          model="stratus-x1ac-base-gpt-4o",
          messages=[
              {"role": "system", "content": f"Current state: {step['state']}"},
              {"role": "user", "content": step["goal"]}
          ]
      )
      meta = response.stratus
      print(f"Step {i+1}: {response.choices[0].message.content}")
      print(f"  Plan: {' → '.join(meta.action_sequence)}")
      print(f"  Confidence: {meta.overall_confidence}\n")
  ```
</CodeGroup>

## State Description Quality

The quality of your `system` message is the single biggest lever for agent performance.

<Tabs>
  <Tab title="Low Quality">
    ```json theme={null}
    { "role": "system", "content": "hotel website" }
    ```

    Confidence: \~0.58. Stratus can't predict the next state without knowing what's visible.
  </Tab>

  <Tab title="High Quality">
    ```json theme={null}
    {
      "role": "system",
      "content": "Hotel availability page. Dec 15-18 pre-filled. Standard room $189/night visible. 'Book Now' button below each room type. Stripe payment form not yet visible."
    }
    ```

    Confidence: \~0.94. Stratus knows exactly what transition to predict and which actions to plan.
  </Tab>
</Tabs>

<Tip>
  Include: **what UI elements are visible**, **current values of interactive fields**, and **what is NOT yet visible**. Negative state is just as important as positive.
</Tip>

## Handling Low Confidence

When confidence drops below 0.75, the agent hit a state it can't predict well. Don't retry blindly — inspect the state and add more detail.

```typescript theme={null}
const result = await navigate(step);

if (result.overall_confidence < 0.75) {
  console.warn(`Low confidence at step ${i}: ${result.overall_confidence}`);
  console.warn('Add more state detail:', step.state);
  // Optionally: request a screenshot, capture DOM state, or ask user
}
```

## Choosing a Model

| Model                                 | Best For                                    | Latency  |
| ------------------------------------- | ------------------------------------------- | -------- |
| `stratus-x1ac-small-gpt-4o-mini`      | Prototyping, simple linear flows            | Fastest  |
| `stratus-x1ac-small-gpt-4o`           | Most navigation tasks                       | Fast     |
| `stratus-x1ac-base-gpt-4o`            | Complex multi-step, forms with dependencies | Moderate |
| `stratus-x1ac-base-claude-sonnet-4-5` | Long-context flows, detailed reasoning      | Moderate |

## Next Steps

<CardGroup cols={3}>
  <Card title="Cascade Prediction" icon="diagram-project" color="#c084fc" href="/docs/tutorials/cascade-prediction">
    When actions trigger downstream effects — handle chains before they fire.
  </Card>

  <Card title="Temporal Sequencing" icon="clock" color="#fbbf24" href="/docs/tutorials/temporal-sequencing">
    Order-sensitive workflows with concurrency constraints.
  </Card>

  <Card title="API Reference" icon="code" color="#22d3ee" href="/docs/api-reference/chat-completions">
    Full chat completions docs and all parameters.
  </Card>
</CardGroup>