format

README.md

@@ -30,7 +30,7 @@ This repo provides:
 
 What this repo does NOT provide:
 
-- There's no *supported* host implementation in this repo (beyond the [examples/simple-host](./examples/simple-host) example)
+- There's no _supported_ host implementation in this repo (beyond the [examples/simple-host](./examples/simple-host) example)
   - We have [contributed a tentative implementation](https://github.com/MCP-UI-Org/mcp-ui/pull/147) of hosting / iframing / sandboxing logic to the [MCP-UI](https://github.com/idosal/mcp-ui) repository, and expect OSS clients may use it, while other clients might roll their own hosting logic.
 
 ## Using the SDK
@@ -70,8 +70,7 @@ Your `package.json` will then look like:
 }
 ```
 
-### Build tools in dependencies
+> [!NOTE]  
-
+> The build tools (`esbuild`, `tsx`, `typescript`) are in `dependencies` rather than `devDependencies`. This is intentional: it allows the `prepare` script to run when the package is installed from git, since npm doesn't install devDependencies for git dependencies.
-The build tools (`esbuild`, `tsx`, `typescript`) are in `dependencies` rather than `devDependencies`. This is intentional: it allows the `prepare` script to run when the package is installed from git, since npm doesn't install devDependencies for git dependencies.
+>
-
+> Once the package is published to npm with pre-built `dist/`, these can be moved back to `devDependencies`.
-Once the package is published to npm with pre-built `dist/`, these can be moved back to `devDependencies`.

examples/simple-host/src/AppRenderer.tsx

@@ -95,9 +95,7 @@ export interface AppRendererProps {
  * @param props - Component props
  * @returns React element containing the sandboxed tool UI iframe
  */
-export const AppRenderer = (
+export const AppRenderer = (props: AppRendererProps) => {
-  props: AppRendererProps,
-) => {
   const {
     client,
     sandboxProxyUrl,

examples/simple-host/src/example-host-react.tsx

@@ -5,7 +5,7 @@ import { Client } from "@modelcontextprotocol/sdk/client/index.js";
 import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
 import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
 import { Tool } from "@modelcontextprotocol/sdk/types.js";
-import { AppRenderer,AppRendererProps } from "../src/AppRenderer";
+import { AppRenderer, AppRendererProps } from "../src/AppRenderer";
 import { AppBridge } from "../../../dist/src/app-bridge";
 
 const SANDBOX_PROXY_URL = URL.parse("/sandbox.html", location.href)!;
@@ -94,16 +94,24 @@ function ExampleApp() {
     setActiveTools((prev) => prev.filter((t) => t.id !== id));
   };
 
-  const handleMessage: AppRendererProps["onmessage"] = async (params, _extra) => {
+  const handleMessage: AppRendererProps["onmessage"] = async (
+    params,
+    _extra,
+  ) => {
     console.log("[React Host] Message:", params);
     return {};
   };
 
-  const handleLoggingMessage: AppRendererProps["onloggingmessage"] = (params) => {
+  const handleLoggingMessage: AppRendererProps["onloggingmessage"] = (
+    params,
+  ) => {
     console.log("[React Host] Logging message:", params);
   };
 
-  const handleOpenLink: AppRendererProps["onopenlink"] = async (params, _extra) => {
+  const handleOpenLink: AppRendererProps["onopenlink"] = async (
+    params,
+    _extra,
+  ) => {
     console.log("[React Host] Open link request:", params);
     window.open(params.url, "_blank", "noopener,noreferrer");
     return { isError: false };

examples/simple-host/src/example-host-vanilla.ts

@@ -87,15 +87,15 @@ window.addEventListener("load", async () => {
         appBridge.sendToolInput({ arguments: toolInput });
       };
 
-      appBridge.onopenlink = async ({url}) => {
+      appBridge.onopenlink = async ({ url }) => {
         console.log("[Example] Open link requested:", url);
         window.open(url, "_blank", "noopener,noreferrer");
-        return {isError: false};
+        return { isError: false };
       };
 
       appBridge.onmessage = async (params) => {
         console.log("[Example] Message requested:", params);
-        return {isError: false};
+        return { isError: false };
       };
 
       // Handle size changes by resizing the iframe
@@ -108,7 +108,7 @@ window.addEventListener("load", async () => {
         }
       };
 
-      appBridge.onloggingmessage = async params => {
+      appBridge.onloggingmessage = async (params) => {
         console.log("[Tool UI Log]", params);
       };