Skip to main content
Use these examples when an existing agent framework should get Webcompute as a browser subagent. All examples start the self-hosted MCP server with: 
web mcp run --surface agent --model browsing
Install example dependencies from this repo with pnpm install, or in an external project install the framework package plus @webcompute/sdk.

​
LangChain JS

import { MultiServerMCPClient } from "@langchain/mcp-adapters";
import { createAgent } from "langchain";
import { mcpPrompt } from "@webcompute/sdk";

const mcp = new MultiServerMCPClient({
  webcompute: {
    transport: "stdio",
    command: "web",
    args: ["mcp", "run", "--surface", "agent", "--model", "browsing"],
  },
});

const agent = createAgent({
  model: "openai:gpt-5.4-mini",
  tools: await mcp.getTools(),
  systemPrompt: mcpPrompt("agent"),
});
Full file: examples/mcp/langchain-agent.ts.

​
OpenAI Agents JS

import { Agent, MCPServerStdio, run } from "@openai/agents";
import { mcpPrompt } from "@webcompute/sdk";

const webcompute = new MCPServerStdio({
  name: "webcompute",
  fullCommand: "web mcp run --surface agent --model browsing",
});

await webcompute.connect();

const agent = new Agent({
  name: "Research Agent",
  instructions: mcpPrompt("agent"),
  mcpServers: [webcompute],
});
Full file: examples/mcp/openai-agents-agent.ts.

​
Claude Agent SDK

import { query } from "@anthropic-ai/claude-agent-sdk";
import { mcpPrompt } from "@webcompute/sdk";

for await (const message of query({
  prompt: "Use Webcompute to open https://example.com and return the title.",
  options: {
    mcpServers: {
      webcompute: {
        command: "web",
        args: ["mcp", "run", "--surface", "agent", "--model", "browsing"],
      },
    },
    allowedTools: ["mcp__webcompute__run_web_agent"],
    systemPrompt: {
      type: "preset",
      preset: "claude_code",
      append: mcpPrompt({ surface: "agent", toolPrefix: "mcp__webcompute__" }),
    },
  },
})) {
  if (message.type === "result" && message.subtype === "success") console.log(message.result);
}
Full file: examples/mcp/claude-agent-sdk-agent.ts.

​
Gemini JS

import { GoogleGenAI, mcpToTool } from "@google/genai";
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
import { mcpPrompt } from "@webcompute/sdk";

const client = new Client({ name: "webcompute-example", version: "1.0.0" });
await client.connect(new StdioClientTransport({
  command: "web",
  args: ["mcp", "run", "--surface", "agent", "--model", "browsing"],
}));

const ai = new GoogleGenAI({});
await ai.models.generateContent({
  model: "gemini-2.5-flash",
  contents: "Use Webcompute to open https://example.com and return the title.",
  config: { systemInstruction: mcpPrompt("agent"), tools: [mcpToTool(client)] },
});
Full file: examples/mcp/gemini-agent.ts.

​
Mastra

import { Agent } from "@mastra/core/agent";
import { MCPClient } from "@mastra/mcp";
import { mcpPrompt } from "@webcompute/sdk";

const mcp = new MCPClient({
  servers: {
    webcompute: {
      command: "web",
      args: ["mcp", "run", "--surface", "agent", "--model", "browsing"],
      forwardInstructions: false,
    },
  },
});

const agent = new Agent({
  id: "browser-agent",
  name: "Browser Agent",
  model: "openai/gpt-5.4-mini",
  instructions: mcpPrompt({
    surface: "agent",
    toolNames: { runWebAgent: "webcompute_run_web_agent" },
  }),
  tools: await mcp.listTools(),
});
Full file: examples/mcp/mastra-agent.ts.

​
OpenClaw

web mcp setup openclaw --surface agent --model browsing --instructions

{
  mcp: {
    servers: {
      webcompute: {
        command: "web",
        args: ["mcp", "run", "--surface", "agent", "--model", "browsing"],
      },
    },
  },
}
Full file: examples/mcp/openclaw-agent.json5.

​
Hermes

web mcp setup hermes --surface agent --model browsing --instructions

mcp_servers:
  webcompute:
    command: web
    args: ["mcp", "run", "--surface", "agent", "--model", "browsing"]
    tools:
      include: [run_web_agent]
    prompts: true
    resources: true
Full file: examples/mcp/hermes-agent.yaml.

​
Advanced runtime control

Use one direct MCP client when the parent app should own each browser step: 
web mcp run
Full file: examples/mcp/runtime-direct-mcp-client.ts.