WebMCP

TypeScript SDK for Web AI Agents

Bi-directional communication between AI agent runtimes and browser content via Model Context Protocol.

Get StartedTry the DemoView on GitHub

Docs•GitHub•npm•Demo

---

Quick Start

import { WebMCPServer, WebStandardHttpTransport } from '@thestudioxi/webmcp';

const server = new WebMCPServer({
  transport: new WebStandardHttpTransport(),
});

server.registerTool(
  {
    name: 'get_page_content',
    description: 'Extract content from the active browser tab',
    inputSchema: {
      type: 'object',
      properties: {
        selector: { type: 'string', description: 'CSS selector' },
      },
    },
  },
  async (args) => {
    // AI agent can now read browser DOM in real time
    return { content: document.querySelector(args.selector)?.textContent };
  }
);

await server.start();

Installation

bun

bun add @thestudioxi/webmcp

npm

npm install @thestudioxi/webmcp

pnpm

pnpm add @thestudioxi/webmcp

---

Features

Browser-Native Communication

Inspect and manipulate active browser tab DOMs in real time without heavy headless browsers. Built on WebSocket, MessageChannel, and HTTP transports.

Zero-Config Tool Registration

Register and call web tools via bi-directional transports using a standard JSON-RPC protocol. Works with any framework.

Framework Adapters

First-class adapters for Express.js, Hono, NestJS, and Vercel AI SDK. Zero framework-specific dependencies in the core.

AI-Native Architecture

Dual SDK design with WebMCPBrowserBridge (frontend) and WebMCPAgentClient (backend). Built for autonomous agent loops.

Type-Safe & Modular

Full TypeScript declarations, transport-agnostic interfaces, and modular architecture. No implicit any types.

Lightweight & Fast

Built on Bun with sub-10ms JSON serialization overhead. Zero-dependency adapters that wrap the Web Standard Request/Response API.

---

Framework Adapters

First-class integrations — zero framework-specific dependencies in the core SDK.

⚙ Express.js ⚡ Hono ⚖ NestJS ◆ Vercel AI SDK