Skip to content

add mcp ui to embed browser in compatible clients #108

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Aug 26, 2025
Merged

add mcp ui to embed browser in compatible clients #108

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a184cca
add mcp ui
kamath Aug 20, 2025
8e1388b
don't return url on navigate
kamath Aug 20, 2025
017b079
cleanup
kamath Aug 20, 2025
73d5bb1
fmt
kamath Aug 21, 2025
ff89c29
lint
kamath Aug 21, 2025
9767250
Merge branch 'main' into main
kamath Aug 21, 2025
1f9a8f8
ok
kamath Aug 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,6 @@ export default defineConfig([
},
},
{
ignores: ["dist/**/*", "node_modules/**/*"],
ignores: ["dist/**/*", "node_modules/**/*", ".smithery/**/*"],
},
]);
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
},
"dependencies": {
"@browserbasehq/sdk": "^2.6.0",
"@mcp-ui/server": "^5.2.0",
"@browserbasehq/stagehand": "^2.4.3",
"@modelcontextprotocol/sdk": "^1.13.1",
"@smithery/cli": "^1.2.15",
Expand Down
17 changes: 16 additions & 1 deletion pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 0 additions & 2 deletions pnpm-workspace.yaml
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import dotenv from "dotenv";
import * as dotenv from "dotenv";
dotenv.config();

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
Expand Down
16 changes: 0 additions & 16 deletions src/tools/navigate.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { z } from "zod";
import { Browserbase } from "@browserbasehq/sdk";
import type { Tool, ToolSchema, ToolResult } from "./tool.js";
import type { Context } from "../context.js";
import type { ToolActionResult } from "../types/types.js";
Expand Down Expand Up @@ -36,27 +35,12 @@ async function handleNavigate(
throw new Error("No Browserbase session ID available");
}

// Get the debug URL using Browserbase SDK
const bb = new Browserbase({
apiKey: context.config.browserbaseApiKey,
});
const debugUrl = (await bb.sessions.debug(sessionId))
.debuggerFullscreenUrl;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


return {
content: [
{
type: "text",
text: `Navigated to: ${params.url}`,
},
{
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unnecessary on navigate tool

type: "text",
text: `View the live session here: https://www.browserbase.com/sessions/${sessionId}`,
},
{
type: "text",
text: `Browserbase Live Debugger URL: ${debugUrl}`,
},
],
};
} catch (error) {
Expand Down
13 changes: 12 additions & 1 deletion src/tools/session.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { Tool, ToolSchema, ToolResult } from "./tool.js";
import type { Context } from "../context.js";
import type { ToolActionResult } from "../types/types.js";
import { Browserbase } from "@browserbasehq/sdk";
import { createUIResource } from "@mcp-ui/server";

// Import SessionManager functions
import {
Expand All @@ -13,6 +14,7 @@ import {
getSession,
} from "../sessionManager.js";
import type { BrowserSession } from "../types/types.js";
import { TextContent } from "@modelcontextprotocol/sdk/types.js";

// --- Tool: Create Session ---
const CreateSessionInputSchema = z.object({
Expand Down Expand Up @@ -99,8 +101,17 @@ async function handleCreateSession(
content: [
{
type: "text",
text: `Browserbase Live Session View URL: https://www.browserbase.com/sessions/${session.sessionId}\nBrowserbase Live Debugger URL: ${debugUrl}`,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah oops didn't see

text: `Browserbase Live Session View URL: https://www.browserbase.com/sessions/${session.sessionId}`,
},
{
type: "text",
text: `Browserbase Live Debugger URL: ${debugUrl}`,
},
createUIResource({
uri: "ui://analytics-dashboard/main",
content: { type: "externalUrl", iframeUrl: debugUrl },
encoding: "text",
}) as unknown as TextContent,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

],
};
} catch (error: unknown) {
Expand Down
4 changes: 2 additions & 2 deletions tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"compilerOptions": {
"target": "ES2022",
"module": "Node16",
"moduleResolution": "Node16",
"module": "ESNext",
"moduleResolution": "bundler",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
Expand Down
Loading