Connect with WebMCP

1
import { Bctrl } from "@bctrl/sdk";
2
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
3
import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
4
5
const bctrl = new Bctrl({
6
  apiKey: process.env.BCTRL_API_KEY,
7
});
8
9
// 1. Create and start a browser Runtime.
10
const runtime = await bctrl.runtimes.create({
11
  type: "browser",
12
  name: "shopping-agent",
13
});
14
15
let mcp: Client | undefined;
16
17
try {
18
  const connection = runtime.connection;
19
  if (!connection?.webMcpUrl) {
20
    throw new Error("This browser host does not offer WebMCP");
21
  }
22
23
  // 2. Open a page that exposes WebMCP tools.
24
  const openCall = await bctrl.tools.start("browser.pages.open", {
25
    url: "https://your-webmcp-site.example/products",
26
  }, { runtimeId: runtime.id });
27
28
  await bctrl.toolCalls.result(openCall.id, {
29
    waitSeconds: 30,
30
  });
31
32
  // 3. Connect a standard MCP client to the active browser Run.
33
  mcp = new Client({
34
    name: "shopping-agent",
35
    version: "1.0.0",
36
  });
37
38
  await mcp.connect(
39
    new StreamableHTTPClientTransport(
40
      new URL(connection.webMcpUrl),
41
    ),
42
  );
43
44
  // 4. Discover the tools declared by the webpage.
45
  const { tools } = await mcp.listTools();
46
  console.log("Page tools:", tools.map((tool) => tool.name));
47
48
  const searchTool = tools.find(
49
    (tool) => tool.name === "search_catalog",
50
  );
51
52
  if (!searchTool) {
53
    throw new Error("The page does not expose search_catalog");
54
  }
55
56
  // 5. Call a page tool through WebMCP.
57
  const result = await mcp.callTool({
58
    name: searchTool.name,
59
    arguments: {
60
      query: "camera",
61
    },
62
  });
63
64
  console.log("Search result:", result.content);
65
} finally {
66
  // 6. Close the MCP connection and browser Runtime.
67
  await mcp?.close();
68
  await bctrl.runtimes.stop(runtime.id);
69
}

1
const runtime = await bctrl.runtimes.create({
2
  name: "shopping-agent",
3
});
4
5
const connection = runtime.connection;
6
if (!connection?.webMcpUrl) {
7
  throw new Error("This browser host does not offer WebMCP");
8
}
9
10
const { webMcpUrl, runId } = connection;

1
const runtime = await bctrl.runtimes.create({
2
  name: "shopping-agent",
3
  profile: true,
4
});
5
6
const started = await bctrl.runtimes.start(runtime.id);
7
const { webMcpUrl, runId } = { ...started.connection, runId: started.runId };
8
9
if (!webMcpUrl) {
10
  throw new Error("This browser host does not offer WebMCP");
11
}

1
const call = await bctrl.tools.start("browser.pages.open", {
2
  url: "https://your-webmcp-site.example",
3
}, { runtimeId: runtime.id });
4
5
await bctrl.toolCalls.result(call.id, {
6
  waitSeconds: 30,
7
});

1
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
2
import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
3
4
const client = new Client({
5
  name: "shopping-agent",
6
  version: "1.0.0",
7
});
8
9
const transport = new StreamableHTTPClientTransport(
10
  new URL(webMcpUrl),
11
);
12
13
await client.connect(transport);

1
const { tools } = await client.listTools();
2
3
for (const tool of tools) {
4
  console.log(tool.name, tool.description);
5
}

1
const result = await client.callTool({
2
  name: "search_catalog",
3
  arguments: {
4
    query: "camera",
5
  },
6
});
7
8
console.log(result.content);

1
await client.close();
2
await bctrl.runtimes.stop(runtime.id);