feat: add mcp-host script for local testing by joehan · Pull Request #10322 · firebase/firebase-tools

joehan · 2026-04-10T23:31:30Z

Description

Ports the basic-host example from @modelcontextprotocol/ext-apps to scripts/mcp-host to allow developers to test MCP apps locally in a secure sandbox environment. This is useful, since the platforms we generally test on don't yet support MCP apps.

Scenarios Tested

Verified that npm install works in scripts/mcp-host.
Verified that npm start starts the host server on port 8080 and sandbox on 8081.

Sample Commands

cd scripts/mcp-host
npm start

### Description Ports the `basic-host` example from `@modelcontextprotocol/ext-apps` to `scripts/mcp-host` to allow developers to test MCP apps locally in a secure sandbox environment. Modified to use `tsx` instead of `bun` for serving. ### Scenarios Tested - Verified that `npm install` works in `scripts/mcp-host`. - Verified that `npm start` starts the host server on port 8080 and sandbox on 8081. ### Sample Commands ```bash cd scripts/mcp-host npm start ```

scripts/mcp-host/serve.ts

+sandboxApp.get(["/", "/sandbox.html"], (req, res) => {
+  // Parse CSP config from query param: ?csp=<url-encoded-json>
+  let cspConfig: McpUiResourceCsp | undefined;
+  if (typeof req.query.csp === "string") {
+    try {
+      cspConfig = JSON.parse(req.query.csp);
+    } catch (e) {
+      console.warn("[Sandbox] Invalid CSP query param:", e);
+    }
+  }
+
+  // Set CSP via HTTP header - tamper-proof unlike meta tags
+  const cspHeader = buildCspHeader(cspConfig);
+  res.setHeader("Content-Security-Policy", cspHeader);
+
+  // Prevent caching to ensure fresh CSP on each load
+  res.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+  res.setHeader("Pragma", "no-cache");
+  res.setHeader("Expires", "0");
+
+  res.sendFile(join(DIRECTORY, "sandbox.html"));
+});


gemini-code-assist

Code Review

This pull request introduces a basic host implementation for Model Context Protocol (MCP) applications, featuring a React-based host UI, a sandboxed proxy for secure UI rendering, and a dual-port Express server to ensure origin isolation. The review feedback focuses on improving code robustness and maintainability by adding error handling for environment variable parsing, removing unused properties, and replacing magic numbers with constants. Furthermore, several suggestions emphasize strict adherence to the TypeScript style guide, specifically regarding the avoidance of any types and non-null assertions in favor of explicit null checks and proper interface definitions.

gemini-code-assist · 2026-04-10T23:33:36Z

scripts/mcp-host/serve.ts

+const SERVERS: string[] = process.env.SERVERS
+  ? JSON.parse(process.env.SERVERS)
+  : ["http://localhost:3001/mcp"];


The JSON.parse call on process.env.SERVERS will throw an exception if the environment variable is set to an invalid JSON string, causing the script to crash. It's safer to wrap this in a try-catch block and provide a helpful error message.

Suggested change

const SERVERS: string[] = process.env.SERVERS

? JSON.parse(process.env.SERVERS)

: ["http://localhost:3001/mcp"];

let SERVERS: string[] = ["http://localhost:3001/mcp"];

if (process.env.SERVERS) {

try {

SERVERS = JSON.parse(process.env.SERVERS);

} catch (e) {

console.error("Invalid SERVERS environment variable. Expected a JSON array of strings.");

process.exit(1);

}

}

gemini-code-assist · 2026-04-10T23:33:36Z

scripts/mcp-host/src/implementation.ts

+  client: Client;
+  tools: Map<string, Tool>;
+  resources: Map<string, Resource>;
+  appHtmlCache: Map<string, string>;


The appHtmlCache property is defined in the ServerInfo interface and initialized in connectToServer, but it is never used. Consider removing it to simplify the code.

gemini-code-assist · 2026-04-10T23:33:36Z

scripts/mcp-host/src/implementation.ts

+  log.info("Resource content._meta:", (content as any)._meta);
+
+  // Try both _meta (spec) and meta (Python SDK quirk) for content-level
+  const contentMeta = (content as any)._meta || (content as any).meta;
+
+  // Get listing-level metadata as fallback
+  const listingResource = serverInfo.resources.get(uri);
+  const listingMeta = (listingResource as any)?._meta;
+  log.info("Resource listing._meta:", listingMeta);
+
+  // Content-level takes precedence, fall back to listing-level
+  const uiMeta = contentMeta?.ui ?? listingMeta?.ui;
+  const csp = uiMeta?.csp;
+  const permissions = uiMeta?.permissions;


Avoid using any as an escape hatch. Defining a proper interface for the metadata improves type safety and adheres to the repository's TypeScript best practices.

Suggested change

log.info("Resource content._meta:", (content as any)._meta);

// Try both _meta (spec) and meta (Python SDK quirk) for content-level

const contentMeta = (content as any)._meta || (content as any).meta;

// Get listing-level metadata as fallback

const listingResource = serverInfo.resources.get(uri);

const listingMeta = (listingResource as any)?._meta;

log.info("Resource listing._meta:", listingMeta);

// Content-level takes precedence, fall back to listing-level

