feat: add Playwright browser automation, react-webmcp library, and robustness fixes

ai-inspector-server (0.2.0):
- Add PlaywrightBrowserSource with 25 tools (23 browser automation + 2 WebMCP meta-tools)
- Per-session MCP server instances to fix "Server already initialized" errors
- Chrome 146+ version check and WebMCP availability check on startup
- Stale session handling (404 for unknown session IDs on non-initialize requests)
- Screenshot 10s timeout to prevent font-loading hangs
- Two-phase click strategy with force fallback for modal/overlay elements
- Comprehensive README with Mermaid architecture diagrams

ai-inspector-types (0.2.0):
- Add ToolCallResultContent type for rich tool results (text + image blocks)
- Breaking: ToolSource.callTool() returns ToolCallResultContent[] instead of string | null

webmcp-cdp (0.2.0):
- Auto re-discover tools after page navigation via Page.frameNavigated
- Extract discovery script to static constant
- Adapt callTool() to return ToolCallResultContent[]

react-webmcp (0.2.0):
- New library with React hooks (useWebMCPTool, useWebMCPContext, useToolEvent)
  and declarative components (WebMCPForm, WebMCPInput, WebMCPSelect, WebMCPTextarea)
- French Bistro and Flight Search demo apps
- toolAutoSubmit prop fix for agent-driven form submission

Author: AI Assistant

CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 0.2.0 (2026-02-17)
+
+### Features
+
+- **Page navigation re-discovery**: Tools are now automatically re-discovered after top-level `Page.frameNavigated` events — old tools are cleared immediately and the discovery script is re-injected into the new page context
+- **Extracted discovery script**: Discovery logic factored into a static `DISCOVERY_SCRIPT` constant, eliminating duplication between initial attach and navigation re-discovery
+- **Re-export `ToolCallResultContent`**: Convenience re-export from `@tech-sumit/ai-inspector-types`
+
+### Breaking changes
+
+- **`callTool()` return type**: Changed from `Promise<string | null>` to `Promise<ToolCallResultContent[]>` to align with updated `ToolSource` interface — text results are now wrapped in `[{ type: "text", text: value }]`
+
+### Bug fixes
+
+- **Stale tools after navigation**: Previously tools persisted from the old page context after navigating to a new URL; now `Page.frameNavigated` clears old tools and re-runs discovery
+- **Lost bindings after navigation**: `__webmcpToolsChanged` binding is re-added after frame navigation since the old JS context (and its bindings) are destroyed
+
 ## 0.1.0 (2026-02-17)
 
 ### Features

README.md

@@ -1,6 +1,6 @@
 # @tech-sumit/webmcp-cdp
 
