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

# MCP framework examples

> Connect LangChain, OpenAI Agents, Claude Agent SDK, Gemini, Mastra, OpenClaw, and Hermes to Webcompute MCP agent mode.

Use these examples when an existing agent framework should get Webcompute as a
browser subagent. All examples start the self-hosted MCP server with:

```bash theme={null}
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

```ts theme={null}
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

```ts theme={null}
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

```ts theme={null}
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

```ts theme={null}
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

```ts theme={null}
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

```bash theme={null}
web mcp setup openclaw --surface agent --model browsing --instructions
```

```json5 theme={null}
{
  mcp: {
    servers: {
      webcompute: {
        command: "web",
        args: ["mcp", "run", "--surface", "agent", "--model", "browsing"],
      },
    },
  },
}
```

Full file: `examples/mcp/openclaw-agent.json5`.

## Hermes

```bash theme={null}
web mcp setup hermes --surface agent --model browsing --instructions
```

```yaml theme={null}
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:

```bash theme={null}
web mcp run
```

Full file: `examples/mcp/runtime-direct-mcp-client.ts`.