add mcp ui to embed browser in compatible clients #108

kamath · 2025-08-20T01:42:15Z

Added MCP UI and cleaned up a few small things to support latest spec

Built-in.Retina.Display.mp4

greptile-apps

Greptile Summary

This PR introduces MCP UI functionality to the Browserbase MCP server, enabling visual browser session interfaces directly within MCP clients. The changes transform the server from a command-line only tool to one that supports embedded UI components.

Key changes include:

UI Integration: Added @mcp-ui/server dependency and integrated UI resource creation in the session management tool, allowing users to view Browserbase debugger interfaces as embedded iframes
Module System Modernization: Updated TypeScript configuration from Node16 to ESNext with bundler resolution to support modern UI libraries and bundling tools
Import Compatibility: Changed dotenv import from default to namespace import (import * as dotenv) for better ESM compatibility
Code Reorganization: Cleaned up debug URL display in the navigate tool, consolidating this functionality into dedicated session management where it's more appropriate
Server Architecture Enhancement: Restructured the main index.ts to export a default function with Zod-based configuration validation and standardized tool registration

These changes integrate seamlessly with the existing browser automation capabilities while adding a visual layer that enhances user experience. The UI resources use standard iframe embedding to display Browserbase's debugger interface, and the modular approach ensures backward compatibility with existing MCP protocol implementations.

Confidence score: 3/5

This PR introduces significant architectural changes that could impact module resolution and runtime behavior
Score reflects concerns about TypeScript configuration changes that may affect Node.js compatibility and the type assertion workaround in session.ts
Pay close attention to tsconfig.json and src/tools/session.ts for potential runtime issues

_{5 files reviewed, 1 comment}

_{Edit Code Review Bot Settings | Greptile}

greptile-apps · 2025-08-20T01:42:45Z

src/tools/session.ts

+            uri: "ui://analytics-dashboard/main",
+            content: { type: "externalUrl", iframeUrl: debugUrl },
+            encoding: "text",
+          }) as unknown as TextContent,


style: Type assertion as unknown as TextContent suggests type incompatibility. Consider updating the content array type to properly support UI resources or create a union type.

Kylejeong2

Small changes, mostly due to keeping feature requests.

Also wondering about the ESNext stuff, why we need to change. Does the dockerfile need to change for us to be able to deploy to smithery as well?

Kylejeong2 · 2025-08-20T01:58:02Z

src/tools/navigate.ts

-        apiKey: context.config.browserbaseApiKey,
-      });
-      const debugUrl = (await bb.sessions.debug(sessionId))
-        .debuggerFullscreenUrl;


We had a feature request to include the liveview/debug url in the output from these tool calls which is why they're still in here

Yeah these are now in session create instead of on navigate; redundant to have it on every navigate call within a session

Kylejeong2 · 2025-08-20T01:58:45Z

tsconfig.json

-    "module": "Node16",
-    "moduleResolution": "Node16",
+    "module": "ESNext",
+    "moduleResolution": "bundler",


Is there a reason why we're changing to ESNext here?

yeah node 16 is super old and past end of life. we can use nodenext here as well or you can pin the version

Kylejeong2 · 2025-08-20T02:00:09Z

src/tools/session.ts

      );

      return {
        content: [
          {
            type: "text",
-            text: `Browserbase Live Session View URL: https://www.browserbase.com/sessions/${session.sessionId}\nBrowserbase Live Debugger URL: ${debugUrl}`,


Same thing as above, can technically change this to be another text output as well.

that's what i did, are you saying you prefer it this way?

ah oops didn't see

kamath · 2025-08-20T01:50:30Z

src/tools/navigate.ts

      return {
        content: [
          {
            type: "text",
            text: `Navigated to: ${params.url}`,
          },
-          {


unnecessary on navigate tool

kamath · 2025-08-21T04:58:50Z

src/tools/navigate.ts

-        apiKey: context.config.browserbaseApiKey,
-      });
-      const debugUrl = (await bb.sessions.debug(sessionId))
-        .debuggerFullscreenUrl;


Yeah these are now in session create instead of on navigate; redundant to have it on every navigate call within a session

kamath · 2025-08-21T05:01:14Z

tsconfig.json

-    "module": "Node16",
-    "moduleResolution": "Node16",
+    "module": "ESNext",
+    "moduleResolution": "bundler",


yeah node 16 is super old and past end of life. we can use nodenext here as well or you can pin the version

kamath · 2025-08-21T05:02:34Z

src/tools/session.ts

      );

      return {
        content: [
          {
            type: "text",
-            text: `Browserbase Live Session View URL: https://www.browserbase.com/sessions/${session.sessionId}\nBrowserbase Live Debugger URL: ${debugUrl}`,


that's what i did, are you saying you prefer it this way?

Kylejeong2

yeah looks good, the only thing is just pnpm install to get the right version of dotenv to pass our ci

Kylejeong2 · 2025-08-21T16:13:31Z

src/tools/session.ts

      );

      return {
        content: [
          {
            type: "text",
-            text: `Browserbase Live Session View URL: https://www.browserbase.com/sessions/${session.sessionId}\nBrowserbase Live Debugger URL: ${debugUrl}`,


ah oops didn't see

kamath added 2 commits August 19, 2025 18:42

add mcp ui

a184cca

don't return url on navigate

8e1388b

greptile-apps bot reviewed Aug 20, 2025

View reviewed changes

cleanup

017b079

kamath changed the title ~~add mcp ui~~ add mcp ui to embed browser in compatible clients Aug 20, 2025

Kylejeong2 requested changes Aug 20, 2025

View reviewed changes

kamath commented Aug 21, 2025

View reviewed changes

kamath added 2 commits August 20, 2025 22:03

fmt

73d5bb1

lint

ff89c29

kamath requested a review from Kylejeong2 August 21, 2025 05:08

Merge branch 'main' into main

9767250

Kylejeong2 requested changes Aug 22, 2025

View reviewed changes

ok

1f9a8f8

kamath requested a review from Kylejeong2 August 24, 2025 18:30

add mcp ui to embed browser in compatible clients #108

Are you sure you want to change the base?

add mcp ui to embed browser in compatible clients #108

Uh oh!

Conversation

kamath commented Aug 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Greptile Summary

Confidence score: 3/5

Uh oh!

greptile-apps bot Aug 20, 2025

Choose a reason for hiding this comment

Uh oh!

Kylejeong2 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Kylejeong2 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kamath commented Aug 20, 2025 •

edited

Loading