-A standalone Node.js library for discovering and executing [WebMCP](https://github.com/nicholasgasior/nicholasgasior.github.io) tools in Chrome via the Chrome DevTools Protocol. Think "Playwright for WebMCP" — without Playwright.
+A standalone Node.js library for discovering and executing WebMCP tools in Chrome via the Chrome DevTools Protocol. Think "Playwright for WebMCP" — without Playwright.
 
 ## Requirements
 

__tests__/cdp-tool-source.test.ts

@@ -69,7 +69,7 @@ describe("CdpToolSource", () => {
       "searchFlights",
       '{"from":"SFO"}',
     );
-    expect(result).toBe('{"flights":[]}');
+    expect(result).toEqual([{ type: "text", text: '{"flights":[]}' }]);
   });
 
   it("should throw when calling unknown tool", async () => {

src/cdp-tool-source.ts

@@ -2,6 +2,7 @@ import CDP from "chrome-remote-interface";
 import type {
   ToolSource,
   ToolSourceConfig,
+  ToolCallResultContent,
   DiscoveredTool,
 } from "@tech-sumit/ai-inspector-types";
 import { TargetManager } from "./target-manager.js";
@@ -53,9 +54,24 @@ export class CdpToolSource implements ToolSource {
     this.connected = true;
   }
 
+  /**
+   * The tool discovery script injected into each page context.
+   * Registers a change callback so future tool changes trigger the
+   * `__webmcpToolsChanged` binding, and returns the current tools.
+   */
+  private static readonly DISCOVERY_SCRIPT = `(() => {
+    const mct = navigator.modelContextTesting;
+    if (!mct) return JSON.stringify([]);
+    mct.registerToolsChangedCallback(() => {
+      __webmcpToolsChanged(JSON.stringify(mct.listTools()));
+    });
+    return JSON.stringify(mct.listTools());
+  })()`;
+
   private async attachToTarget(target: CDP.Target): Promise<void> {
     const client: CDPClient = await CDP({ target } as CDP.Options);
     await client.Runtime.enable();
+    await client.Page.enable();
 
     // Set up binding for tool change notifications.
     // When the page calls __webmcpToolsChanged(payload), the
@@ -78,17 +94,48 @@ export class CdpToolSource implements ToolSource {
       },
     );
 
-    // Initial tool discovery — same pattern as model-context-tool-inspector.
-    // Registers a change callback so future tool changes trigger the binding.
+    // Re-discover tools after every navigation (the old JS context is destroyed).
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (client as any).on(
+      "Page.frameNavigated",
+      async (params: { frame: { parentId?: string } }) => {
+        // Only handle top-level frame navigations
+        if (params.frame.parentId) return;
+
+        // Clear tools immediately — old page context is gone
+        this.targetManager.updateTools(target.id, []);
+        this.notifyChange();
+
+        // Wait briefly for the new page to load and register tools
+        await new Promise((r) => setTimeout(r, 1000));
+
+        // Re-add the binding (it was lost with the old context)
+        try {
+          await client.Runtime.addBinding({ name: "__webmcpToolsChanged" });
+        } catch {
+          // Binding may already exist if Chrome persists it
+        }
+
+        // Re-run discovery in the new page context
+        try {
+          const { result } = await client.Runtime.evaluate({
+            expression: CdpToolSource.DISCOVERY_SCRIPT,
+            returnByValue: true,
+          });
+          const tools: DiscoveredTool[] = JSON.parse(
+            result.value as string,
+          );
+          this.targetManager.updateTools(target.id, tools);
+          this.notifyChange();
+        } catch {
+          // Page may not have modelContextTesting yet
+        }
+      },
+    );
+
+    // Initial tool discovery
     const { result } = await client.Runtime.evaluate({
-      expression: `(() => {
-        const mct = navigator.modelContextTesting;
-        if (!mct) return JSON.stringify([]);
-        mct.registerToolsChangedCallback(() => {
-          __webmcpToolsChanged(JSON.stringify(mct.listTools()));
-        });
-        return JSON.stringify(mct.listTools());
-      })()`,
+      expression: CdpToolSource.DISCOVERY_SCRIPT,
       returnByValue: true,
     });
 
@@ -120,12 +167,12 @@ export class CdpToolSource implements ToolSource {
    *
    * @param name - Tool name
    * @param inputArguments - JSON-encoded input (DOMString per WebMCP spec)
-   * @returns JSON-encoded result, or null for cross-document navigation
+   * @returns Array of content blocks (text results from WebMCP tool execution)
    */
   async callTool(
     name: string,
     inputArguments: string,
-  ): Promise<string | null> {
+  ): Promise<ToolCallResultContent[]> {
     const target = this.targetManager.findTargetForTool(name);
     if (!target) {
       throw new Error(
@@ -152,7 +199,8 @@ export class CdpToolSource implements ToolSource {
       throw new Error(msg);
     }
 
-    return (response.result.value as string) ?? null;
+    const value = (response.result.value as string) ?? null;
+    return [{ type: "text", text: value ?? "null" }];
   }
 
   onToolsChanged(cb: (tools: DiscoveredTool[]) => void): void {

src/index.ts

@@ -4,6 +4,7 @@ export type { ManagedTarget } from "./target-manager.js";
 
 // Re-export key types for convenience
 export type {
+  ToolCallResultContent,
   ToolSource,
   ToolSourceConfig,
   DiscoveredTool,