Open AI Apps SDK - Server Everything

app/
├── mcp/
│   └── route.ts           # MCP server - registers tools and resources
├── widgets/
│   ├── read-only/         # Simple data display widget
│   ├── widget-accessible/ # Interactive counter using callTool()
│   ├── send-message/      # Message injection example
│   ├── open-external/     # External link handling
│   ├── display-mode/      # Layout mode transitions
│   └── widget-state/      # State persistence example
├── hooks/
│   ├── use-tool-output.ts     # Access tool response data
│   ├── use-call-tool.ts       # Call tools from widgets
│   ├── use-send-message.ts    # Send follow-up messages
│   ├── use-widget-state.ts    # Persist component state
│   ├── use-display-mode.ts    # React to layout changes
│   └── ...                    # Additional hooks wrapping window.openai
├── tools/                     # Every widget needs an associated tool to call
│   ├── display-mode-widget.ts
│   ├── increment.ts
│   ├── open-external-widget.ts
│   ├── read-only-widget.ts
│   ├── send-message-widget.ts
│   ├── show-apps-sdk-dashboard.ts
│   ├── show-widget-description-demo.ts
│   └── widget-accessible-tool.ts
├── components/
│   └── ui/                # Radix UI + Tailwind components
├── layout.tsx             # Root layout with SDK bootstrap
└── page.tsx               # Home page

middleware.ts              # CORS handling for RSC fetching
next.config.ts            # Asset prefix configuration
baseUrl.ts                # Environment-aware URL detection

type CounterOutput = {
  counter: number;
  incrementAmount: number;
};

export default function WidgetAccessibleTool() {
  const output = useToolOutput<CounterOutput>();
  const callTool = useCallTool();
  const [isIncrementing, setIsIncrementing] = useState(false);

  // Use default values if no tool output available
  const defaultOutput: CounterOutput = {
    counter: 0,
    incrementAmount: 1,
  };

  const counterOutput = output || defaultOutput;

  const handleIncrement = async (amount: number) => {
    if (!callTool) {
      console.error("callTool not available");
      return;
    }

    setIsIncrementing(true);
    try {
      await callTool("increment", {
        counter: counterOutput.counter,
        incrementAmount: amount,
      });
    } catch (error) {
      console.error("Failed to increment:", error);
    } finally {
      setIsIncrementing(false);
    }
  };

  return (
    <div>
      <div>Count: {counterOutput.counter}</div>
      <div className="flex gap-3">
        <button
          onClick={() => handleIncrement(5)}
          disabled={isIncrementing || !callTool}
        >
          {isIncrementing ? "Calling..." : "+5"}
        </button>
      </div>
    </div>
  );
}

const locations = [
  { label: "New York", value: "New York" },
  { label: "Chicago", value: "Chicago" },
  { label: "London", value: "London" },
  { label: "San Francisco", value: "San Francisco" },
];

export default function SendMessageWidget() {
  const sendMessage = useSendMessage();
  const [location, setLocation] = useState("");
  const [status, setStatus] = useState("");

  const handleSendMessage = async () => {
    if (!location) {
      setStatus("Pick a location before sending a suggestion.");
      return;
    }

    setStatus("Sending...");
    try {
      await sendMessage(`show me all the pizza places in ${location}`);
      setStatus(`Asked for pizza places in ${location}.`);
    } catch (error) {
      setStatus("Message failed to send.");
    }
  };

  return (
    <section>
      <h1>Send a Pizza Follow-up</h1>
      <p>
        Choose a city and send a follow-up message that asks for pizza places in
        that location.
      </p>

      <label>
        Location
        <select value={location} onChange={(event) => setLocation(event.target.value)}>
          {locations.map((city) => (
            <option key={city.value} value={city.value}>
              {city.label}
            </option>
          ))}
        </select>
      </label>

      <button onClick={handleSendMessage}>Find pizza places</button>

      {status && <div>{status}</div>}
    </section>
  );
}

export default function OpenExternalWidget() {
  const openExternal = useOpenExternal();
  const [status, setStatus] = useState("");

  const handleOpenExternal = () => {
    setStatus("Opening pizza homepage...");
    try {
      openExternal("https://pizza.example.com/");
      setStatus("Pizza homepage opened.");
    } catch (error) {
      setStatus("Could not open the pizza homepage.");
    }
  };

  return (
    <section>
      <h1>Open Pizza Homepage</h1>
      <p>
        Use openExternal() to send the user to a pizza ordering site when they
        want to browse the full menu.
      </p>

      <button onClick={handleOpenExternal}>Visit pizza homepage</button>

      {status && <div>{status}</div>}
    </section>
  );
}

type DisplayMode = "pip" | "inline" | "fullscreen";

export default function DisplayModeWidget() {
  const requestDisplayMode = useRequestDisplayMode();
  const currentDisplayMode = useDisplayMode();
  const [requestedMode, setRequestedMode] = useState<DisplayMode>("fullscreen");
  const [isLoading, setIsLoading] = useState(false);

  const handleRequestDisplayMode = async () => {
    setIsLoading(true);
    try {
      await requestDisplayMode(requestedMode);
    } catch (error) {
      console.error("An error occurred: ", error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      <h1>Change Display Mode</h1>
      <p>
        Transition between inline, PiP, and fullscreen using
        requestDisplayMode()
      </p>
      <div>
        <span>Current Mode: {currentDisplayMode}</span>
        <div>
          <label>Request Mode</label>
          <div className="grid grid-cols-3 gap-2">
            {(["inline", "pip", "fullscreen"]).map((mode) => (
              <button key={mode} onClick={() => setRequestedMode(mode)}>
                {mode}
              </button>
            ))}
          </div>
        </div>

        <button onClick={handleRequestDisplayMode} disabled={isLoading}>
          {isLoading ? "Requesting..." : "Request Display Mode"}
        </button>
      </div>
    </div>
  );
}

const locations = [
  { label: "New York", value: "new-york" },
  { label: "London", value: "london" },
  { label: "Tokyo", value: "tokyo" },
];

export default function WidgetStateWidget() {
  const [widgetState, setWidgetState] = useWidgetState();
  const currentLocation = widgetState.location ?? "";

  const handleLocationChange = (event) => {
    const location = event.target.value;
    setWidgetState({ location });
  };

  return (
    <section>
      <h1>Choose Your Location</h1>
      <p>
        This widget stores the selected city so it can be restored when the
        widget loads again.
      </p>

      <label>
        Location
        <select value={currentLocation} onChange={handleLocationChange}>
          {locations.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </label>

      <div>
        <strong>Widget state:</strong>{" "}
        {currentLocation ? currentLocation : "not set"}
      </div>
    </section>
  );
}

npx @mcpjam/inspector@latest