pizzaz-mcp 1.0.0

package/server/server.ts

@@ -0,0 +1,400 @@
+import {
+  createServer,
+  type IncomingMessage,
+  type ServerResponse,
+} from "node:http";
+import fs from "node:fs";
+import path from "node:path";
+import { URL, fileURLToPath } from "node:url";
+
+import { Server } from "@modelcontextprotocol/sdk/server/index.js";
+import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
+import {
+  CallToolRequestSchema,
+  ListResourceTemplatesRequestSchema,
+  ListResourcesRequestSchema,
+  ListToolsRequestSchema,
+  ReadResourceRequestSchema,
+  type CallToolRequest,
+  type ListResourceTemplatesRequest,
+  type ListResourcesRequest,
+  type ListToolsRequest,
+  type ReadResourceRequest,
+  type Resource,
+  type ResourceTemplate,
+  type Tool,
+} from "@modelcontextprotocol/sdk/types.js";
+import { z } from "zod";
+
+type PizzazWidget = {
+  id: string;
+  title: string;
+  templateUri: string;
+  invoking: string;
+  invoked: string;
+  html: string;
+  responseText: string;
+};
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT_DIR = path.resolve(__dirname, "..");
+const ASSETS_DIR = path.resolve(ROOT_DIR, "assets");
+
+function readWidgetHtml(componentName: string): string {
+  if (!fs.existsSync(ASSETS_DIR)) {
+    throw new Error(
+      `Widget assets not found. Expected directory ${ASSETS_DIR}. Run "pnpm run build" before starting the server.`
+    );
+  }
+
+  const directPath = path.join(ASSETS_DIR, `${componentName}.html`);
+  let htmlContents: string | null = null;
+
+  if (fs.existsSync(directPath)) {
+    htmlContents = fs.readFileSync(directPath, "utf8");
+  } else {
+    const candidates = fs
+      .readdirSync(ASSETS_DIR)
+      .filter(
+        (file) => file.startsWith(`${componentName}-`) && file.endsWith(".html")
+      )
+      .sort();
+    const fallback = candidates[candidates.length - 1];
+    if (fallback) {
+      htmlContents = fs.readFileSync(path.join(ASSETS_DIR, fallback), "utf8");
+    }
+  }
+
+  if (!htmlContents) {
+    throw new Error(
+      `Widget HTML for "${componentName}" not found in ${ASSETS_DIR}. Run "pnpm run build" to generate the assets.`
+    );
+  }
+
+  return htmlContents;
+}
+
+function widgetDescriptorMeta(widget: PizzazWidget) {
+  return {
+    "openai/outputTemplate": widget.templateUri,
+    "openai/toolInvocation/invoking": widget.invoking,
+    "openai/toolInvocation/invoked": widget.invoked,
+    "openai/widgetAccessible": true,
+  } as const;
+}
+
+function widgetInvocationMeta(widget: PizzazWidget) {
+  return {
+    "openai/toolInvocation/invoking": widget.invoking,
+    "openai/toolInvocation/invoked": widget.invoked,
+  } as const;
+}
+
+const widgets: PizzazWidget[] = [
+  {
+    id: "pizza-map",
+    title: "Show Pizza Map",
+    templateUri: "ui://widget/pizza-map.html",
+    invoking: "Hand-tossing a map",
+    invoked: "Served a fresh map",
+    html: readWidgetHtml("pizzaz"),
+    responseText: "Rendered a pizza map!",
+  },
+  {
+    id: "pizza-carousel",
+    title: "Show Pizza Carousel",
+    templateUri: "ui://widget/pizza-carousel.html",
+    invoking: "Carousel some spots",
+    invoked: "Served a fresh carousel",
+    html: readWidgetHtml("pizzaz-carousel"),
+    responseText: "Rendered a pizza carousel!",
+  },
+  {
+    id: "pizza-albums",
+    title: "Show Pizza Album",
+    templateUri: "ui://widget/pizza-albums.html",
+    invoking: "Hand-tossing an album",
+    invoked: "Served a fresh album",
+    html: readWidgetHtml("pizzaz-albums"),
+    responseText: "Rendered a pizza album!",
+  },
+  {
+    id: "pizza-list",
+    title: "Show Pizza List",
+    templateUri: "ui://widget/pizza-list.html",
+    invoking: "Hand-tossing a list",
+    invoked: "Served a fresh list",
+    html: readWidgetHtml("pizzaz-list"),
+    responseText: "Rendered a pizza list!",
+  },
+  {
+    id: "pizza-shop",
+    title: "Open Pizzaz Shop",
+    templateUri: "ui://widget/pizza-shop.html",
+    invoking: "Opening the shop",
+    invoked: "Shop opened",
+    html: readWidgetHtml("pizzaz-shop"),
+    responseText: "Rendered the Pizzaz shop!",
+  },
+];
+
+const widgetsById = new Map<string, PizzazWidget>();
+const widgetsByUri = new Map<string, PizzazWidget>();
+
+widgets.forEach((widget) => {
+  widgetsById.set(widget.id, widget);
+  widgetsByUri.set(widget.templateUri, widget);
+});
+
+const toolInputSchema = {
+  type: "object",
+  properties: {
+    pizzaTopping: {
+      type: "string",
+      description: "Topping to mention when rendering the widget.",
+    },
+  },
+  required: ["pizzaTopping"],
+  additionalProperties: false,
+} as const;
+
+const toolInputParser = z.object({
+  pizzaTopping: z.string(),
+});
+
+const tools: Tool[] = widgets.map((widget) => ({
+  name: widget.id,
+  description: widget.title,
+  inputSchema: toolInputSchema,
+  title: widget.title,
+  _meta: widgetDescriptorMeta(widget),
+  // To disable the approval prompt for the widgets
+  annotations: {
+    destructiveHint: false,
+    openWorldHint: false,
+    readOnlyHint: true,
+  },
+}));
+
+const resources: Resource[] = widgets.map((widget) => ({
+  uri: widget.templateUri,
+  name: widget.title,
+  description: `${widget.title} widget markup`,
+  mimeType: "text/html+skybridge",
+  _meta: widgetDescriptorMeta(widget),
+}));
+
+const resourceTemplates: ResourceTemplate[] = widgets.map((widget) => ({
+  uriTemplate: widget.templateUri,
+  name: widget.title,
+  description: `${widget.title} widget markup`,
+  mimeType: "text/html+skybridge",
+  _meta: widgetDescriptorMeta(widget),
+}));
+
+function createPizzazServer(): Server {
+  const server = new Server(
+    {
+      name: "pizzaz-node",
+      version: "0.1.0",
+    },
+    {
+      capabilities: {
+        resources: {},
+        tools: {},
+      },
+    }
+  );
+
+  server.setRequestHandler(
+    ListResourcesRequestSchema,
+    async (_request: ListResourcesRequest) => ({
+      resources,
+    })
+  );
+
+  server.setRequestHandler(
+    ReadResourceRequestSchema,
+    async (request: ReadResourceRequest) => {
+      const widget = widgetsByUri.get(request.params.uri);
+
+      if (!widget) {
+        throw new Error(`Unknown resource: ${request.params.uri}`);
+      }
+
+      return {
+        contents: [
+          {
+            uri: widget.templateUri,
+            mimeType: "text/html+skybridge",
+            text: widget.html,
+            _meta: widgetDescriptorMeta(widget),
+          },
+        ],
+      };
+    }
+  );
+
+  server.setRequestHandler(
+    ListResourceTemplatesRequestSchema,
+    async (_request: ListResourceTemplatesRequest) => ({
+      resourceTemplates,
+    })
+  );
+
+  server.setRequestHandler(
+    ListToolsRequestSchema,
+    async (_request: ListToolsRequest) => ({
+      tools,
+    })
+  );
+
+  server.setRequestHandler(
+    CallToolRequestSchema,
+    async (request: CallToolRequest) => {
+      const widget = widgetsById.get(request.params.name);
+
+      if (!widget) {
+        throw new Error(`Unknown tool: ${request.params.name}`);
+      }
+
+      const args = toolInputParser.parse(request.params.arguments ?? {});
+
+      return {
+        content: [
+          {
+            type: "text",
+            text: widget.responseText,
+          },
+        ],
+        structuredContent: {
+          pizzaTopping: args.pizzaTopping,
+        },
+        _meta: widgetInvocationMeta(widget),
+      };
+    }
+  );
+
+  return server;
+}
+
+type SessionRecord = {
+  server: Server;
+  transport: SSEServerTransport;
+};
+
+const sessions = new Map<string, SessionRecord>();
+
+const ssePath = "/mcp";
+const postPath = "/mcp/messages";
+
+async function handleSseRequest(res: ServerResponse) {
+  res.setHeader("Access-Control-Allow-Origin", "*");
+  const server = createPizzazServer();
+  const transport = new SSEServerTransport(postPath, res);
+  const sessionId = transport.sessionId;
+
+  sessions.set(sessionId, { server, transport });
+
+  transport.onclose = async () => {
+    sessions.delete(sessionId);
+    await server.close();
+  };
+
+  transport.onerror = (error) => {
+    console.error("SSE transport error", error);
+  };
+
+  try {
+    await server.connect(transport);
+  } catch (error) {
+    sessions.delete(sessionId);
+    console.error("Failed to start SSE session", error);
+    if (!res.headersSent) {
+      res.writeHead(500).end("Failed to establish SSE connection");
+    }
+  }
+}
+
+async function handlePostMessage(
+  req: IncomingMessage,
+  res: ServerResponse,
+  url: URL
+) {
+  res.setHeader("Access-Control-Allow-Origin", "*");
+  res.setHeader("Access-Control-Allow-Headers", "content-type");
+  const sessionId = url.searchParams.get("sessionId");
+
+  if (!sessionId) {
+    res.writeHead(400).end("Missing sessionId query parameter");
+    return;
+  }
+
+  const session = sessions.get(sessionId);
+
+  if (!session) {
+    res.writeHead(404).end("Unknown session");
+    return;
+  }
+
+  try {
+    await session.transport.handlePostMessage(req, res);
+  } catch (error) {
+    console.error("Failed to process message", error);
+    if (!res.headersSent) {
+      res.writeHead(500).end("Failed to process message");
+    }
+  }
+}
+
+const portEnv = Number(process.env.PORT ?? 8000);
+const port = Number.isFinite(portEnv) ? portEnv : 8000;
+
+const httpServer = createServer(
+  async (req: IncomingMessage, res: ServerResponse) => {
+    if (!req.url) {
+      res.writeHead(400).end("Missing URL");
+      return;
+    }
+
+    const url = new URL(req.url, `http://${req.headers.host ?? "localhost"}`);
+
+    if (
+      req.method === "OPTIONS" &&
+      (url.pathname === ssePath || url.pathname === postPath)
+    ) {
+      res.writeHead(204, {
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+        "Access-Control-Allow-Headers": "content-type",
+      });
+      res.end();
+      return;
+    }
+
+    if (req.method === "GET" && url.pathname === ssePath) {
+      await handleSseRequest(res);
+      return;
+    }
+
+    if (req.method === "POST" && url.pathname === postPath) {
+      await handlePostMessage(req, res, url);
+      return;
+    }
+
+    res.writeHead(404).end("Not Found");
+  }
+);
+
+httpServer.on("clientError", (err: Error, socket) => {
+  console.error("HTTP client error", err);
+  socket.end("HTTP/1.1 400 Bad Request\r\n\r\n");
+});
+
+httpServer.listen(port, () => {
+  console.log(`Pizzaz MCP server listening on http://localhost:${port}`);
+  console.log(`  SSE stream: GET http://localhost:${port}${ssePath}`);
+  console.log(
+    `  Message post endpoint: POST http://localhost:${port}${postPath}?sessionId=...`
+  );
+});

