How to integrate Anchor browser MCP with Vercel AI SDK v6

Trusted by
AWS
Glean
Zoom
Airtable
GET STARTED FOR FREEGET A DEMO

30 min · no commitment · see it on your stack

Anchor browser logo
Vercel AI SDK logo
divider

Introduction

This guide walks you through connecting Anchor browser to Vercel AI SDK v6 using the Composio tool router. By the end, you'll have a working Anchor browser agent that can fetch full content of a product page, list all active browser sessions now, get details for a specific browser profile through natural language commands.

This guide will help you understand how to give your Vercel AI SDK agent real control over a Anchor browser account through Composio's Anchor browser MCP server.

Before we dive in, let's take a quick look at the key ideas and tools involved.

Also integrate Anchor browser with

TL;DR

Here's what you'll learn:
  • How to set up and configure a Vercel AI SDK agent with Anchor browser integration
  • Using Composio's Tool Router to dynamically load and access Anchor browser tools
  • Creating an MCP client connection using HTTP transport
  • Building an interactive CLI chat interface with conversation history management
  • Handling tool calls and results within the Vercel AI SDK framework

What is Vercel AI SDK?

The Vercel AI SDK is a TypeScript library for building AI-powered applications. It provides tools for creating agents that can use external services and maintain conversation state.

Key features include:

  • streamText: Core function for streaming responses with real-time tool support
  • MCP Client: Built-in support for Model Context Protocol via @ai-sdk/mcp
  • Step Counting: Control multi-step tool execution with stopWhen: stepCountIs()
  • OpenAI Provider: Native integration with OpenAI models

What is the Anchor browser MCP server, and what's possible with it?

The Anchor browser MCP server is an implementation of the Model Context Protocol that connects your AI agent and assistants like Claude, Cursor, etc directly to your Anchor browser account. It provides structured and secure access to powerful web automation features, so your agent can fetch web content, manage browser sessions, control profiles, and interact with extensions on your behalf.

  • Automated webpage content retrieval: Instruct your agent to browse to any URL and fetch the fully rendered page content in HTML or markdown, enabling easy scraping or summarization.
  • Session and profile management: Let your agent create, list, or delete browser profiles, as well as start, end, or monitor multiple browsing sessions for different workflows or user contexts.
  • Browser extension control: Have the agent list all installed browser extensions, making it easy to audit and manage your browser environment programmatically.
  • Resource and file listing: Ask your agent to retrieve a list of files or resources uploaded during browser automation tasks, ensuring nothing gets lost in the shuffle.
  • Comprehensive session oversight: Quickly get an overview of all active browser sessions, their statuses, and terminate any or all sessions instantly for security or resource management needs.

Supported Tools & Triggers