const uiMeta = contentMeta?.ui ?? listingMeta?.ui;

const csp = uiMeta?.csp;

const permissions = uiMeta?.permissions;

interface McpUiMeta { ui?: { csp?: McpUiResourceCsp; permissions?: McpUiResourcePermissions } }

const contentWithMeta = content as { _meta?: McpUiMeta; meta?: McpUiMeta };

log.info("Resource content._meta:", contentWithMeta._meta);

// Try both _meta (spec) and meta (Python SDK quirk) for content-level

const contentMeta = contentWithMeta._meta || contentWithMeta.meta;

// Get listing-level metadata as fallback

const listingResource = serverInfo.resources.get(uri);

const listingMeta = (listingResource as { _meta?: McpUiMeta } | undefined)?._meta;

log.info("Resource listing._meta:", listingMeta);

// Content-level takes precedence, fall back to listing-level

const uiMeta = contentMeta?.ui ?? listingMeta?.ui;

const csp = uiMeta?.csp;

const permissions = uiMeta?.permissions;

References

Never use any or unknown as an escape hatch. Define proper interfaces/types or use type guards. ^(link)

gemini-code-assist · 2026-04-10T23:33:36Z

scripts/mcp-host/src/implementation.ts

+  await appBridge.connect(
+    new PostMessageTransport(iframe.contentWindow!, iframe.contentWindow!),
+  );


Avoid using the non-null assertion operator !. The repository style guide recommends handling null or undefined explicitly. Check if iframe.contentWindow exists before using it.

Suggested change

await appBridge.connect(

new PostMessageTransport(iframe.contentWindow!, iframe.contentWindow!),

);

if (!iframe.contentWindow) {

throw new Error("iframe.contentWindow is not available");

}

await appBridge.connect(

new PostMessageTransport(iframe.contentWindow, iframe.contentWindow),

);

References

Use strict null checks and handle undefined/null explicitly. ^(link)

gemini-code-assist · 2026-04-10T23:33:36Z

scripts/mcp-host/src/implementation.ts

+      styles: {
+        variables: HOST_STYLE_VARIABLES,
+      },
+      containerDimensions: options?.containerDimensions ?? { maxHeight: 6000 },


The value 6000 is used as a magic number for maxHeight in multiple places (lines 297, 319, 450). Consider defining a constant for this value to improve maintainability.

gemini-code-assist · 2026-04-10T23:33:36Z

scripts/mcp-host/src/index.tsx

+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ErrorBoundary>
+      <Host serversPromise={connectToAllServers()} />
+    </ErrorBoundary>
+  </StrictMode>,
+);


Avoid using the non-null assertion operator !. It's safer to verify that the element exists before calling createRoot.

Suggested change

createRoot(document.getElementById("root")!).render(

<StrictMode>

<ErrorBoundary>

<Host serversPromise={connectToAllServers()} />

</ErrorBoundary>

</StrictMode>,

);

const rootElement = document.getElementById("root");

if (!rootElement) {

throw new Error("Root element not found");

}

createRoot(rootElement).render(

<StrictMode>

<ErrorBoundary>

<Host serversPromise={connectToAllServers()} />

</ErrorBoundary>

</StrictMode>,

);

References

Use strict null checks and handle undefined/null explicitly. ^(link)

gemini-code-assist · 2026-04-10T23:33:36Z

scripts/mcp-host/src/sandbox.ts

+// This MUST throw a SecurityError -- if `window.top` is accessible, the sandbox
+// configuration is dangerously broken and untrusted content could escape.
+try {
+  window.top!.alert("If you see this, the sandbox is not setup securely.");


Avoid using the non-null assertion operator !. Even in a security self-test, it's better to follow the project's coding standards regarding explicit null checks.

References

Use strict null checks and handle undefined/null explicitly. ^(link)

github-advanced-security bot found potential problems Apr 10, 2026

View reviewed changes

gemini-code-assist bot reviewed Apr 10, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add mcp-host script for local testing#10322

feat: add mcp-host script for local testing#10322
joehan wants to merge 1 commit intomainfrom
mcp-host-script

joehan commented Apr 10, 2026 •

edited

Loading

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Apr 10, 2026

Uh oh!

gemini-code-assist bot Apr 10, 2026

Uh oh!

gemini-code-assist bot Apr 10, 2026

Uh oh!

gemini-code-assist bot Apr 10, 2026

Uh oh!

gemini-code-assist bot Apr 10, 2026

Uh oh!

gemini-code-assist bot Apr 10, 2026

Uh oh!

gemini-code-assist bot Apr 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-const SERVERS: string[] = process.env.SERVERS
-  ? JSON.parse(process.env.SERVERS)
-  : ["http://localhost:3001/mcp"];
+let SERVERS: string[] = ["http://localhost:3001/mcp"];
+if (process.env.SERVERS) {
+  try {
+    SERVERS = JSON.parse(process.env.SERVERS);
+  } catch (e) {
+    console.error("Invalid SERVERS environment variable. Expected a JSON array of strings.");
+    process.exit(1);
+  }
+}

Conversation

joehan commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Scenarios Tested

Sample Commands

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

joehan commented Apr 10, 2026 •

edited

Loading