package/src/index.css

@@ -0,0 +1,39 @@
+@import "tailwindcss";
+@import "@openai/apps-sdk-ui/css";
+@source "../node_modules/@openai/apps-sdk-ui";
+@source ".";
+
+@layer utilities {
+  .overflow-auto > *,
+  .overflow-scroll > *,
+  .overflow-x-auto > *,
+  .overflow-y-auto > * {
+    scrollbar-color: auto;
+  }
+
+  /* Base style for scrollable elements */
+  .overflow-auto,
+  .overflow-scroll,
+  .overflow-x-auto,
+  .overflow-y-auto,
+  .overflow-x-scroll,
+  .overflow-y-scroll {
+    scrollbar-color: rgb(0, 0, 0, 0.1) transparent;
+
+    @media (prefers-color-scheme: dark) {
+      scrollbar-color: rgb(255, 255, 255, 0.1) transparent;
+    }
+  }
+
+  /* Hover state directly on the scrollable element */
+  .overflow-auto:hover,
+  .overflow-scroll:hover,
+  .overflow-x-auto:hover,
+  .overflow-y-auto:hover {
+    scrollbar-color: rgb(0, 0, 0, 0.2) transparent;
+
+    @media (prefers-color-scheme: dark) {
+      scrollbar-color: rgb(255, 255, 255, 0.2) transparent;
+    }
+  }
+}

