ChatGPT Plugin Extensions

import { useState } from "react";
import {
  useModelContext,
  type ModelContextOperationResult,
} from "mcp-use/react";

export default function BookEvidence() {
  const { attachments, pending, error, add, remove, clearAttachments } =
    useModelContext();
  const [busy, setBusy] = useState(false);
  const [actionError, setActionError] = useState<Error | null>(null);

  async function run(action: () => Promise<ModelContextOperationResult>) {
    setBusy(true);
    setActionError(null);
    try {
      await action();
    } catch (failure) {
      setActionError(
        failure instanceof Error ? failure : new Error(String(failure)),
      );
    } finally {
      setBusy(false);
    }
  }

  const disabled = busy || pending;
  const failure = actionError ?? error;

  return (
    <section aria-label="Chat context">
      <button
        type="button"
        disabled={disabled}
        onClick={() => {
          void run(() =>
            add("book:summary", {
              type: "text",
              title: "Selected book",
              text: "The selected edition contains 12 illustrated chapters.",
            }),
          );
        }}
      >
        Add to chat
      </button>
      <ul>
        {attachments.map(({ key, block }) => (
          <li key={key}>
            {block.title ?? block.type}
            <button
              type="button"
              disabled={disabled}
              onClick={() => {
                void run(() => remove(key));
              }}
            >
              Remove
            </button>
          </li>
        ))}
      </ul>
      <button
        type="button"
        disabled={disabled || attachments.length === 0}
        onClick={() => {
          void run(clearAttachments);
        }}
      >
        Clear attachments
      </button>
      {pending && <p role="status">Updating context…</p>}
      {failure && <p role="alert">{failure.message}</p>}
    </section>
  );
}

import type { ModelContextBlock } from "mcp-use/react";

export const bookEvidence = {
  summary: {
    type: "text",
    title: "Book details",
    text: "An illustrated guide to garden plants, with 12 chapters.",
    thumbnail: { src: "/covers/book.png", mimeType: "image/png" },
  },
  cover: {
    type: "image",
    title: "Book cover",
    src: "/covers/book.png",
  },
  manual: {
    type: "resource_link",
    title: "Book manual",
    name: "manual.pdf",
    uri: "https://example.com/books/manual.pdf",
    mimeType: "application/pdf",
  },
  sample: {
    type: "resource",
    title: "Reading sample",
    resource: {
      uri: "bookshop://books/garden-guide/sample",
      mimeType: "text/plain",
      text: "Chapter 1: Choose plants for the light in your garden.",
    },
  },
} satisfies Record<string, ModelContextBlock>;

import type { ModelContextImage } from "mcp-use/react";

export function bookCoverFromBytes(data: string): ModelContextImage {
  return { type: "image", title: "Book cover", data, mimeType: "image/png" };
}

import { MCPServer } from "mcp-use";
import { z } from "zod";

const server = new MCPServer({ name: "parts-library", version: "1.0.0" });

server.tool(
  {
    name: "open_library",
    title: "Parts library",
    icons: [
      { src: "library.svg", mimeType: "image/svg+xml", sizes: ["20x20"] },
    ],
    inputSchema: z.object({ category: z.string().default("all") }),
    outputSchema: z.object({ category: z.string() }),
    view: {
      name: "library",
      entrypoints: [{ type: "global" }, { type: "thread" }],
    },
  },
  ({ category }) => ({ content: [], structuredContent: { category } }),
);

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
  <path fill="none" stroke="currentColor" stroke-width="1.33"
    stroke-linecap="round" stroke-linejoin="round"
    d="M10 4.5C7.5 3 5 3 2.5 4v12c2.5-1 5-1 7.5.5 2.5-1.5 5-1.5 7.5-.5V4C15 3 12.5 3 10 4.5v12"/>
</svg>

import { MCPServer } from "mcp-use";
import { z } from "zod";

const server = new MCPServer({ name: "csv-viewer", version: "1.0.0" });
const fileInput = z.object({
  file: z.object({
    name: z.string().min(1),
    resourceUri: z.string().trim().min(1),
  }),
});

