Guides to MCP Apps
What MCP Apps are, how to put an interactive UI inside ChatGPT, Claude and other agents, and how to get there fast.
Using Widgetry
- Using WidgetryGetting started: your first MCP Apps widgetWidgetry tutorial: sign in, pick a template and a design, edit the data, publish, and see your first MCP Apps widget in a real chat. No code needed.
- Using WidgetryConnect Widgetry to your agentAdd Widgetry's MCP server to Claude, ChatGPT, Claude Code, Cursor, VS Code or Codex, with OAuth or an API key, and what to ask your agent once it is in.
- Using WidgetryCreate your own design for your widgetsMake a custom theme for your MCP Apps widgets in Widgetry: brand colors, type and shape as design tokens for light and dark, in the designer or by agent.
Concepts
- ConceptsWhat are MCP Apps?MCP Apps let an MCP server show an interactive UI inside ChatGPT, Claude, VS Code and other hosts. How they work, how they stay safe and how to build one.
- ConceptsWhich clients support MCP Apps?Which hosts render MCP Apps as of October 2026: Claude, ChatGPT, VS Code, Microsoft 365 Copilot, Cursor and Goose, and what Claude Code does instead.
- ConceptsMCP Apps CSP explainedWhy your MCP App widget is blank: the default CSP, what connectDomains, resourceDomains and frameDomains allow, and how Claude and ChatGPT apply them.
- ConceptsTheming MCP Apps: dark mode and host stylesHow MCP Apps theming works: the host theme, its CSS variables and fonts, the SDK helpers such as useHostStyles, and CSS that holds up in light and dark.
Tutorials
- TutorialsHow to add an interactive UI to your MCP serverThree ways to add a UI to an MCP server with MCP Apps: by hand with ext-apps, with a framework, or by linking a widget you design. Step by step, with code.
- TutorialsBuild an MCP App in TypeScriptA from-scratch MCP Apps tutorial in TypeScript: registerAppTool, registerAppResource, the App class, a single-file build, and ext-apps v1 vs v2.
- TutorialsChatGPT apps are now plugins: build their UI with MCP AppsChatGPT apps are now plugins, and their UI is an MCP App. Move from window.openai and skybridge to the open standard, with a field map and code.
- TutorialsLet your AI agent build MCP Apps widgetsConnect Claude Code, Claude or any MCP client to an MCP server for building UI, and let the agent create, design and publish MCP Apps widgets.
Comparisons
- ComparisonsMCP Apps vs MCP-UI vs OpenAI Apps SDK: which one to build onMCP Apps, MCP-UI and the OpenAI Apps SDK compared: where each came from, MIME types, CSP, bridge APIs, hosts, and which one to build on in 2026.
- ComparisonsMCP Apps builders and frameworks compared (2026)Every way to build MCP Apps and ChatGPT app UIs in 2026: the official SDK, agent skills, frameworks, inspectors, component kits and visual builders.