Tools
Click MouseTool to perform a mouse click at specified coordinates within a browser session.
Copy Selected TextTool to copy currently selected text in a browser session to the clipboard.
Create IntegrationTool to create a new integration with a third-party service like 1Password.
Create or Update Task DraftTool to create or update the draft version of a task.
Create ProfileCreates a new browser profile from an active session.
Create TaskTool to create a new task or update an existing task with the same name.
Delete ExtensionTool to delete a browser extension and remove it from storage.
Delete IntegrationTool to delete an existing integration and remove its stored credentials.
Delete ProfileTool to delete a browser profile by ID.
Delete TaskTool to soft delete a task and all its versions.
Delete Task VersionTool to soft delete a specific version of a task.
Deploy TaskTool to deploy a task by creating a new version with auto-incremented version number.
Double Click MouseTool to perform a double click at specified coordinates in a browser session.
Drag and DropTool to perform a drag and drop operation from start coordinates to end coordinates within a browser session.
End All SessionsTool to terminate all active browser sessions at once.
End Browser SessionTool to end a specific browser session by ID.
Get Batch Session StatusTool to retrieve detailed status information for a specific batch including progress and errors.
Get Browser SessionTool to retrieve detailed information about a specific browser session.
Get Clipboard ContentTool to retrieve the current content of the clipboard from a browser session.
Get Latest Task VersionTool to retrieve the latest version of a task including the full base64 encoded code content.
Get Profile (v2)Tool to retrieve details of a specific profile by its name.
Get Session PagesTool to retrieve all pages associated with a specific browser session.
Get Task DraftTool to retrieve the draft version of a task, including the full Base64 encoded code content.
Get Task Execution ResultTool to retrieve a single task execution result by its ID.
Get Task MetadataTool to retrieve task metadata without downloading the full task code.
Get Task VersionTool to retrieve a specific version of a task, including the full code content.
Get Webpage ContentTool to retrieve rendered content of a webpage in HTML or Markdown format.
List Agent ResourcesList all agent resources (files) uploaded to a browser session.
List ExtensionsRetrieves all browser extensions uploaded by the authenticated user.
List IntegrationsTool to retrieve all integrations for the authenticated team.
List ProfilesTool to fetch all stored browser profiles.
List Session DownloadsTool to retrieve metadata of files downloaded during a browser session.
List Session RecordingsTool to list all recordings for a specific browser session.
List SessionsTool to list all browser sessions.
List Task ExecutionsTool to retrieve execution history for a specific task with filtering and pagination support.
List TasksTool to retrieve a paginated list of all tasks for the authenticated team.
List Task VersionsTool to retrieve all versions of a specific task, including draft and published versions.
Mouse MoveTool to move the mouse cursor to specified coordinates within a browser session.
Navigate to URLTool to navigate a browser session to a specified URL.
Paste TextTool to paste text at the current cursor position in a browser session.
Pause AgentTool to pause the AI agent for a specific browser session.
Pause Session RecordingTool to pause the video recording for a specific browser session.
Perform Keyboard ShortcutTool to perform a keyboard shortcut using specified keys in a browser session.
Perform Web TaskTool to perform autonomous web tasks using AI agents.
Mouse DownTool to perform a mouse button down action at specified coordinates within a browser session.
Publish Task VersionTool to publish a specific version of a task.
Release Mouse ButtonTool to release a mouse button at specified coordinates within a browser session.
Resume AgentTool to resume the AI agent for a specific browser session.
Resume Session RecordingTool to resume video recording for a specific browser session.
Run TaskTool to execute a task in a browser session with a specific or latest version.
Run Task by NameTool to execute a task by its name, always using the latest version.
Screenshot WebpageTool to take a screenshot of a specified webpage within a session.
Scroll SessionTool to perform a scroll action at specified coordinates within a browser session.
Set Clipboard ContentTool to set the content of the clipboard in a browser session.
Signal EventTool to signal a specific event to be received by other processes or sessions.
Start Browser SessionTool to start a new browser session with optional customizations.
Take ScreenshotTool to take a screenshot of the current browser session and return it as an image.
Type TextTool to type specified text with optional delay between keystrokes.
Update ProfileUpdates an existing browser profile with data from an active session.
Update Task MetadataUpdates task metadata (name and description).
Upload ExtensionTool to upload a new browser extension as a ZIP file for use in browser sessions.
Upload FileTool to upload a file to a browser session as an agent resource.
Upload Files to SessionTool to upload files directly to a browser session for use with web forms and file inputs.
Wait for EventBlocks execution until a specific named event is signaled or the timeout expires.

What is the Composio tool router, and how does it fit here?

What is Composio SDK?

Composio's Composio SDK helps agents find the right tools for a task at runtime. You can plug in multiple toolkits (like Gmail, HubSpot, and GitHub), and the agent will identify the relevant app and action to complete multi-step workflows. This can reduce token usage and improve the reliability of tool calls. Read more here: Getting started with Composio SDK

The tool router generates a secure MCP URL that your agents can access to perform actions.

How the Composio SDK works

The Composio SDK follows a three-phase workflow:

  1. Discovery: Searches for tools matching your task and returns relevant toolkits with their details.
  2. Authentication: Checks for active connections. If missing, creates an auth config and returns a connection URL via Auth Link.
  3. Execution: Executes the action using the authenticated connection.

Step-by-step Guide

Prerequisites

Before you begin, make sure you have:
  • Node.js and npm installed
  • A Composio account with API key
  • An OpenAI API key

Getting API Keys for OpenAI and Composio

OpenAI API Key
  • Go to the OpenAI dashboard and create an API key. You'll need credits to use the models, or you can connect to another model provider.
  • Keep the API key safe.
