Build a ChatGPT plugin extension: sidebar, panels and file viewers

ChatGPT plugin extensions let an MCP plugin open in the sidebar, run in a panel beside the conversation, or act as the viewer for a file type your product supports. OpenAI announced them at DevDay on 29 September 2026 for all plans, as the same platform it uses to build ChatGPT features. The plugin extensions docs describe them as OpenAI MCP Extensions, and declaring one takes a few lines of SDK code.

This guide covers how to build a ChatGPT plugin extension step by step, what works where at launch, and a workflow for building one with Codex.

What ChatGPT plugin extensions add

A plugin already bundles skills, an MCP server, or both. The MCP server can return an MCP App, which is UI rendered inside ChatGPT. Normally the model decides when to show that UI. Extensions add fixed places where the user can open it.

The docs list nine extensions:

OpenAI names three early users. Canva uses sidebar tabs, Figma uses composer mentions, and Adobe uses file handlers to edit files with Acrobat and Photoshop.

Where do extensions work at launch?

Check the platform table in the protocol specification before you design around a surface. At launch, global and thread entrypoints, structured settings and display modes work on desktop, web, iOS and Android. File entrypoints, file resources and composer mentions are desktop only. OpenAI rich forms work on desktop and web, not mobile. Deep links are not supported on Android.

Two more limits from the docs. Plugin extensions on the web are coming soon for ChatGPT Free and Go users. ChatGPT supports the inline and fullscreen display modes but not pip, and every entrypoint opens fullscreen.

How do I build a ChatGPT plugin extension?

Start with a working MCP server that registers an MCP App resource. Then follow these steps.

1. Install the TypeScript SDK with pnpm add @openai/mcp-extensions. A Python SDK exists for server-side extensions.
2. Wrap your server: const openaiExtensions = new OpenAIExtensions(server); using the import from @openai/mcp-extensions/server.
3. Add an entrypoint to the tool metadata that opens your app.
4. Connect the server in ChatGPT developer mode and test it.
5. Package the plugin with its skills and test the installed version.

For a sidebar app, pass this _meta when you register the MCP App tool. Replace the resource URI with your own:

import type { OpenAIUiToolMetadata } from "@openai/mcp-extensions/server";

const toolMetadata = {
  ui: { resourceUri: "ui://parts/library" },
  "openai/ui": {
    entrypoints: [{ type: "global" }],
  } satisfies OpenAIUiToolMetadata,
};

Change { type: "global" } to { type: "thread" } to open the app in a conversation's side panel instead. For a file viewer, use a file entrypoint and list the extensions you handle:

const toolMetadata = {
  ui: { resourceUri: "ui://parts/viewer" },
  "openai/ui": {
    entrypoints: [{ type: "file", extensions: ["stl"] }],
  } satisfies OpenAIUiToolMetadata,
};

The app then receives a resource URI for the opened file and reads it through the app SDK. The file handler guide in the TypeScript README covers that input.

Rich forms have one server requirement worth knowing early. OpenAI-registered MCP servers require multi-round-trip requests (MRTR). The legacy elicitInput helper only applies to direct MCP connections.

Test it before you package it

Turn on developer mode under Settings, then Security and login. Go to ChatGPT Plugins, select the plus button, and enter your MCP server URL with its /mcp path. The server must be reachable over public HTTPS or through Secure MCP Tunnel.

Before connecting, list and call your tools with MCP Inspector:

npx @modelcontextprotocol/inspector@latest

Keep tools useful without the UI. OpenAI's architecture guide says the model should still complete headless workflows and decide when UI adds value. A sidebar app whose tools fail without the iframe is fragile.

After you change tool names, schemas or UI resources, redeploy, open the connection in ChatGPT Plugins, and select Refresh. Then start a new conversation and rerun your tests.

A Codex workflow for your first extension

Clone the mcp-extensions repository and open it in Codex. Its Bits & Bolts plugin is a CAD parts library that uses every core extension in Codex. It has a sidebar library, STL and STEP file handlers, structured settings, onboarding and composer mentions.

The example's README builds it with Node.js 22 or later and pnpm. From the repository root, run pnpm install --frozen-lockfile and pnpm build. From the example directory, run node scripts/build.mjs --plugin-dir /tmp/bits-and-bolts to produce an installable plugin.

Then ask Codex to trace one extension end to end. A good prompt: "Find where the file entrypoint for STL is declared, and show me the tool, the resource and the app code that reads the file." Once you understand the path, ask Codex to add the same entrypoint type to your own server. Review the diff before you run it.

When the extension works, package it. In Codex, $plugin-creator scaffolds the plugin manifest and a local marketplace entry for testing. We cover packaging and submission in a separate guide.

If you want your team to practise this on a real internal tool, see our Codex training.

Next step: install Bits & Bolts in ChatGPT and open one STL file in the desktop app to see a file viewer working.

Further reading

• OpenAI docs: Plugin extensions
• OpenAI MCP Extensions specification
• OpenAI docs: Connect and test your plugin
• OpenAI docs: Plugin architecture