[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-11209":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":9,"totalLinesOfCode":9,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":9,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":9,"pushedAt":9,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":33,"lastSyncTime":34,"discoverSource":35},11209,"ext-apps","modelcontextprotocol\u002Fext-apps","modelcontextprotocol","Official repo for spec & SDK of MCP Apps protocol - standard for UIs embedded AI chatbots, served by MCP servers",null,"https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps","TypeScript",2404,312,34,88,0,25,60,164,75,29.49,false,"main",[25,26,27,28,7,29],"ai","apps","mcp","mcp-apps","ui","2026-06-12 02:02:30","\u003C!-- LOGO -->\n\u003Cdiv align=\"center\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"media\u002Fmcp-white.svg\">\n    \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"media\u002Fmcp.svg\">\n    \u003Cimg src=\"media\u002Fmcp.svg\" alt=\"MCP Apps\" width=\"128\">\n  \u003C\u002Fpicture>\n  \u003Ch1>MCP Apps\u003C\u002Fh1>\n  \u003Cp>\n    Build interactive UIs for MCP tools — charts, forms, dashboards — that render inline in Claude, ChatGPT and any other compliant chat client.\n    \u003Cbr \u002F>\u003Cbr \u002F>\n    \u003Ca href=\"#why-mcp-apps\">Why\u003C\u002Fa>\n    ·\n    \u003Ca href=\"https:\u002F\u002Fapps.extensions.modelcontextprotocol.io\u002Fapi\u002Fdocuments\u002FQuickstart.html\">Quickstart\u003C\u002Fa>\n    ·\n    \u003Ca href=\"https:\u002F\u002Fapps.extensions.modelcontextprotocol.io\u002Fapi\u002F\">API Docs\u003C\u002Fa>\n    ·\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Fblob\u002Fmain\u002Fspecification\u002F2026-01-26\u002Fapps.mdx\">Spec\u003C\u002Fa>\n    ·\n    \u003Ca href=\"CONTRIBUTING.md\">Contributing\u003C\u002Fa>\n  \u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Factions\u002Fworkflows\u002Fci.yml\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Factions\u002Fworkflows\u002Fci.yml\u002Fbadge.svg\" alt=\"CI\">\u003C\u002Fa>\n  \u003Ca href=\"LICENSE\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-Apache%202.0-blue\" alt=\"License: Apache 2.0\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@modelcontextprotocol\u002Fext-apps\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@modelcontextprotocol\u002Fext-apps.svg\" alt=\"npm version\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@modelcontextprotocol\u002Fext-apps\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@modelcontextprotocol\u002Fext-apps.svg\" alt=\"npm downloads\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fmodelcontextprotocol\u002Fext-apps\" alt=\"GitHub stars\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fapps.extensions.modelcontextprotocol.io\u002Fapi\u002F\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fdocs-API%20Reference-blue\" alt=\"API Documentation\">\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"media\u002Fexcalidraw.gif\" alt=\"MCP Apps demo\" width=\"600\">\n  \u003Cbr>\u003Cem>Excalidraw built with MCP Apps, running in Claude\u003C\u002Fem>\n\u003C\u002Fp>\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:\u002F\u002Fagentskills.io\u002F) — install them once,\nthen just ask:\n\n| Skill                                                                       | What it does                                                | Try it                                |\n| --------------------------------------------------------------------------- | ----------------------------------------------------------- | ------------------------------------- |\n| [`create-mcp-app`](.\u002Fplugins\u002Fmcp-apps\u002Fskills\u002Fcreate-mcp-app\u002FSKILL.md)       | Scaffolds a new MCP App with an interactive UI from scratch | _\"Create an MCP App\"_                 |\n| [`migrate-oai-app`](.\u002Fplugins\u002Fmcp-apps\u002Fskills\u002Fmigrate-oai-app\u002FSKILL.md)     | Converts an existing OpenAI App to use MCP Apps             | _\"Migrate from OpenAI Apps SDK\"_      |\n| [`add-app-to-server`](.\u002Fplugins\u002Fmcp-apps\u002Fskills\u002Fadd-app-to-server\u002FSKILL.md) | Adds interactive UI to an existing MCP server's tools       | _\"Add UI to my MCP server\"_           |\n| [`convert-web-app`](.\u002Fplugins\u002Fmcp-apps\u002Fskills\u002Fconvert-web-app\u002FSKILL.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\u002Fplugin marketplace add modelcontextprotocol\u002Fext-apps\n\u002Fplugin install mcp-apps@modelcontextprotocol-ext-apps\n```\n\n**Other agents** — any AI coding agent that supports\n[Agent Skills](https:\u002F\u002Fagentskills.io\u002F) can use these skills. See the\n[agent skills guide](.\u002Fdocs\u002Fagent-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\">\n  \u003Ca href=\"https:\u002F\u002Fdevelopers.openai.com\u002Fapps-sdk\u002Fmcp-apps-in-chatgpt\u002F\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FChatGPT-docs-74aa9c?logo=openai&logoColor=white\" alt=\"ChatGPT\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fclaude.com\u002Fdocs\u002Fconnectors\u002Fbuilding\u002Fmcp-apps\u002Fgetting-started\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FClaude-docs-d97706?logo=claude&logoColor=white\" alt=\"Claude\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fcode.visualstudio.com\u002Fblogs\u002F2026\u002F01\u002F26\u002Fmcp-apps-support\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FVS_Code-docs-007ACC?logo=visualstudiocode&logoColor=white\" alt=\"VS Code\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fblock.github.io\u002Fgoose\u002Fdocs\u002Ftutorials\u002Fbuilding-mcp-apps\u002F\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FGoose-docs-000000?logo=goose&logoColor=white\" alt=\"Goose\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Flearning.postman.com\u002Fdocs\u002Fpostman-ai\u002Fmcp-requests\u002Finteract\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FPostman-docs-FF6C37?logo=postman&logoColor=white\" alt=\"Postman\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.mcpjam.com\u002Fblog\u002Fmcp-apps-example\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FMCPJam-docs-8B5CF6\" alt=\"MCPJam\">\u003C\u002Fa>\n\u003C\u002Fp>\n\n> [!NOTE]\n> MCP Apps is an extension to the\n> [core MCP specification](https:\u002F\u002Fmodelcontextprotocol.io\u002Fspecification). Host\n> support varies — see the\n> [clients page](https:\u002F\u002Fmodelcontextprotocol.io\u002Fclients) 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:\u002F\u002F` 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\u002Fext-apps\n```\n\n**New here?** Start with the\n[Quickstart Guide](https:\u002F\u002Fapps.extensions.modelcontextprotocol.io\u002Fapi\u002Fdocuments\u002FQuickstart.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\u002Fext-apps`            | Build interactive Views (App class, PostMessageTransport) | [API Docs →](https:\u002F\u002Fapps.extensions.modelcontextprotocol.io\u002Fapi\u002Fmodules\u002Fapp.html)                                  |\n| `@modelcontextprotocol\u002Fext-apps\u002Freact`      | React hooks for Views (useApp, useHostStyles, etc.)       | [API Docs →](https:\u002F\u002Fapps.extensions.modelcontextprotocol.io\u002Fapi\u002Fmodules\u002F_modelcontextprotocol_ext-apps_react.html) |\n| `@modelcontextprotocol\u002Fext-apps\u002Fapp-bridge` | Embed and communicate with Views in your chat client      | [API Docs →](https:\u002F\u002Fapps.extensions.modelcontextprotocol.io\u002Fapi\u002Fmodules\u002Fapp-bridge.html)                           |\n| `@modelcontextprotocol\u002Fext-apps\u002Fserver`     | Register tools and resources on your MCP server           | [API Docs →](https:\u002F\u002Fapps.extensions.modelcontextprotocol.io\u002Fapi\u002Fmodules\u002Fserver.html)                               |\n\nThere's no _supported_ host implementation in this repo (beyond the\n[examples\u002Fbasic-host](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fbasic-host)\nexample).\n\nThe [MCP-UI](https:\u002F\u002Fgithub.com\u002Fidosal\u002Fmcp-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\u002F`](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples)\ndirectory contains demo apps showcasing real-world use cases.\n\n\u003C!-- prettier-ignore-start -->\n| | | |\n|:---:|:---:|:---:|\n| [![Map](examples\u002Fmap-server\u002Fgrid-cell.png \"Interactive 3D globe viewer using CesiumJS\")](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fmap-server) | [![Three.js](examples\u002Fthreejs-server\u002Fgrid-cell.png \"Interactive 3D scene renderer\")](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fthreejs-server) | [![ShaderToy](examples\u002Fshadertoy-server\u002Fgrid-cell.png \"Real-time GLSL shader renderer\")](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fshadertoy-server) |\n| [**Map**](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fmap-server) | [**Three.js**](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fthreejs-server) | [**ShaderToy**](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fshadertoy-server) |\n| [![Sheet Music](examples\u002Fsheet-music-server\u002Fgrid-cell.png \"ABC notation to sheet music\")](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fsheet-music-server) | [![Wiki Explorer](examples\u002Fwiki-explorer-server\u002Fgrid-cell.png \"Wikipedia link graph visualization\")](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fwiki-explorer-server) | [![Cohort Heatmap](examples\u002Fcohort-heatmap-server\u002Fgrid-cell.png \"Customer retention heatmap\")](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fcohort-heatmap-server) |\n| [**Sheet Music**](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fsheet-music-server) | [**Wiki Explorer**](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fwiki-explorer-server) | [**Cohort Heatmap**](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fcohort-heatmap-server) |\n| [![Scenario Modeler](examples\u002Fscenario-modeler-server\u002Fgrid-cell.png \"SaaS business projections\")](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fscenario-modeler-server) | [![Budget Allocator](examples\u002Fbudget-allocator-server\u002Fgrid-cell.png \"Interactive budget allocation\")](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fbudget-allocator-server) | [![Customer Segmentation](examples\u002Fcustomer-segmentation-server\u002Fgrid-cell.png \"Scatter chart with clustering\")](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fcustomer-segmentation-server) |\n| [**Scenario Modeler**](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fscenario-modeler-server) | [**Budget Allocator**](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fbudget-allocator-server) | [**Customer Segmentation**](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fcustomer-segmentation-server) |\n| [![System Monitor](examples\u002Fsystem-monitor-server\u002Fgrid-cell.png \"Real-time OS metrics\")](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fsystem-monitor-server) | [![Transcript](examples\u002Ftranscript-server\u002Fgrid-cell.png \"Live speech transcription\")](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Ftranscript-server) | [![Video Resource](examples\u002Fvideo-resource-server\u002Fgrid-cell.png \"Binary video via MCP resources\")](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fvideo-resource-server) |\n| [**System Monitor**](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fsystem-monitor-server) | [**Transcript**](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Ftranscript-server) | [**Video Resource**](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fvideo-resource-server) |\n| [![PDF Server](examples\u002Fpdf-server\u002Fgrid-cell.png \"Interactive PDF viewer with chunked loading\")](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fpdf-server) | [![QR Code](examples\u002Fqr-server\u002Fgrid-cell.png \"QR code generator\")](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fqr-server) | [![Say Demo](examples\u002Fsay-server\u002Fgrid-cell.png \"Text-to-speech demo\")](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fsay-server) |\n| [**PDF Server**](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fpdf-server) | [**QR Code (Python)**](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fqr-server) | [**Say Demo**](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fsay-server) |\n\n### Starter Templates\n\n| | |\n|:---:|:---|\n| [![Basic](examples\u002Fbasic-server-react\u002Fgrid-cell.png \"Starter template\")](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fbasic-server-react) | The same app built with different frameworks — pick your favorite!\u003Cbr>\u003Cbr>[React](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fbasic-server-react) · [Vue](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fbasic-server-vue) · [Svelte](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fbasic-server-svelte) · [Preact](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fbasic-server-preact) · [Solid](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fbasic-server-solid) · [Vanilla JS](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fbasic-server-vanillajs) |\n\u003C!-- prettier-ignore-end -->\n\n### Running the Examples\n\n#### With basic-host\n\nTo run all examples locally using\n[basic-host](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Ftree\u002Fmain\u002Fexamples\u002Fbasic-host)\n(the reference host implementation included in this repo):\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps.git\ncd ext-apps\nnpm install\nnpm start\n```\n\nThen open http:\u002F\u002Flocalhost:8080\u002F.\n\n#### With MCP Clients\n\nEvery Node.js example is published as `@modelcontextprotocol\u002Fserver-\u003Cname>`. 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>\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@modelcontextprotocol\u002Fserver-\u003Cname>\", \"--stdio\"]\n    }\n  }\n}\n```\n\nFor example, to add the map server: `@modelcontextprotocol\u002Fserver-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>\": {\n      \"command\": \"bash\",\n      \"args\": [\n        \"-c\",\n        \"cd ~\u002Fcode\u002Fext-apps\u002Fexamples\u002F\u003Cname>-server && npm run build >&2 && node dist\u002Findex.js --stdio\"\n      ]\n    }\n  }\n}\n```\n\n## Specification\n\n\u003Cdiv align=\"center\">\n\n| Version        | Status      | Link                                                                                                                              |\n| -------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------- |\n| **2026-01-26** | Stable      | [specification\u002F2026-01-26\u002Fapps.mdx](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Fblob\u002Fmain\u002Fspecification\u002F2026-01-26\u002Fapps.mdx) |\n| **draft**      | Development | [specification\u002Fdraft\u002Fapps.mdx](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Fblob\u002Fmain\u002Fspecification\u002Fdraft\u002Fapps.mdx)           |\n\n\u003C\u002Fdiv>\n\n## Resources\n\n- [Quickstart Guide](https:\u002F\u002Fapps.extensions.modelcontextprotocol.io\u002Fapi\u002Fdocuments\u002FQuickstart.html)\n- [API Documentation](https:\u002F\u002Fapps.extensions.modelcontextprotocol.io\u002Fapi\u002F)\n- [Specification (2026-01-26)](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Fblob\u002Fmain\u002Fspecification\u002F2026-01-26\u002Fapps.mdx)\n  ([Draft](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Fblob\u002Fmain\u002Fspecification\u002Fdraft\u002Fapps.mdx))\n- [SEP-1865 Discussion](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fmodelcontextprotocol\u002Fpull\u002F1865)\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","MCP Apps 是一个用于构建嵌入AI聊天机器人中的交互式UI的标准协议及其SDK。项目支持开发者创建图表、表单和仪表盘等组件，并直接在Claude、ChatGPT及其他兼容的聊天客户端中渲染显示。其核心功能包括提供一套标准化的API和工具集，使得UI开发更加高效且易于集成到不同的聊天环境中。采用TypeScript编写，确保了代码的质量与类型安全。MCP Apps非常适合需要将复杂的数据可视化或用户交互界面无缝集成到对话式AI应用中的场景，如客户服务自动化、智能助手等。",2,"2026-06-11 03:31:24","trending"]