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

# Browser Automation as Agent Tool

> Use browser automation as a tool in your AI agents

<img src="https://mintcdn.com/morph-555d6c14/6bm3KIDcGh3tlVrb/images/browser-testing.webp?fit=max&auto=format&n=6bm3KIDcGh3tlVrb&q=85&s=3146cd49f725fc53a65e4d8fab1098ae" alt="Browser Tool" width="100%" style={{ borderRadius: 8, marginBottom: 24 }} data-path="images/browser-testing.webp" />

While we recommend [direct execution](/sdk/components/automation/browser/direct) for better control and live session access, you can also use browser tasks as agent tools in your AI applications.

## Quick Start

<CodeGroup>
  ```typescript Anthropic theme={null}
  import Anthropic from '@anthropic-ai/sdk';
  import { createBrowserTool } from '@morphllm/morphsdk/tools/browser/anthropic';

  const anthropic = new Anthropic();
  const { tool, execute } = createBrowserTool({
    apiKey: "YOUR_API_KEY"
  });

  const response = await anthropic.messages.create({
    model: "claude-sonnet-4-5-20250929",
    max_tokens: 12000,
    tools: [tool],
    messages: [{ 
      role: "user", 
      content: "Test checkout at https://myapp.e2b.dev" 
    }]
  });

  // Handle tool calls
  const toolUse = response.content.find(b => b.type === 'tool_use');
  if (toolUse) {
    const result = await execute(toolUse.input);
    console.log(result.result);
  }
  ```

  ```typescript OpenAI theme={null}
  import OpenAI from 'openai';
  import { createBrowserTool } from '@morphllm/morphsdk/tools/browser/openai';

  const openai = new OpenAI();
  const { tool, execute } = createBrowserTool({
    apiKey: "YOUR_API_KEY"
  });

  const response = await openai.chat.completions.create({
    model: "gpt-4o",
    tools: [tool],
    messages: [{ 
      role: "user", 
      content: "Test checkout at https://myapp.e2b.dev" 
    }]
  });

  // Handle tool calls
  const toolCall = response.choices[0].message.tool_calls?.[0];
  if (toolCall) {
    const result = await execute(toolCall.function.arguments);
    console.log(result.result);
  }
  ```

  ```typescript Vercel AI SDK theme={null}
  import { generateText, stepCountIs } from 'ai';
  import { anthropic } from '@ai-sdk/anthropic';
  import { createBrowserTool } from '@morphllm/morphsdk/tools/browser/vercel';

  const result = await generateText({
    model: anthropic('claude-sonnet-4-5-20250929'),
    tools: { browserTask: createBrowserTool({ apiKey: "YOUR_API_KEY" }) },
    prompt: "Test checkout at https://myapp.e2b.dev",
    stopWhen: stepCountIs(5)
  });

  console.log(result.text);
  ```
</CodeGroup>

## Tradeoffs

**Agent tools** (simpler integration):

* ✅ Easy to add to existing agent workflows
* ✅ Let the LLM decide when to use browser
* ❌ No live session URLs for monitoring
* ❌ No video recording support
* ❌ Adds extra LLM call overhead
* ❌ Limited debugging capabilities

**Direct execution** (recommended):

* ✅ Rich debugging data (URLs, actions, errors)
* ✅ Live session access for monitoring
* ✅ Video recording support
* ✅ Agent self-assessment
* ✅ No extra LLM calls
* ❌ Requires explicit calls (not agent-driven)

<Tip>
  For most use cases, we recommend [direct execution](/sdk/components/automation/browser/direct) for better control and debugging capabilities.
</Tip>

## Tool Configuration

All tool adapters support the same configuration options:

```typescript theme={null}
import { createBrowserTool } from '@morphllm/morphsdk/tools/browser/anthropic';

const { tool, execute } = createBrowserTool({
  apiKey: "YOUR_API_KEY",      // Optional if using env var
  model: 'morph-computer-use-v1',    // Default model (see options below)
  maxSteps: 20,                      // Default max steps
  apiUrl: 'https://browser.morphllm.com' // Override API URL
});
```