server.tool(
  {
    name: "open_csv",
    title: "CSV viewer",
    inputSchema: fileInput,
    outputSchema: fileInput,
    view: {
      name: "csv",
      entrypoints: [{ type: "file", extensions: [".csv"] }],
    },
  },
  ({ file }) => ({ content: [], structuredContent: { file } }),
);

const combinedInput = fileInput.partial();

server.tool(
  {
    name: "open_csv",
    title: "CSV viewer",
    inputSchema: combinedInput,
    outputSchema: combinedInput,
    view: {
      name: "csv",
      entrypoints: [
        { type: "global" },
        { type: "thread" },
        { type: "file", extensions: [".csv"] },
      ],
    },
  },
  (args) => ({ content: [], structuredContent: args }),
);

{
  "ui": { "resourceUri": "ui://views/csv.html" },
  "openai/ui": {
    "entrypoints": [{ "type": "file", "extensions": [".csv"] }]
  }
}

import { useEffect, useState } from "react";
import { useDeepLink } from "mcp-use/react";

export default function LibraryView() {
  const { url } = useDeepLink();
  const [route, setRoute] = useState("/parts");

  useEffect(() => {
    if (url !== undefined) setRoute(url);
  }, [url]);

  const incoming = new URL(route, "https://app.example");
  if (incoming.pathname === "/parts") {
    const tag = incoming.searchParams.get("tag");
    return (
      <main>
        <p>Parts filter: {tag ?? "all"}</p>
        <button type="button" onClick={() => setRoute("/parts/hex-bolt")}>
          Open hex bolt
        </button>
      </main>
    );
  }
  if (incoming.pathname === "/parts/hex-bolt") return <p>Hex bolt</p>;
  return <p>Unknown route</p>;
}

const pluginId = "parts-library"; // Replace with your registered plugin ID.
const toolName = "open_library";
const appUrl = "/parts?tag=bolt&sort=asc";

const link =
  `https://chatgpt.com/plugins/${encodeURIComponent(pluginId)}` +
  `/app/${encodeURIComponent(toolName)}?path=${encodeURIComponent(appUrl)}`;

import { MCPServer } from "mcp-use";
import { z } from "zod";

const server = new MCPServer({ name: "parts-settings", version: "1.0.0" });
let values: { units: "mm" | "in"; showGrid: boolean } = {
  units: "mm",
  showGrid: true,
};

server.tool(
  {
    name: "units_help",
    title: "Measurement units help",
    inputSchema: z.object({}),
    annotations: { readOnlyHint: true },
  },
  () => ({
    content: [
      { type: "text", text: "Choose millimeters or inches for dimensions." },
    ],
  }),
);

server.settings({
  fields: {
    units: { schema: z.enum(["mm", "in"]), title: "Measurement units" },
    showGrid: { schema: z.boolean(), title: "Show grid" },
  },
  layout: [
    {
      kind: "group",
      title: "Display",
      items: [
        { kind: "property", property: "units" },
        { kind: "property", property: "showGrid" },
        { kind: "tool", tool: "units_help", title: "About measurement units" },
      ],
    },
  ],
  read: () => ({ ...values }),
  update: (set) => {
    values = { ...values, ...set };
    return { ...values };
  },
});

import type { ViewConfig } from "mcp-use/react";

export const viewConfig = {
  autoResize: true,
  displayModes: ["inline", "fullscreen"],
  preferredDisplayMode: "fullscreen",
} satisfies ViewConfig;

export default function LibraryView() {
  return <main>Parts library</main>;
}

{
  "availableDisplayModes": ["inline", "fullscreen"],
  "preferredDisplayMode": "fullscreen"
}

import { useDisplayMode } from "mcp-use/react";

export function ExpandButton() {
  const { displayMode, availableDisplayModes, requestDisplayMode } =
    useDisplayMode();

  if (!availableDisplayModes.includes("fullscreen")) return null;
  if (displayMode === "fullscreen") return null;

  return (
    <button
      type="button"
      onClick={() => {
        void requestDisplayMode({ mode: "fullscreen" });
      }}
    >
      Expand
    </button>
  );
}