Best MCP Apps SDKs and Examples: Build Interactive UI for MCP Servers

To add interactive UI to an MCP server, start with the official MCP Apps SDK (modelcontextprotocol/ext-apps), then pick a framework on top if you want more speed: mcp-use or Skybridge for a full-stack TypeScript and React setup, MCP-UI if you are building a host or need Python or Ruby on the server, sunpeak if testing across hosts is your main pain, and MCPJam Inspector to see your UI render before you connect a real chat app.

MCP Apps is an extension to the Model Context Protocol. A tool points to a ui:// resource that holds an HTML page, the host renders that page in a sandboxed iframe inside the chat, and the page talks to the host over JSON-RPC through postMessage. That is how the official overview describes it, and the stable specification is dated 2026-01-26. Facts in this post were checked on 12 November 2026.

MCP Apps SDKs compared

Stars come from the GitHub REST API as of 12 November 2026. "Hosts it targets" is what each project's own README names, not something we ran.

Project	Language and framework	Official or community	Hosts it targets, per its docs	Stars	Licence	AgenticMart page
ext-apps (MCP Apps SDK)	TypeScript; React hooks; starters for React, Vue, Svelte, Preact, Solid, vanilla JS	Official (MCP project)	Claude, ChatGPT and "any other compliant chat client"	3,086	Apache-2.0 for new contributions, older code MIT (per its LICENSE)	ext-apps
MCP-UI	TypeScript server and React client; Python and Ruby server SDKs	Community	MCP Apps hosts incl. Claude, VS Code, Postman, Goose, MCPJam, LibreChat; ChatGPT via an adapter	5,262	Apache-2.0	mcp-ui
mcp-use	TypeScript; React Views	Community	ChatGPT and Claude	10,878	MIT	mcp-use
Skybridge	TypeScript; React	Community (Alpic)	Claude, ChatGPT, VS Code and other MCP Apps clients	2,187	MIT	skybridge
sunpeak	TypeScript; React 19	Community	ChatGPT and Claude	219	MIT	sunpeak
MCPJam Inspector	TypeScript; web, desktop and CLI tool	Community	Renders MCP Apps and OpenAI Apps SDK UIs; cross-client evals for ChatGPT, Claude, Cursor, Copilot and more	2,312	Apache-2.0 for most code, separate licence for evals code (per its LICENSE)	inspector
MCP Apps Next.js starter	TypeScript; Next.js	Community (Vercel Labs)	ChatGPT, Cursor, Claude.ai	25	None detected	mcp-apps-nextjs-starter
MCP interactive UI samples	TypeScript; Node, Fluent UI React	Community (Microsoft)	Microsoft 365 Copilot	86	MIT	mcp-interactiveui-samples

Star counts move daily, so treat them as a snapshot. Stars show attention, not quality.

1. ext-apps: the official MCP Apps SDK

ext-apps is where the spec lives, and its npm package @modelcontextprotocol/ext-apps is the reference SDK. It has four entry points: the core package for building Views, a /react set of hooks, /app-bridge for hosts that embed Views, and /server for registering tools and resources on your MCP server.

Pick it when you want the fewest layers between you and the spec. The official overview is clear that the App class is "a convenience wrapper, not a requirement", so you can even talk postMessage by hand. The repo also holds a wide set of examples: a CesiumJS map, Three.js scenes, a PDF viewer, sheet music, a cohort heatmap, a system monitor and more.

Setup for an MCP server, quoted from the docs, not run for this post (Node.js 20+):

npm install -S @modelcontextprotocol/ext-apps \
  @modelcontextprotocol/client@^2.0.0 \
  @modelcontextprotocol/server@^2.0.0 \
  @modelcontextprotocol/node@^2.0.0 \
  @modelcontextprotocol/express@^2.0.0 \
  zod@^4.2.0

To run every example against the repo's reference host, also quoted from the docs, not run for this post:

git clone https://github.com/modelcontextprotocol/ext-apps.git
cd ext-apps
npm install
npm start

Then open http://localhost:8080/. The README says the 2.x wire protocol is unchanged from 1.x, so a 2.x View works in a 1.x host. It also says there is no supported production host in the repo beyond the basic-host example. The repo also ships Agent Skills that scaffold an MCP App or migrate an OpenAI app for you.

2. MCP-UI: the MCP UI SDK for hosts and polyglot servers