Composio API Key
  • Log in to the Composio dashboard.
  • Navigate to your API settings and generate a new API key.
  • Store this key securely as you'll need it for authentication.

Install required dependencies

bash
npm install @ai-sdk/openai @ai-sdk/mcp @composio/core ai dotenv

First, install the necessary packages for your project.

What you're installing:

  • @ai-sdk/openai: Vercel AI SDK's OpenAI provider
  • @ai-sdk/mcp: MCP client for Vercel AI SDK
  • @composio/core: Composio SDK for tool integration
  • ai: Core Vercel AI SDK
  • dotenv: Environment variable management

Set up environment variables

bash
OPENAI_API_KEY=your_openai_api_key_here
COMPOSIO_API_KEY=your_composio_api_key_here
COMPOSIO_USER_ID=your_user_id_here

Create a .env file in your project root.

What's needed:

  • OPENAI_API_KEY: Your OpenAI API key for GPT model access
  • COMPOSIO_API_KEY: Your Composio API key for tool access
  • COMPOSIO_USER_ID: A unique identifier for the user session

Import required modules and validate environment

typescript
import "dotenv/config";
import { openai } from "@ai-sdk/openai";
import { Composio } from "@composio/core";
import * as readline from "readline";
import { streamText, type ModelMessage, stepCountIs } from "ai";
import { createMCPClient } from "@ai-sdk/mcp";

const composioAPIKey = process.env.COMPOSIO_API_KEY;
const composioUserID = process.env.COMPOSIO_USER_ID;

if (!process.env.OPENAI_API_KEY) throw new Error("OPENAI_API_KEY is not set");
if (!composioAPIKey) throw new Error("COMPOSIO_API_KEY is not set");
if (!composioUserID) throw new Error("COMPOSIO_USER_ID is not set");

const composio = new Composio({
  apiKey: composioAPIKey,
});
What's happening:
  • We're importing all necessary libraries including Vercel AI SDK's OpenAI provider and Composio
  • The dotenv/config import automatically loads environment variables
  • The MCP client import enables connection to Composio's tool server

Create Tool Router session and initialize MCP client

typescript
async function main() {
  // Create a tool router session for the user
  const session = await composio.create(composioUserID!, {
    toolkits: ["anchor_browser"],
  });

  const mcpUrl = session.mcp.url;
What's happening:
  • We're creating a Tool Router session that gives your agent access to Anchor browser tools
  • The create method takes the user ID and specifies which toolkits should be available
  • The returned mcp object contains the URL and authentication headers needed to connect to the MCP server
  • This session provides access to all Anchor browser-related tools through the MCP protocol

Connect to MCP server and retrieve tools

typescript
const mcpClient = await createMCPClient({
  transport: {
    type: "http",
    url: mcpUrl,
    headers: session.mcp.headers, // Authentication headers for the Composio MCP server
  },
});

const tools = await mcpClient.tools();
What's happening:
  • We're creating an MCP client that connects to our Composio Tool Router session via HTTP
  • The mcp.url provides the endpoint, and mcp.headers contains authentication credentials
  • The type: "http" is important - Composio requires HTTP transport
  • tools() retrieves all available Anchor browser tools that the agent can use

Initialize conversation and CLI interface

typescript
let messages: ModelMessage[] = [];

console.log("Chat started! Type 'exit' or 'quit' to end the conversation.\n");
console.log(
  "Ask any questions related to anchor_browser, like summarize my last 5 emails, send an email, etc... :)))\n",
);

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
  prompt: "> ",
});

rl.prompt();
What's happening:
  • We initialize an empty messages array to maintain conversation history
  • A readline interface is created to accept user input from the command line
  • Instructions are displayed to guide the user on how to interact with the agent

Handle user input and stream responses with real-time tool feedback

