Use published plugin marks and link the install from the add screen

Rhys Sullivan committed 2 months ago

Commit a87180f1 parent ff496ec6 files · +53 −13Browse files

Unified · Split

6 files

packages/plugins/mcp/src/api/group.ts +2 −0
packages/plugins/mcp/src/react/CodexPluginAdd.tsx +14 −9
packages/plugins/mcp/src/sdk/codex-plugin-presets.ts +16 −0
packages/plugins/mcp/src/sdk/codex-plugins.test.ts +6 −0
packages/plugins/mcp/src/sdk/codex-plugins.ts +14 −3
packages/plugins/mcp/src/sdk/presets.ts +1 −1

packages/plugins/mcp/src/api/group.ts+2−0

     }),
   ),
   setupHint: Schema.optional(Schema.String),
+  setupUrl: Schema.optional(Schema.String),
+  fallbackIcon: Schema.optional(Schema.String),
   /** The plugin's own icon from its local install, as a data URI. */
   icon: Schema.optional(Schema.String),
   /** The plugin's own display metadata from its local manifest. */

packages/plugins/mcp/src/react/CodexPluginAdd.tsx+14−9

             one the card still identifies its provider rather than showing a
             gap, which matters most on the machines that have no install. */}
         <img
-          src={plugin.icon ?? "https://integrations.sh/logo/openai.com"}
+          src={plugin.icon ?? plugin.fallbackIcon ?? "https://integrations.sh/logo/openai.com"}
           alt=""
           className="size-16 rounded-2xl"
         />
             Status
           </span>
           <span className="font-mono text-[11px] text-muted-foreground">
-            {added ? "Added" : plugin.available ? "Ready" : "Requires Codex"}
+            {added ? "Added" : plugin.available ? "Ready" : "Not installed on this Mac"}
           </span>
         </div>
         {!plugin.available && plugin.setupHint !== undefined && (
           <Button type="button" onClick={() => props.onComplete(plugin.slug)}>
             View integration
           </Button>
-        ) : (
+        ) : plugin.available ? (
-          <Button
+          <Button type="button" onClick={() => void handleAdd()} loading={adding}>
-            type="button"
-            onClick={() => void handleAdd()}
-            disabled={!plugin.available}
-            loading={adding}
-          >
             Add integration
           </Button>
+        ) : (
+          <Button asChild>
+            <a
+              href={plugin.setupUrl ?? "https://openai.com/codex"}
+              target="_blank"
+              rel="noreferrer"
+            >
+              Install Codex
+            </a>
+          </Button>
         )}
       </FloatActions>
     </div>

packages/plugins/mcp/src/sdk/codex-plugin-presets.ts+16−0

   /** The MCP server name this plugin registers inside Codex — the `server`
    *  the app-server bridge calls tools against. */
   readonly server: string;