MCP-UI came before the standard. Its README says its patterns "directly influenced" the MCP Apps spec, and the @mcp-ui/* packages now implement it. The official overview names @mcp-ui/client as one of two ways to add MCP Apps rendering to a client you are building.

Pick it if you build a chat app or agent UI that needs to render other people's MCP Apps (its AppRenderer React component), or if your server is in Python or Ruby. It also keeps a UIResourceRenderer for older MCP-UI hosts and an adapter for ChatGPT's window.openai API.

Setup, quoted from the docs, not run for this post:

npm install @mcp-ui/server @mcp-ui/client
pip install mcp-ui-server
gem install mcp_ui_server

3. mcp-use: full-stack framework with a built-in inspector

mcp-use has the most stars of anything in this category on AgenticMart. It calls itself "the TypeScript framework for MCP" with native Views and MCP Apps support. You bind React Views to tools, and Zod schemas carry types from tool input to the View. Dev mode serves the MCP endpoint and an inspector side by side, and mcp-use dev --tunnel gives you a public URL to try the app in ChatGPT and Claude.

Pick it if you want one tool for the server, the UI, debugging and a headless CLI that can call tools and screenshot a View.

Setup, quoted from the docs, not run for this post:

npx -y create-mcp-use-app@latest
npm run dev

The README then points you to http://localhost:3000/mcp/inspector. A separate Python package exists for MCP servers, clients and agents.

4. Skybridge: type-safe React framework for MCP Apps and ChatGPT

Skybridge, from the Alpic team, is "the full-stack React framework for MCP Apps and MCP Servers". Its pitch is end-to-end types (it compares them to tRPC) and React Query style hooks, plus a dev server with a local emulator, hot reload and a tunnel to Claude and ChatGPT. It says it smooths over host differences so one app runs in Claude, ChatGPT and VS Code.

Pick it if your team already thinks in React and wants typed tool calls from server to View. Its examples include a flight booking carousel, an ecommerce cart and OAuth samples for Auth0, Clerk, WorkOS, Stytch and Descope.

Setup, quoted from the docs, not run for this post:

npm create skybridge@latest my-app

You can self-host on any Node.js platform or deploy on Alpic, the company behind it.

5. sunpeak: testing first, framework second

sunpeak is small by stars but solves a real pain. Its README describes testing an MCP App in ChatGPT and Claude by hand as slow and costly, and says sunpeak replicates both host runtimes locally so you can run end-to-end and visual tests in CI with simulation fixtures. It also runs evals across several models.

Pick it if you already have a server and your problem is regressions, not scaffolding. It works as a full app framework too.

Setup, quoted from the docs, not run for this post:

npx sunpeak new
npx sunpeak test init --server http://localhost:8000/mcp

6. MCPJam Inspector: see the UI before a real host does

MCPJam Inspector is not an SDK, but it is a quick way to see an MCP App render. Its Playground renders both OpenAI Apps SDK and MCP Apps UIs, logs every JSON-RPC and window.openai message, and lets you switch between desktop, tablet and mobile, light and dark, and different CSP settings. MCPJam is also listed as an MCP Apps host in the official client matrix.

Setup, quoted from the docs, not run for this post:

npx @mcpjam/inspector@latest

There is also a hosted web app (HTTPS servers only) and desktop installers.

7. MCP Apps Next.js starter (Vercel Labs)

The Next.js starter shows one Next.js app doing two jobs: app/mcp/route.ts is the MCP server, and app/page.tsx is the widget page the host loads in its iframe. A useMcpApp hook wraps the App class from ext-apps. It is a minimal example rather than a framework, and no licence file was detected, so check with the owners before reusing the code.

Setup, quoted from the docs, not run for this post:

pnpm install
ngrok http 3000
pnpm dev

Its README notes that MCP Apps need a public HTTPS URL for the host to reach, which is why it uses a tunnel locally and Vercel in production.

8. Microsoft's interactive UI samples for Microsoft 365 Copilot

microsoft/mcp-interactiveUI-samples holds business-style MCP Apps examples that render in Microsoft 365 Copilot: expense submission with Entra sign-in, field service dispatch with maps, HR consultant management and insurance claims. Several are published twice, once with MCP Apps and once with the OpenAI Apps SDK, which makes the repo a good side-by-side reference. Each sample has its own README with setup steps.

More MCP Apps examples worth reading

• Excalidraw MCP App streams hand-drawn diagrams into chat. It is the demo used on the official overview page. No licence was detected.
• mcpcn from shadcn-labs offers UI components for MCP Apps (MIT).
• The full list, with kind and licence filters, is on the MCP Apps projects page.

Which AI apps render MCP Apps?

As of 12 November 2026, the MCP project's extension support matrix marks these clients as supporting MCP Apps:

Client	Status in the matrix
Claude (web) and Claude Desktop	Supported
ChatGPT	Supported
VS Code GitHub Copilot	Supported
Microsoft 365 Copilot	Supported
Cursor	Supported
Goose	Supported
Postman	Supported
MCPJam	Supported
Archestra.AI, PostHog Code, Kiro Crew, Glean	Supported
MCP Inspector	Partial
Claude Code	Not marked

The matrix page says it is maintained by the community, so confirm with each vendor. Vendor sources we checked:

• ChatGPT. OpenAI's MCP Apps in ChatGPT page says ChatGPT implements the open MCP Apps standard for UI returned by an MCP server. The page shows no date.
• Claude. Claude's MCP Apps getting started guide says app tools, entry points and embedded websites need a connector backed by a remote server, and that some features depend on organisation access. By default Claude asks the user for permission before it displays an app.
• VS Code. The VS Code team announced MCP Apps support on 26 January 2026, first in Insiders with Stable expected the following week.

ChatGPT Apps SDK vs MCP Apps

According to OpenAI's own page, MCP Apps is the base layer in ChatGPT: you declare UI with _meta.ui.resourceUri and use the ui/* bridge. The window.openai API is an optional extra for ChatGPT-only features. OpenAI says to use window.openai only for what the shared spec does not cover, and keeps its older aliases (such as window.openai.callTool for tools/call) for existing integrations.

In practice:

If you...	Build with
Want one UI that runs in ChatGPT, Claude, VS Code and others	MCP Apps (ext-apps or a framework on top)
Need a ChatGPT-only feature	MCP Apps first, then window.openai for that feature
Already have an OpenAI Apps SDK app	Follow the official migration reference

How to choose in two minutes

1. New server, React team: mcp-use or Skybridge.
2. New server, want minimal dependencies: ext-apps and its vanilla JS starter.
3. Python or Ruby server: MCP-UI's server SDKs.
4. Building a host or agent UI: @mcp-ui/client or ext-apps app-bridge.
5. Existing app keeps breaking in one host: sunpeak for CI tests, MCPJam Inspector for manual debugging.
6. Enterprise target: read Microsoft's samples.

If you have never built an MCP server, do that before adding UI: read what an MCP server is and build your first MCP server.

How we picked

We started from the 20 repositories AgenticMart lists under MCP Apps, which come from public GitHub data. We kept SDKs, frameworks and tools a developer would use to add interactive MCP server UI, plus the starters and examples with the clearest setup. We ranked by fit for that job, not by stars alone. Each project's details come from its README on 12 November 2026, and star counts come from the GitHub REST API on the same day.

AgenticMart has not scanned these projects and did not run their code for this post. Before you install any of them, read the repository, check the licence, and look at what it can touch, which is shown on each listing page. Browse MCP servers and all agent protocols the same way.

FAQ

What are MCP Apps?

MCP Apps are an official extension to the Model Context Protocol that let an MCP server return an interactive HTML interface, such as a chart, form or map, that renders inside the chat. The host shows it in a sandboxed iframe and passes tool data to it over postMessage.

What is the MCP Apps SDK?

It is the @modelcontextprotocol/ext-apps package from the MCP project. It has modules for building Views, React hooks, an app bridge for hosts, and server helpers such as registerAppTool and registerAppResource.

Is MCP UI the same as MCP Apps?

Not quite. MCP-UI is a community project that pioneered UI over MCP, and its packages now implement the MCP Apps standard. MCP Apps is the official specification, stable as of its 2026-01-26 version.

Where can I find MCP Apps examples?

The ext-apps repository has the official set, from a 3D map to a PDF viewer, plus starter templates for six frameworks. Skybridge, mcp-use and Microsoft's samples repo add business-style examples such as booking, ecommerce and approvals.

ChatGPT Apps SDK vs MCP Apps: which should I use?

Start with MCP Apps. OpenAI's docs say ChatGPT implements the MCP Apps standard and that window.openai is for features the shared spec does not cover, so an MCP Apps UI can also run in other hosts.

Does an interactive MCP server UI need a remote server?

Not always. Claude Desktop can run the official examples as local stdio servers, but Claude's docs say app tools, entry points and embedded websites need a remote server, and the Vercel starter notes hosts need a public HTTPS URL.

Built an MCP App? List it

If you have built an MCP App, an SDK or a starter, developers looking for interactive MCP server UI should be able to find it. On AgenticMart you can list free now, paid selling opens soon. Submit your project and it will sit alongside the MCP Apps projects above.