typescript
rl.on("line", async (userInput: string) => {
  const trimmedInput = userInput.trim();

  if (["exit", "quit", "bye"].includes(trimmedInput.toLowerCase())) {
    console.log("\nGoodbye!");
    rl.close();
    process.exit(0);
  }

  if (!trimmedInput) {
    rl.prompt();
    return;
  }

  messages.push({ role: "user", content: trimmedInput });
  console.log("\nAgent is thinking...\n");

  try {
    const stream = streamText({
      model: openai("gpt-5"),
      messages,
      tools,
      toolChoice: "auto",
      stopWhen: stepCountIs(10),
      onStepFinish: (step) => {
        for (const toolCall of step.toolCalls) {
          console.log(`[Using tool: ${toolCall.toolName}]`);
          }
          if (step.toolCalls.length > 0) {
            console.log(""); // Add space after tool calls
          }
        },
      });

      for await (const chunk of stream.textStream) {
        process.stdout.write(chunk);
      }

      console.log("\n\n---\n");

      // Get final result for message history
      const response = await stream.response;
      if (response?.messages?.length) {
        messages.push(...response.messages);
      }
    } catch (error) {
      console.error("\nAn error occurred while talking to the agent:");
      console.error(error);
      console.log(
        "\nYou can try again or restart the app if it keeps happening.\n",
      );
    } finally {
      rl.prompt();
    }
  });

  rl.on("close", async () => {
    await mcpClient.close();
    console.log("\n👋 Session ended.");
    process.exit(0);
  });
}

main().catch((err) => {
  console.error("Fatal error:", err);
  process.exit(1);
});
What's happening:
  • We use streamText instead of generateText to stream responses in real-time
  • toolChoice: "auto" allows the model to decide when to use Anchor browser tools
  • stopWhen: stepCountIs(10) allows up to 10 steps for complex multi-tool operations
  • onStepFinish callback displays which tools are being used in real-time
  • We iterate through the text stream to create a typewriter effect as the agent responds
  • The complete response is added to conversation history to maintain context
  • Errors are caught and displayed with helpful retry suggestions

Complete Code

Here's the complete code to get you started with Anchor browser and Vercel AI SDK:

typescript
import "dotenv/config";
import { openai } from "@ai-sdk/openai";
import { Composio } from "@composio/core";
import * as readline from "readline";
import { streamText, type ModelMessage, stepCountIs } from "ai";
import { createMCPClient } from "@ai-sdk/mcp";

const composioAPIKey = process.env.COMPOSIO_API_KEY;
const composioUserID = process.env.COMPOSIO_USER_ID;

if (!process.env.OPENAI_API_KEY) throw new Error("OPENAI_API_KEY is not set");
if (!composioAPIKey) throw new Error("COMPOSIO_API_KEY is not set");
if (!composioUserID) throw new Error("COMPOSIO_USER_ID is not set");

const composio = new Composio({
  apiKey: composioAPIKey,
});

async function main() {
  // Create a tool router session for the user
  const session = await composio.create(composioUserID!, {
    toolkits: ["anchor_browser"],
  });

  const mcpUrl = session.mcp.url;

  const mcpClient = await createMCPClient({
    transport: {
      type: "http",
      url: mcpUrl,
      headers: session.mcp.headers, // Authentication headers for the Composio MCP server
    },
  });

  const tools = await mcpClient.tools();

  let messages: ModelMessage[] = [];

  console.log("Chat started! Type 'exit' or 'quit' to end the conversation.\n");
  console.log(
    "Ask any questions related to anchor_browser, like summarize my last 5 emails, send an email, etc... :)))\n",
  );

  const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
    prompt: "> ",
  });

  rl.prompt();

  rl.on("line", async (userInput: string) => {
    const trimmedInput = userInput.trim();

    if (["exit", "quit", "bye"].includes(trimmedInput.toLowerCase())) {
      console.log("\nGoodbye!");
      rl.close();
      process.exit(0);
    }

    if (!trimmedInput) {
      rl.prompt();
      return;
    }

    messages.push({ role: "user", content: trimmedInput });
    console.log("\nAgent is thinking...\n");

    try {
      const stream = streamText({
        model: openai("gpt-5"),
        messages,
        tools,
        toolChoice: "auto",
        stopWhen: stepCountIs(10),
        onStepFinish: (step) => {
          for (const toolCall of step.toolCalls) {
            console.log(`[Using tool: ${toolCall.toolName}]`);
          }
          if (step.toolCalls.length > 0) {
            console.log(""); // Add space after tool calls
          }
        },
      });

      for await (const chunk of stream.textStream) {
        process.stdout.write(chunk);
      }

      console.log("\n\n---\n");

      // Get final result for message history
      const response = await stream.response;
      if (response?.messages?.length) {
        messages.push(...response.messages);
      }
    } catch (error) {
      console.error("\nAn error occurred while talking to the agent:");
      console.error(error);
      console.log(
        "\nYou can try again or restart the app if it keeps happening.\n",
      );
    } finally {
      rl.prompt();
    }
  });

  rl.on("close", async () => {
    await mcpClient.close();
    console.log("\n👋 Session ended.");
    process.exit(0);
  });
}

