Browser Automation as Agent 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);
}

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

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

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

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

// 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.

Get Started

Models

API Reference

Integrations

Quick Start

Tradeoffs

Tool Configuration

Available Models

Site Authentication

Example: Multi-tool Agent

Formatting Results

Migration from Direct Execution

See Also

​Quick Start

​Tradeoffs

​Tool Configuration

​Available Models

​Site Authentication

​Example: Multi-tool Agent

​Formatting Results

​Migration from Direct Execution

​See Also

Quick Start

Tradeoffs

Tool Configuration

Available Models

Site Authentication

Example: Multi-tool Agent

Formatting Results

Migration from Direct Execution

See Also