### Available Models

| Model                    | Description                                                       |
| ------------------------ | ----------------------------------------------------------------- |
| `morph-computer-use-v1`  | **Default.** Latest Morph model, optimized for browser automation |
| `morph-computer-use-v0`  | Legacy Morph model, stable fallback                               |
| `gemini-3-flash-preview` | Google Gemini 3 Flash, uses external Google API                   |

```typescript theme={null}
// Example: Using Gemini model
const { tool, execute } = createBrowserTool({
  apiKey: "YOUR_API_KEY",
  model: 'gemini-3-flash-preview'
});
```

### Site Authentication

Pass credentials when executing the tool:

```typescript theme={null}
const result = await execute({
  task: "Log in with x_user and x_pass and verify dashboard",
  url: "https://myapp.com/login",
  auth: {
    username: "test@example.com",
    password: "secret123"
  }
});
```

Supports username/password, per-domain credentials, and cookies. See [direct execution docs](/sdk/components/automation/browser/direct#site-authentication) for details.

## Example: Multi-tool Agent

Combine browser automation with other tools:

```typescript theme={null}
import Anthropic from '@anthropic-ai/sdk';
import { createBrowserTool } from '@morphllm/morphsdk/tools/browser/anthropic';

const anthropic = new Anthropic();
const { tool: browserTool, execute: executeBrowser } = createBrowserTool();

// Add other tools
const tools = [
  browserTool,
  {
    name: 'analyze_data',
    description: 'Analyze test results',
    input_schema: { /* ... */ }
  }
];

const response = await anthropic.messages.create({
  model: "claude-sonnet-4-5-20250929",
  max_tokens: 12000,
  tools,
  messages: [{
    role: "user",
    content: "Test the app at https://myapp.com and analyze the results"
  }]
});

// Handle tool calls
for (const block of response.content) {
  if (block.type === 'tool_use') {
    if (block.name === 'browser_task') {
      const result = await executeBrowser(block.input);
      console.log('Browser result:', result.result);
    }
    // Handle other tools...
  }
}
```

## Formatting Results

The tool adapters return concise results suitable for agent consumption. For custom formatting:

```typescript theme={null}
import { createBrowserTool } from '@morphllm/morphsdk/tools/browser/anthropic';
import { formatResult } from '@morphllm/morphsdk/tools/browser/anthropic';

const { tool, execute } = createBrowserTool();

// Custom execution with full data
const fullResult = await execute(input, { returnFullResponse: true });

// Format for agent consumption
const formattedResult = formatResult(fullResult);
console.log(formattedResult); // Concise summary

// Access full data if needed
console.log('URLs:', fullResult.urls);
console.log('Actions:', fullResult.actionNames);
```

## Migration from Direct Execution

If you're currently using direct execution and want to try tools:

**Before (direct execution)**:

```typescript theme={null}
import { MorphClient } from '@morphllm/morphsdk';

const morph = new MorphClient({ apiKey: "YOUR_API_KEY" });

const result = await morph.browser.execute({
  task: "Test checkout flow",
  url: "https://myapp.com",
  maxSteps: 20
});
```

**After (as tool)**:

```typescript theme={null}
import { createBrowserTool } from '@morphllm/morphsdk/tools/browser/anthropic';

const { tool, execute } = createBrowserTool({
  apiKey: "YOUR_API_KEY"
});

// Add to your agent's tools array
tools: [tool, /* other tools */]

// Agent will call when needed
```

<Note>
  Browser tools use a different pattern (`{ tool, execute }`) than other Morph tools. Use `createBrowserTool()` directly with the `apiKey` option, or use `morph.browser.execute()` for direct execution.
</Note>

## See Also

* [Direct Execution](/sdk/components/automation/browser/direct) - Recommended for most use cases
* [browser-use Python SDK](/guides/browser-use) - Python integration