{"id":33346818,"url":"https://github.com/modelcontextprotocol/ext-apps","last_synced_at":"2026-04-02T21:43:56.766Z","repository":{"id":325541761,"uuid":"1101234405","full_name":"modelcontextprotocol/ext-apps","owner":"modelcontextprotocol","description":"Official repo for SDK of upcoming Apps / UI extension","archived":false,"fork":false,"pushed_at":"2025-11-21T22:50:37.000Z","size":764,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-22T00:18:38.247Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"MDX","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/modelcontextprotocol.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-21T11:39:27.000Z","updated_at":"2025-11-22T00:09:31.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/modelcontextprotocol/ext-apps","commit_stats":null,"previous_names":["modelcontextprotocol/ext-apps"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/modelcontextprotocol/ext-apps","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modelcontextprotocol%2Fext-apps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modelcontextprotocol%2Fext-apps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modelcontextprotocol%2Fext-apps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modelcontextprotocol%2Fext-apps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/modelcontextprotocol","download_url":"https://codeload.github.com/modelcontextprotocol/ext-apps/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modelcontextprotocol%2Fext-apps/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":285755366,"owners_count":27226257,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-22T02:00:05.934Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-11-22T08:00:35.095Z","updated_at":"2026-04-02T21:43:56.758Z","avatar_url":"https://github.com/modelcontextprotocol.png","language":"MDX","readme":"\u003c!-- LOGO --\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"media/mcp-white.svg\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"media/mcp.svg\"\u003e\n    \u003cimg src=\"media/mcp.svg\" alt=\"MCP Apps\" width=\"128\"\u003e\n  \u003c/picture\u003e\n  \u003ch1\u003eMCP Apps\u003c/h1\u003e\n  \u003cp\u003e\n    Build interactive UIs for MCP tools — charts, forms, dashboards — that render inline in Claude, ChatGPT and any other compliant chat client.\n    \u003cbr /\u003e\u003cbr /\u003e\n    \u003ca href=\"#why-mcp-apps\"\u003eWhy\u003c/a\u003e\n    ·\n    \u003ca href=\"https://apps.extensions.modelcontextprotocol.io/api/documents/Quickstart.html\"\u003eQuickstart\u003c/a\u003e\n    ·\n    \u003ca href=\"https://apps.extensions.modelcontextprotocol.io/api/\"\u003eAPI Docs\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/2026-01-26/apps.mdx\"\u003eSpec\u003c/a\u003e\n    ·\n    \u003ca href=\"CONTRIBUTING.md\"\u003eContributing\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/modelcontextprotocol/ext-apps/actions/workflows/ci.yml\"\u003e\u003cimg src=\"https://github.com/modelcontextprotocol/ext-apps/actions/workflows/ci.yml/badge.svg\" alt=\"CI\"\u003e\u003c/a\u003e\n  \u003ca href=\"LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-Apache%202.0-blue\" alt=\"License: Apache 2.0\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@modelcontextprotocol/ext-apps\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@modelcontextprotocol/ext-apps.svg\" alt=\"npm version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@modelcontextprotocol/ext-apps\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/@modelcontextprotocol/ext-apps.svg\" alt=\"npm downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/modelcontextprotocol/ext-apps\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/modelcontextprotocol/ext-apps\" alt=\"GitHub stars\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://apps.extensions.modelcontextprotocol.io/api/\"\u003e\u003cimg src=\"https://img.shields.io/badge/docs-API%20Reference-blue\" alt=\"API Documentation\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"media/excalidraw.gif\" alt=\"MCP Apps demo\" width=\"600\"\u003e\n  \u003cbr\u003e\u003cem\u003eExcalidraw built with MCP Apps, running in Claude\u003c/em\u003e\n\u003c/p\u003e\n\n## Table of Contents\n\n- [Build with Agent Skills](#build-with-agent-skills)\n- [Supported Clients](#supported-clients)\n- [Why MCP Apps?](#why-mcp-apps)\n- [How It Works](#how-it-works)\n- [Getting Started](#getting-started)\n- [Using the SDK](#using-the-sdk)\n- [Examples](#examples)\n- [Specification](#specification)\n- [Resources](#resources)\n- [Contributing](#contributing)\n\n## Build with Agent Skills\n\nThe fastest way to build an MCP App is to let your AI coding agent do it. This\nrepo ships four [Agent Skills](https://agentskills.io/) — install them once,\nthen just ask:\n\n| Skill                                                                       | What it does                                                | Try it                                |\n| --------------------------------------------------------------------------- | ----------------------------------------------------------- | ------------------------------------- |\n| [`create-mcp-app`](./plugins/mcp-apps/skills/create-mcp-app/SKILL.md)       | Scaffolds a new MCP App with an interactive UI from scratch | _\"Create an MCP App\"_                 |\n| [`migrate-oai-app`](./plugins/mcp-apps/skills/migrate-oai-app/SKILL.md)     | Converts an existing OpenAI App to use MCP Apps             | _\"Migrate from OpenAI Apps SDK\"_      |\n| [`add-app-to-server`](./plugins/mcp-apps/skills/add-app-to-server/SKILL.md) | Adds interactive UI to an existing MCP server's tools       | _\"Add UI to my MCP server\"_           |\n| [`convert-web-app`](./plugins/mcp-apps/skills/convert-web-app/SKILL.md)     | Turns an existing web app into a hybrid web + MCP App       | _\"Add MCP App support to my web app\"_ |\n\n### Install the Skills\n\n**Claude Code** — install via the plugin marketplace:\n\n```\n/plugin marketplace add modelcontextprotocol/ext-apps\n/plugin install mcp-apps@modelcontextprotocol-ext-apps\n```\n\n**Other agents** — any AI coding agent that supports\n[Agent Skills](https://agentskills.io/) can use these skills. See the\n[agent skills guide](./docs/agent-skills.md) for manual installation\ninstructions.\n\nOnce installed, verify by asking your agent _\"What skills do you have?\"_ — you\nshould see `create-mcp-app`, `migrate-oai-app`, `add-app-to-server`, and\n`convert-web-app` in the list. Then just ask it to create or migrate an app and\nit will guide you through the rest.\n\n## Supported Clients\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://developers.openai.com/apps-sdk/mcp-apps-in-chatgpt/\"\u003e\u003cimg src=\"https://img.shields.io/badge/ChatGPT-docs-74aa9c?logo=openai\u0026logoColor=white\" alt=\"ChatGPT\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://claude.com/docs/connectors/building/mcp-apps/getting-started\"\u003e\u003cimg src=\"https://img.shields.io/badge/Claude-docs-d97706?logo=claude\u0026logoColor=white\" alt=\"Claude\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://code.visualstudio.com/blogs/2026/01/26/mcp-apps-support\"\u003e\u003cimg src=\"https://img.shields.io/badge/VS_Code-docs-007ACC?logo=visualstudiocode\u0026logoColor=white\" alt=\"VS Code\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://block.github.io/goose/docs/tutorials/building-mcp-apps/\"\u003e\u003cimg src=\"https://img.shields.io/badge/Goose-docs-000000?logo=goose\u0026logoColor=white\" alt=\"Goose\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://learning.postman.com/docs/postman-ai/mcp-requests/interact\"\u003e\u003cimg src=\"https://img.shields.io/badge/Postman-docs-FF6C37?logo=postman\u0026logoColor=white\" alt=\"Postman\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.mcpjam.com/blog/mcp-apps-example\"\u003e\u003cimg src=\"https://img.shields.io/badge/MCPJam-docs-8B5CF6\" alt=\"MCPJam\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003e [!NOTE]\n\u003e MCP Apps is an extension to the\n\u003e [core MCP specification](https://modelcontextprotocol.io/specification). Host\n\u003e support varies — see the\n\u003e [clients page](https://modelcontextprotocol.io/clients) for the full list.\n\n## Why MCP Apps?\n\nMCP tools return text and structured data. That works for many cases, but not\nwhen you need an interactive UI, like a chart, form, design canvas or video player.\n\nMCP Apps provide a standardized way to deliver interactive UIs from MCP servers.\nYour UI renders inline in the conversation, in context, in any compliant host.\n\n## How It Works\n\nMCP Apps extend the Model Context Protocol by letting tools declare UI\nresources:\n\n1. **Tool definition** — Your tool declares a `ui://` resource containing its\n   HTML interface\n2. **Tool call** — The LLM calls the tool on your server\n3. **Host renders** — The host fetches the resource and displays it in a\n   sandboxed iframe\n4. **Bidirectional communication** — The host passes tool data to the UI via\n   notifications, and the UI can call other tools through the host\n\n## Getting Started\n\n```bash\nnpm install -S @modelcontextprotocol/ext-apps\n```\n\n**New here?** Start with the\n[Quickstart Guide](https://apps.extensions.modelcontextprotocol.io/api/documents/Quickstart.html)\nto build your first MCP App.\n\n## Using the SDK\n\nThe SDK serves three roles: app developers building interactive Views, host\ndevelopers embedding those Views, and MCP server authors registering tools with\nUI metadata.\n\n| Package                                     | Purpose                                                   | Docs                                                                                                                |\n| ------------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |\n| `@modelcontextprotocol/ext-apps`            | Build interactive Views (App class, PostMessageTransport) | [API Docs →](https://apps.extensions.modelcontextprotocol.io/api/modules/app.html)                                  |\n| `@modelcontextprotocol/ext-apps/react`      | React hooks for Views (useApp, useHostStyles, etc.)       | [API Docs →](https://apps.extensions.modelcontextprotocol.io/api/modules/_modelcontextprotocol_ext-apps_react.html) |\n| `@modelcontextprotocol/ext-apps/app-bridge` | Embed and communicate with Views in your chat client      | [API Docs →](https://apps.extensions.modelcontextprotocol.io/api/modules/app-bridge.html)                           |\n| `@modelcontextprotocol/ext-apps/server`     | Register tools and resources on your MCP server           | [API Docs →](https://apps.extensions.modelcontextprotocol.io/api/modules/server.html)                               |\n\nThere's no _supported_ host implementation in this repo (beyond the\n[examples/basic-host](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host)\nexample).\n\nThe [MCP-UI](https://github.com/idosal/mcp-ui) client SDK offers a\nfully-featured MCP Apps framework used by a few hosts. Clients may choose to use\nit or roll their own implementation.\n\n## Examples\n\nThe\n[`examples/`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples)\ndirectory contains demo apps showcasing real-world use cases.\n\n\u003c!-- prettier-ignore-start --\u003e\n| | | |\n|:---:|:---:|:---:|\n| [![Map](examples/map-server/grid-cell.png \"Interactive 3D globe viewer using CesiumJS\")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/map-server) | [![Three.js](examples/threejs-server/grid-cell.png \"Interactive 3D scene renderer\")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/threejs-server) | [![ShaderToy](examples/shadertoy-server/grid-cell.png \"Real-time GLSL shader renderer\")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/shadertoy-server) |\n| [**Map**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/map-server) | [**Three.js**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/threejs-server) | [**ShaderToy**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/shadertoy-server) |\n| [![Sheet Music](examples/sheet-music-server/grid-cell.png \"ABC notation to sheet music\")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/sheet-music-server) | [![Wiki Explorer](examples/wiki-explorer-server/grid-cell.png \"Wikipedia link graph visualization\")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/wiki-explorer-server) | [![Cohort Heatmap](examples/cohort-heatmap-server/grid-cell.png \"Customer retention heatmap\")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/cohort-heatmap-server) |\n| [**Sheet Music**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/sheet-music-server) | [**Wiki Explorer**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/wiki-explorer-server) | [**Cohort Heatmap**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/cohort-heatmap-server) |\n| [![Scenario Modeler](examples/scenario-modeler-server/grid-cell.png \"SaaS business projections\")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/scenario-modeler-server) | [![Budget Allocator](examples/budget-allocator-server/grid-cell.png \"Interactive budget allocation\")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/budget-allocator-server) | [![Customer Segmentation](examples/customer-segmentation-server/grid-cell.png \"Scatter chart with clustering\")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/customer-segmentation-server) |\n| [**Scenario Modeler**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/scenario-modeler-server) | [**Budget Allocator**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/budget-allocator-server) | [**Customer Segmentation**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/customer-segmentation-server) |\n| [![System Monitor](examples/system-monitor-server/grid-cell.png \"Real-time OS metrics\")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/system-monitor-server) | [![Transcript](examples/transcript-server/grid-cell.png \"Live speech transcription\")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/transcript-server) | [![Video Resource](examples/video-resource-server/grid-cell.png \"Binary video via MCP resources\")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/video-resource-server) |\n| [**System Monitor**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/system-monitor-server) | [**Transcript**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/transcript-server) | [**Video Resource**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/video-resource-server) |\n| [![PDF Server](examples/pdf-server/grid-cell.png \"Interactive PDF viewer with chunked loading\")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/pdf-server) | [![QR Code](examples/qr-server/grid-cell.png \"QR code generator\")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/qr-server) | [![Say Demo](examples/say-server/grid-cell.png \"Text-to-speech demo\")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/say-server) |\n| [**PDF Server**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/pdf-server) | [**QR Code (Python)**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/qr-server) | [**Say Demo**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/say-server) |\n\n### Starter Templates\n\n| | |\n|:---:|:---|\n| [![Basic](examples/basic-server-react/grid-cell.png \"Starter template\")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-react) | The same app built with different frameworks — pick your favorite!\u003cbr\u003e\u003cbr\u003e[React](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-react) · [Vue](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vue) · [Svelte](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-svelte) · [Preact](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-preact) · [Solid](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-solid) · [Vanilla JS](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vanillajs) |\n\u003c!-- prettier-ignore-end --\u003e\n\n### Running the Examples\n\n#### With basic-host\n\nTo run all examples locally using\n[basic-host](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host)\n(the reference host implementation included in this repo):\n\n```bash\ngit clone https://github.com/modelcontextprotocol/ext-apps.git\ncd ext-apps\nnpm install\nnpm start\n```\n\nThen open http://localhost:8080/.\n\n#### With MCP Clients\n\nEvery Node.js example is published as `@modelcontextprotocol/server-\u003cname\u003e`. To\nadd one to an MCP client that supports stdio (Claude Desktop, VS Code, etc.),\nuse this pattern:\n\n```json\n{\n  \"mcpServers\": {\n    \"\u003cname\u003e\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@modelcontextprotocol/server-\u003cname\u003e\", \"--stdio\"]\n    }\n  }\n}\n```\n\nFor example, to add the map server: `@modelcontextprotocol/server-map`. The\nPython examples (`qr-server`, `say-server`) use `uv run` instead — see their\nREADMEs for details.\n\n#### Local Development\n\nTo test local modifications with an MCP client, clone the repo, install, then\npoint your client at a local build:\n\n```json\n{\n  \"mcpServers\": {\n    \"\u003cname\u003e\": {\n      \"command\": \"bash\",\n      \"args\": [\n        \"-c\",\n        \"cd ~/code/ext-apps/examples/\u003cname\u003e-server \u0026\u0026 npm run build \u003e\u00262 \u0026\u0026 node dist/index.js --stdio\"\n      ]\n    }\n  }\n}\n```\n\n## Specification\n\n\u003cdiv align=\"center\"\u003e\n\n| Version        | Status      | Link                                                                                                                              |\n| -------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------- |\n| **2026-01-26** | Stable      | [specification/2026-01-26/apps.mdx](https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/2026-01-26/apps.mdx) |\n| **draft**      | Development | [specification/draft/apps.mdx](https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/draft/apps.mdx)           |\n\n\u003c/div\u003e\n\n## Resources\n\n- [Quickstart Guide](https://apps.extensions.modelcontextprotocol.io/api/documents/Quickstart.html)\n- [API Documentation](https://apps.extensions.modelcontextprotocol.io/api/)\n- [Specification (2026-01-26)](https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/2026-01-26/apps.mdx)\n  ([Draft](https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/draft/apps.mdx))\n- [SEP-1865 Discussion](https://github.com/modelcontextprotocol/modelcontextprotocol/pull/1865)\n\n## Contributing\n\nContributions are welcome! Please read [CONTRIBUTING.md](CONTRIBUTING.md) for\nguidelines on how to get started, submit pull requests, and report issues.\n","funding_links":[],"categories":["Repos","TypeScript","Mcp Server Directories \u0026 Lists","Tools"],"sub_categories":["MCP Ecosystem"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodelcontextprotocol%2Fext-apps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmodelcontextprotocol%2Fext-apps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodelcontextprotocol%2Fext-apps/lists"}