npm run prettier:fix

README.md

@@ -5,14 +5,13 @@ This repo contains the SDK and [specification](./specification/draft/apps.mdx) f
 MCP Apps are proposed standard inspired by [MCP-UI](https://mcpui.dev/) and [OpenAI's Apps SDK](https://developers.openai.com/apps-sdk/) to allow MCP Servers to display interactive UI elements in conversational MCP clients / chatbots.
 
 This repo provides:
+
 - [types.ts](./src/types.ts): Types of JSON-RPC messages used to communicate between Apps & their host
   - Note that MCP Apps also use some standard MCP messages (e.g. `tools/call` for the App to trigger actions on its originating Server - these calls are proxied through the Host), but these types are the additional messages defined by the extension
-  
 - [examples/simple-example](./examples/simple-example): Example Server + Apps
   - [server.ts](./examples/simple-server/server.ts): MCP server with two tools that declare UI resources of Apps to be show in the chat when called
   - [ui-react.tsx](./examples/simple-server/src/ui-react.tsx): React App returned by the `create-ui-react` tool shows how to use the `useApp` hook to register MCP callbacks
   - [ui-vanilla.tsx](./examples/simple-server/src/ui-vanilla.ts): vanilla App returned by the `create-ui-vanilla`
-  
 - [specification/draft/apps.mdx](./specification/draft/apps.mdx): The Draft Extension Specification. It's still... in flux! Feedback welcome! (also see discussions in [SEP-1865](https://github.com/modelcontextprotocol/modelcontextprotocol/pull/1865)).
 
 - [message-transport](./src/message-transport.ts): `PostMessageTransport` class that uses `postMessage` to exchange JSON-RPC messages between windows / iframes

build.bun.ts

@@ -8,20 +8,28 @@ const isDevelopment = Bun.env.NODE_ENV === "development";
 
 // Build all JavaScript/TypeScript files
 function buildJs(entrypoint: string, opts: Record<string, any> = {}) {
-    return Bun.build({
+  return Bun.build({
-        entrypoints: [entrypoint],
+    entrypoints: [entrypoint],
-        outdir: "dist",
+    outdir: "dist",
-        target: "browser",
+    target: "browser",
-        minify: !isDevelopment,
+    minify: !isDevelopment,
-        ...(isDevelopment ? {
+    ...(isDevelopment
-            sourcemap: "inline",
+      ? {
-        } : {}),
+          sourcemap: "inline",
-        ...opts
+        }
-    })
+      : {}),
+    ...opts,
+  });
 }
 
 await Promise.all([
   buildJs("src/app.ts", { outdir: "dist/src" }),
-  buildJs("src/app-bridge.ts", { outdir: "dist/src", external: ["@modelcontextprotocol/sdk"] }),
+  buildJs("src/app-bridge.ts", {
-  buildJs("src/react/index.tsx", { outdir: "dist/src/react", external: ["react", "react-dom"]}),
+    outdir: "dist/src",
-])
+    external: ["@modelcontextprotocol/sdk"],
+  }),
+  buildJs("src/react/index.tsx", {
+    outdir: "dist/src/react",
+    external: ["react", "react-dom"],
+  }),
+]);

examples/simple-server/server.ts

@@ -61,13 +61,16 @@ const getServer = async () => {
   };
 
   {
-    const rawResource = registerResource({
+    const rawResource = registerResource(
-      name: "ui-raw-template",
+      {
-      uri: "ui://raw",
+        name: "ui-raw-template",
-      title: "Raw UI Template",
+        uri: "ui://raw",
-      description: "A simple raw HTML UI",
+        title: "Raw UI Template",
-      mimeType: "text/html+mcp",
+        description: "A simple raw HTML UI",
-    }, rawHtml);
+        mimeType: "text/html+mcp",
+      },
+      rawHtml,
+    );
 
     server.registerTool(
       "create-ui-raw",
@@ -89,13 +92,16 @@ const getServer = async () => {
   }
 
   {
-    const vanillaResource = registerResource({
+    const vanillaResource = registerResource(
-      name: "ui-vanilla-template",
+      {
-      uri: "ui://vanilla",
+        name: "ui-vanilla-template",
-      title: "Vanilla UI Template",
+        uri: "ui://vanilla",
-      description: "A simple vanilla JS UI",
+        title: "Vanilla UI Template",
-      mimeType: "text/html+mcp",
+        description: "A simple vanilla JS UI",
-    }, vanillaHtml);
+        mimeType: "text/html+mcp",
+      },
+      vanillaHtml,
+    );
 
     server.registerTool(
       "create-ui-vanilla",
@@ -117,13 +123,16 @@ const getServer = async () => {
   }
 
   {
-    const reactResource = registerResource({
+    const reactResource = registerResource(
-      name: "ui-react-template",
+      {
-      uri: "ui://react",
+        name: "ui-react-template",
-      title: "React UI Template",
+        uri: "ui://react",
-      description: "A React-based UI",
+        title: "React UI Template",
-      mimeType: "text/html+mcp",
+        description: "A React-based UI",
-    }, reactHtml);
+        mimeType: "text/html+mcp",
+      },
+      reactHtml,
+    );
 
     server.registerTool(
       "create-ui-react",

src/react/index.tsx

@@ -1,2 +1,2 @@
 export * from "./useApp";
-export * from "./useAutoResize";
+export * from "./useAutoResize";