Skip to main content
Browser Tool While we recommend direct execution for better control and live session access, you can also use browser tasks as agent tools in your AI applications.

​
Quick Start

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);
}

​
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)
For most use cases, we recommend direct execution for better control and debugging capabilities.

​
Tool Configuration

All tool adapters support the same configuration options: 
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

ModelDescription
morph-computer-use-v1Default. Latest Morph model, optimized for browser automation
morph-computer-use-v0Legacy Morph model, stable fallback
gemini-3-flash-previewGoogle Gemini 3 Flash, uses external Google API
// 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: 
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 for details.

​
Example: Multi-tool Agent

Combine browser automation with other tools: 
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: 
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): 
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): 
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
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.

​
See Also