main().catch((err) => {
  console.error("Fatal error:", err);
  process.exit(1);
});

Conclusion

You've successfully built a Anchor browser agent using the Vercel AI SDK with streaming capabilities! This implementation provides a powerful foundation for building AI applications with natural language interfaces and real-time feedback.

Key features of this implementation:

  • Real-time streaming responses for a better user experience with typewriter effect
  • Live tool execution feedback showing which tools are being used as the agent works
  • Dynamic tool loading through Composio's Tool Router with secure authentication
  • Multi-step tool execution with configurable step limits (up to 10 steps)
  • Comprehensive error handling for robust agent execution
  • Conversation history maintenance for context-aware responses

You can extend this further by adding custom error handling, implementing specific business logic, or integrating additional Composio toolkits to create multi-app workflows.

How to build Anchor browser MCP Agent with another framework

OpenAI Agents SDK logo

OpenAI Agents SDK

Use Anchor browser MCP with OpenAI Agents SDK

Claude Agent SDK logo

Claude Agent SDK

Use Anchor browser MCP with Claude Agent SDK

Claude Code logo

Claude Code

Use Anchor browser MCP with Claude Code

Claude Cowork logo

Claude Cowork

Use Anchor browser MCP with Claude Cowork

Codex logo

Codex

Use Anchor browser MCP with Codex

OpenClaw logo

OpenClaw

Use Anchor browser MCP with OpenClaw

Hermes logo

Hermes

Use Anchor browser MCP with Hermes

CLI logo

CLI

Use Anchor browser MCP with CLI

Google ADK logo

Google ADK

Use Anchor browser MCP with Google ADK

LangChain logo

LangChain

Use Anchor browser MCP with LangChain

Mastra AI logo

Mastra AI

Use Anchor browser MCP with Mastra AI

LlamaIndex logo

LlamaIndex

Use Anchor browser MCP with LlamaIndex

CrewAI logo

CrewAI

Use Anchor browser MCP with CrewAI

FAQ

What are the differences in Tool Router MCP and Anchor browser MCP?

With a standalone Anchor browser MCP server, the agents and LLMs can only access a fixed set of Anchor browser tools tied to that server. However, with the Composio Tool Router, agents can dynamically load tools from Anchor browser and many other apps based on the task at hand, all through a single MCP endpoint.

Can I use Tool Router MCP with Vercel AI SDK v6?

Yes, you can. Vercel AI SDK v6 fully supports MCP integration. You get structured tool calling, message history handling, and model orchestration while Tool Router takes care of discovering and serving the right Anchor browser tools.

Can I manage the permissions and scopes for Anchor browser while using Tool Router?

Yes, absolutely. You can configure which Anchor browser scopes and actions are allowed when connecting your account to Composio. You can also bring your own OAuth credentials or API configuration so you keep full control over what the agent can do.

How safe is my data with Composio Tool Router?

All sensitive data such as tokens, keys, and configuration is fully encrypted at rest and in transit. Composio is SOC 2 Type 2 compliant and follows strict security practices so your Anchor browser data and credentials are handled as safely as possible.

Used by agents from

Context
Letta
glean
HubSpot
Agent.ai
Altera
DataStax
Entelligence
Rolai
Context
Letta
glean
HubSpot
Agent.ai
Altera
DataStax
Entelligence
Rolai
Context
Letta
glean
HubSpot
Agent.ai
Altera
DataStax
Entelligence
Rolai

Never worry about agent reliability

We handle tool reliability, observability, and security so you never have to second-guess an agent action.

Get started for freeGet a demo↗