My First ChatGPT App

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
import { createServer, IncomingMessage, ServerResponse } from "http";

const server = new McpServer({
  name: "coffee-shop",
  version: "1.0.0"
});

// Register the widget resource
server.registerResource(
  "coffee-widget",
  "ui://widget/coffee.html",                // Identifier that tools reference via openai/outputTemplate
  { description: "Coffee Shop widget" },
  async () => ({
    contents: [{
      uri: "ui://widget/coffee.html",
      mimeType: "text/html+skybridge",      // Marks this as a widget that receives window.openai
      text: WIDGET_HTML,
      _meta: {
        "openai/widgetPrefersBorder": true,  // Adds a border around your widget in the chat
        "openai/widgetCSP": {
          redirect_domains: ["https://www.mcpjam.com"]  // Domains users can be redirected to
        }
      }
    }]
  })
);

// Register a tool that uses this widget
server.registerTool(
  "orderCoffee",
  {
    title: "Order Coffee",
    description: "Order a coffee to add to your collection.",
    _meta: {
      "openai/outputTemplate": "ui://widget/coffee.html",    // Which widget to display
      "openai/widgetAccessible": true,                       // Allow widget buttons to call this tool
      "openai/toolInvocation/invoking": "Brewing coffee...", // Loading message while tool runs
      "openai/toolInvocation/invoked": "Coffee ready!"       // Success message when tool completes
    }
  },
  async () => {
    // ...
    return {
      structuredContent: {                                   // Data for widget + model reasoning
        coffeeCount: coffeeCount,
        message: "Here's your coffee! ☕️"
      },
      content: [{                                            // Text the model uses to craft its response
        type: "text" as const,
        text: `Ordered a coffee! You now have ${coffeeCount} coffees.`
      }]
    };
  }
);

import { StrictMode, useState, useCallback, useRef, useEffect } from "react";
import { createRoot } from "react-dom/client";
import { useToolOutput } from "./hooks/useToolOutput"; // Listens for toolOutput changes via the openai:set_globals event
import type { CoffeeToolOutput } from "./types"; // TypeScript types for window.openai and our tool's output

function CoffeeShopWidget() {
  const toolOutput = useToolOutput();
  const [state, setState] = useState<CoffeeToolOutput>({
    // ... fallback values for TypeScript
  });

  // Sync state when toolOutput changes (e.g., from chat commands)
  const prevToolOutputRef = useRef<CoffeeToolOutput | undefined>(undefined);
  useEffect(() => {
    if (toolOutput && toolOutput !== prevToolOutputRef.current) {
      prevToolOutputRef.current = toolOutput;
      setState(toolOutput);
    }
  }, [toolOutput]);

  // Call tools directly from button clicks (requires openai/widgetAccessible: true)
  const handleOrder = useCallback(async () => {
    const result = await window.openai?.callTool("orderCoffee", {});
    if (result?.structuredContent) {
      setState(result.structuredContent);
    }
  }, []);

  // ... more handlers and JSX in the full example
}

window.openai.openExternal({ href: "https://www.mcpjam.com" });