package/src/media-queries.ts

@@ -0,0 +1,15 @@
+function matchMediaQuery(query: string) {
+  return window.matchMedia(query).matches;
+}
+
+function createMediaQueryFn(query: string) {
+  return () => matchMediaQuery(query);
+}
+
+export const prefersReducedMotion = createMediaQueryFn(
+  "(prefers-reduced-motion: reduce)"
+);
+
+export const isPrimarilyTouchDevice = createMediaQueryFn("(pointer: coarse)");
+
+export const isHoverAvailable = createMediaQueryFn("(hover: hover)");

package/src/pizzaz/Inspector.jsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { Star, X } from "lucide-react";
+import { Button } from "@openai/apps-sdk-ui/components/Button";
+import { Image } from "@openai/apps-sdk-ui/components/Image";
+
+export default function Inspector({ place, onClose }) {
+  if (!place) return null;
+  return (
+    <motion.div
+      key={place.id}
+      initial={{ opacity: 0, scale: 0.98 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.98 }}
+      transition={{ type: "spring", bounce: 0, duration: 0.25 }}
+      className="pizzaz-inspector absolute z-30 top-0 bottom-4 left-0 right-auto xl:left-auto xl:right-6 md:z-20 w-[340px] xl:w-[360px] xl:top-6 xl:bottom-8 pointer-events-auto"
+    >
+      <Button
+        aria-label="Close details"
+        className="inline-flex absolute z-10 top-4 left-4 xl:top-4 xl:left-4 shadow-xl rounded-full p-2 bg-white ring ring-black/10 xl:shadow-2xl hover:bg-white"
+        variant="soft"
+        color="secondary"
+        size="sm"
+        uniform
+        onClick={onClose}
+      >
+        <X className="h-[18px] w-[18px]" aria-hidden="true" />
+      </Button>
+      <div className="relative h-full overflow-y-auto rounded-none xl:rounded-3xl bg-white text-black xl:shadow-xl xl:ring ring-black/10">
+        <div className="relative mt-2 xl:mt-0 px-2 xl:px-0">
+          <Image
+            src={place.thumbnail}
+            alt={place.name}
+            className="w-full rounded-3xl xl:rounded-none h-80 object-cover xl:rounded-t-2xl"
+          />
+        </div>
+
+        <div className="h-[calc(100%-11rem)] sm:h-[calc(100%-14rem)]">
+          <div className="p-4 sm:p-5">
+            <div className="text-2xl font-medium truncate">{place.name}</div>
+            <div className="text-sm mt-1 opacity-70 flex items-center gap-1">
+              <Star className="h-3.5 w-3.5" aria-hidden="true" />
+              {place.rating.toFixed(1)}
+              {place.price ? <span>· {place.price}</span> : null}
+              <span>· San Francisco</span>
+            </div>
+            <div className="mt-3 flex flex-row items-center gap-3 font-medium">
+              <Button color="primary" variant="solid" size="sm">
+                {" "}
+                Add to favorites
+              </Button>
+              <Button
+                color="primary"
+                variant="outline"
+                size="sm"
+                className="border-[#F46C21]/50 text-[#F46C21]"
+              >
+                Contact
+              </Button>
+            </div>
+            <div className="text-sm mt-5">
+              {place.description} Enjoy a slice at one of SF's favorites. Fresh
+              ingredients, great crust, and cozy vibes.
+            </div>
+          </div>
+
+          <div className="px-4 sm:px-5 pb-4">
+            <div className="text-lg font-medium mb-2">Reviews</div>
+            <ul className="space-y-3 divide-y divide-black/5">
+              {[
+                {
+                  user: "Leo M.",
+                  avatar: "https://persistent.oaistatic.com/pizzaz/user1.png",
+                  text: "Fantastic crust and balanced toppings. The marinara is spot on!",
+                },
+                {
+                  user: "Priya S.",
+                  avatar: "https://persistent.oaistatic.com/pizzaz/user2.png",
+                  text: "Cozy vibe and friendly staff. Quick service on a Friday night.",
+                },
+                {
+                  user: "Maya R.",
+                  avatar: "https://persistent.oaistatic.com/pizzaz/user3.png",
+                  text: "Great for sharing. Will definitely come back with friends.",
+                },
+              ].map((review, idx) => (
+                <li key={idx} className="py-3">
+                  <div className="flex items-start gap-3">
+                    <Image
+                      src={review.avatar}
+                      alt={`${review.user} avatar`}
+                      className="h-8 w-8 ring ring-black/5 rounded-full object-cover flex-none"
+                    />
+                    <div className="min-w-0 gap-1 flex flex-col">
+                      <div className="text-xs font-medium text-black/70">
+                        {review.user}
+                      </div>
+                      <div className="text-sm">{review.text}</div>
+                    </div>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}