+  /** A public image for this plugin, used when the machine-local icon cannot
+   *  be read (i.e. Codex is not installed here). Only some plugins have one
+   *  published; the rest fall back to the provider's mark. */
+  readonly publicIcon?: string;
   /** Present when the plugin has no MCP server of its own and its API is
    *  projected onto another one. Computer Use and Chrome both ship as
    *  skills/`node-repl` content: Codex never starts a server for either, and
     .map((step, index) => `${index + 1}. ${step}`)
     .join("\n");
+/** Where a person goes to get what a card needs.
+ *
+ *  Linked rather than only described: a card that cannot be used is a dead end
+ *  unless it hands over the next step. Chrome's own requirement is documented
+ *  on the Computer Use page, so it points there instead of the app download. */
+export const setupUrl = (requires: CuratedCodexPlugin["requires"]): string =>
+  requires === "chrome-plugin"
+    ? "https://learn.chatgpt.com/docs/computer-use"
+    : "https://openai.com/codex";
 export const CURATED_CODEX_PLUGINS: readonly CuratedCodexPlugin[] = [
   // Names are exactly the plugins' own displayNames — nothing invented, no
   // provenance suffix. Codex provenance shows in the summaries and on the
     pluginName: "computer-use",
     name: "Computer Use",
     slug: "codex_computer_use",
+    publicIcon: "https://learn.chatgpt.com/images/codex/icons/computer-use-plugin-icon.png",
     requires: "computer-use-app",
     server: "node_repl",
     surface: "sky",
     pluginName: "chrome",
     name: "Chrome",
     slug: "codex_chrome",
+    publicIcon: "https://learn.chatgpt.com/images/codex/icons/chrome-production-large.png",
     server: "node_repl",
     surface: "browser",
     requires: "chrome-plugin",

packages/plugins/mcp/src/sdk/codex-plugins.test.ts+6−0

     // Each card's steps are about ITS requirement: Chrome needs the browser
     // extension, which no other card mentions.
     expect(byId.get("codex-chrome")?.setupHint).toContain("browser extension");
+    // A card that cannot be used still hands over where to go, and shows the
+    // plugin's published mark rather than a gap.
+    expect(byId.get("codex-messages")?.setupUrl).toBe("https://openai.com/codex");
+    expect(byId.get("codex-chrome")?.setupUrl).toContain("learn.chatgpt.com");
+    expect(byId.get("codex-computer-use")?.fallbackIcon).toContain("computer-use-plugin-icon");
+    expect(byId.get("codex-messages")?.fallbackIcon).toContain("integrations.sh");
     expect(byId.get("codex-messages")?.setupHint).not.toContain("browser extension");
     // And the steps are numbered and name the plugin the person clicked.
     expect(byId.get("codex-messages")?.setupHint).toContain("1. Install the Codex app");

packages/plugins/mcp/src/sdk/codex-plugins.ts+14−3

 import { Option, Schema } from "effect";
-import { CURATED_CODEX_PLUGINS, setupHint, type CuratedCodexPlugin } from "./codex-plugin-presets";
+import {
+  CURATED_CODEX_PLUGINS,
+  setupHint,
+  setupUrl,
+  type CuratedCodexPlugin,
+} from "./codex-plugin-presets";
 export interface CodexPluginEntry {
   /** Stable card id, e.g. `codex-messages`. */
     readonly surface?: "sky" | "browser";
     readonly modulePath?: string;
   };
-  /** Shown when `available` is false. */
+  /** Shown when `available` is false: the ordered steps, and where to go. */
   readonly setupHint?: string;
+  readonly setupUrl?: string;
+  /** Public image for this plugin, for machines with no local install. */
+  readonly fallbackIcon?: string;
   /** The plugin's own icon from its local install, as a data URI. Read at
    *  runtime from the user's disk — never shipped with executor. */
   readonly icon?: string;
         ...(entry.surface === undefined ? {} : { surface: entry.surface }),
         ...(entry.surface === "browser" ? { modulePath: browserClient } : {}),
       },
-      ...(available ? {} : { setupHint: setupHint(entry.requires, entry.name) }),
+      ...(available
+        ? {}
+        : { setupHint: setupHint(entry.requires, entry.name), setupUrl: setupUrl(entry.requires) }),
+      fallbackIcon: entry.publicIcon ?? "https://integrations.sh/logo/openai.com",
       ...display,
     };
   });

packages/plugins/mcp/src/sdk/presets.ts+1−1

@@ -49,7 +49,7 @@ const codexPluginPresets: readonly McpStdioPreset[] = CURATED_CODEX_PLUGINS.map( · 48 unmodified lines
49	// without Codex has none to read. Fall back to the provider's mark from the	49	// without Codex has none to read. Fall back to the provider's mark from the
50	// same logo service every other preset uses, rather than vendoring OpenAI's	50	// same logo service every other preset uses, rather than vendoring OpenAI's
51	// artwork into this repo.	51	// artwork into this repo.
52	fallbackIcon: "https://integrations.sh/logo/openai.com",	52	fallbackIcon: plugin.publicIcon ?? "https://integrations.sh/logo/openai.com",
53	family: "codex",	53	family: "codex",
54	defaultSlug: plugin.slug,	54	defaultSlug: plugin.slug,
55	transport: "stdio",	55	transport: "stdio",