MCP 应用的演进：从 JSON 数据到富交互 UI
在 模型上下文协议（Model Context Protocol: 旨在让 AI 模型安全地与外部数据源和工具进行交互的开放协议）的发展历程中，早期的 MCP 服务主要侧重于向大语言模型返回结构化的 JSON 数据。然而，随着开发者和企业对更丰富用户体验的追求，MCPUI（MCP UI: 允许 MCP 服务向客户端返回动态图形界面的技术提案）于 2025 年 5 月开始萌芽，并最终在 2026 年 1 月正式转化为官方标准中的 MCP 应用（MCP Apps: 允许 MCP 服务在客户端沙盒化渲染交互式 UI 控件的协议扩展）。这一演进意味着 MCP 服务不再仅仅是模型的“数据通道”，更是可以直接面向用户呈现交互式小部件（Widgets）的独立应用载体。
通过这种架构，当大语言模型在对话中决定调用某个工具时，该工具不仅能向模型输送数据，还能够直接在客户端的沙盒化 iframe 中渲染出定制的图形界面。用户在聊天窗口中看到的不再是枯燥的纯文本或原始的 JSON 响应，而是直观的可视化图表、控制面板或交互式画布。这种将数据与 UI 绑定并同步分发的能力，为智能体交互设计开辟了全新的空间。
Original English Source
Hello y'all. My name is Pedro. I'm the co-founder of Manufact. And today I want to talk to you about MCP apps. Specifically, we're going to talk about the primitives. So, how these apps are built, how they work, and what they allow you. How to distribute MCP apps. So, what is behind the discovery mechanisms of MCP servers and apps in general. And why I think you should care about this because this is how all software will be used. So, I'm sure most people here listening to this talk know what an MCP is. MCP has been around for quite some time since 2024. For a full year, it was a it became very say frequent talk amongst developers and companies that were rushing to build these MCP servers. MCP apps are less familiar concept. They've been around also for some quite some time more or less since the end of 2025. But when I talk to companies and people in general, I see that many people don't understand what they are and don't understand they can build them. And specifically, they don't know how to distribute them. MCP apps, but also they don't know the new way to distribute MCP servers as well. So, I hope by the end of this talk you going to know about this and you're going to be ready to build your first or iterate on your MCP server and app and you're going to be able to share it with the world in a more efficient way brings you more customers and more users. A little words about me and the Manufact my company. We build open source SDKs and the tools for MCP and MCP cloud of the Manufact. Open source SDKs by the name of MCPUs allow developers to build servers, clients and agents in an easier way. So, we provide an abstraction over the official SDKs that allows developers to ship faster without worrying about how the spec works beneath. We have 8 million plus downloads across our SDKs, and we have 10K stars on GitHub. Also open source, the other product is the inspector. It's an open source inspector, again, something comparable to the official inspector from the model context protocol maintainers that allows you to test these MCP servers and apps specifically on your local machine. Once you build, once you test it, we have built the cloud for you to ship. The Manifold Cloud is a cloud vertical for MCP. We provide all the primitives for you to be able to ship MCP servers from your GitHub repo and test them immediately, share them with your team, run emails, run publishing checks to make sure that your app is ready to be submitted, and many other features that are completely specific to MCP. Of course, we really believe in MCP. So, let's look a bit in the history of MCP and how did we get there. So, MCP was launched in 2024, and by the end of May 2025, Idel Solomon, the other co-founder, started working on MCPUI, which is this way to kind of MCP servers that return UI components. Then, this was like many many people started talking about MCPUI because this is like such a great opportunity to ship UI with your MCP servers to agents. So, it is interactive experiences where the agent is calling tools, but it's showing UIs to the user. This created a lot of movement. Many people enjoyed this proposal, and the ChatGPT at some point released the app SDK, which is a way to create these interactive MCP apps. So, basically MCP servers also return UI elements. Also, at the end of 2025, quite silently, both Character AI and Claude released and opened their stores for MCP. These stores allow you to submit your MCP server and have a one-click install experience for your users. For the most time, these stores were closed in such that were designed and only allowed for design partners. But things have changed, and I'm happy to talk about this later. In January 2026, MCP UI I say converted to MCP apps. MCP apps is now the official extension of the Model Context Protocol that allows to return UI elements within MCP servers. So this timeline is kind of an explanation of how the protocol evolved. And I think still I think two major things happened in this timeline. First, MCP apps. MCP servers are not only returning JSON. And that allows much richer experiences. And the second thing, maybe even bigger, is that the stores opened. This was a great a huge move by the model providers probably OpenAI, Perplexity, and basically every LLM client out there to say, "Oh, MCP is the way and we want to have a way for people to publish vetted and quality MCP servers so that people can use them with a one-click install experience." This is the situation right now with the stores. The that are now being submitted to Character AI and Claude apps for Character AI and connectors for Claude increasingly being accepted. As I was saying in the beginning, this was each one of them was gated behind design partnership because the ecosystem was very young, but now it's a GPT and called are both accepting more and more apps. So, this is a this is the moment to publish yours.MCP 核心基元：状态同步、交互触发与隐私保护
在 MCP 应用的架构设计中，包含了一系列关键的核心基元，这些基元共同构成了沙盒 UI、大语言模型与宿主客户端之间的桥梁。段落之间具体的联动机制与功能边界如下：
- 状态设置基元（Set State: 允许沙盒 UI 将用户在其界面上的交互状态同步传递给大模型的技术机制）：虽然 UI 呈现在用户端，但大模型本身默认无法直接“看”到 iframe 内部发生的实时 DOM 变化。当用户在小部件中进行操作（如勾选商品或选择某篇文章）时，UI 可以通过
set_state接口更新模型所感知的状态。大模型在后续的对话生成中便能感知到这部分交互历史，从而做出上下文相关的智能响应。 - 随访消息基元（Send Follow-up Message: 允许沙盒 UI 直接向聊天会话发送文本消息的交互通道）：除了状态同步，UI 控件还可以直接充当消息触发源。例如，UI 中的“了解更多”按钮被点击时，可以直接向聊天会话中插入一条用户口吻的提示词，模型收到后会立即启动流式回答。不同的客户端对此体验的处理有所差异：Anthropic 的 Claude 客户端会先将消息放置在输入框中，由用户确认后发送；而 OpenAI 则会直接发送消息并立即流式响应。
- 增量输入流式渲染：MCP 应用支持在模型流式填充工具参数时，实时捕获这些未完成的“片段代币（Tokens）”，从而以渐进式动画的形式实时绘制 UI。这一特性常用于绘图工具（如 Excalidraw）或 React 视频渲染工具（如 Remotion），用户可以亲眼目睹图表或动画随着模型推理进程而一步步构建出来的动态过程。
- 跨工具调用与数据隐私隔离：运行在客户端沙盒内的 UI 还可以作为独立入口，去调用当前 MCP 服务器上的其他附属工具以获取补充数据。更重要的是，MCP 应用天然提供了一种隐私屏蔽机制。当处理敏感的个人数据或企业机密时，MCP 服务可以向 UI 返回包含敏感详情的完整小部件，但仅向大模型服务商的服务器返回脱敏后的摘要文本（例如：“用户正在上方的安全组件中查看其私人财务账户”）。这有效地在保护用户隐私的同时，维持了交互的顺畅性。
Original English Source
So, let's see what MCP apps actually are and what you can do with them. So, an MCP app works in the in the following way. Much of this is very similar to MCP. The model is a in the host owns the tools. The tools are in a MCP server. But, the MCP server in this case doesn't return a JSON string again, but it returns a widget in a sandboxed iframe. So, the experience you see is your model is a streaming text. At some point, it decides to make a tool call, but the tool call is not just returning JSON, it returns a UI just underneath. And this UI is a sandboxed iframe, so you can as a company developing these apps, you can put almost whatever you want. But, it doesn't end there. Actually, there is a bidirectional communication that happens between the iframe and the host application. So, from the iframe, from the MCP app UI elements, you can send messages back to the host. You can interact in several ways. I'm going to talk more about that later. The way this works is that MCP declares UI resources at initialization time. When the model calls the tool and it populates the arguments of the tool, the tool can then populate the arguments of the UI resource, and that can be then displayed and rendered by the client. As you see here, this is the kind of experience that you can see in an MCP app. The MCP server returns tool returns UI resource that is populated with the tool arguments. And here you see. So, without UI you would see like a wall of text. The UI allows you to organize the information in a more human readable way. So, this is a like the basics of MCP ops. I think they're many many times they've been talked about. And today I wanted to show a bit more of what you can do because this is not often mentioned and I think it's very interesting to design new experiences which this new protocol allow. So, first of all, again, the UI is displayed in the chat and it exposes a communication channel between the UI element and the host application. So, the host application will listen for these messages going through these channels and will react accordingly. So, this is the first primitive that I'm going to talk about. So, model context. In the UI you can show whatever information you want. For instance, in this case we're showing three articles, but the model doesn't really know it doesn't really cannot really introspect in real time what is going on in the UI. But the protocol mandates this state or this set state primitive where you can update the state of the model with respect to the UI components. So, from the widget itself you can call this is an MCP use syntax that makes this a bit easier, the set state primitive, and you can update what the model knows about what's being displayed. So, here we have a little demo that shows this. Of course, the the the message prompts the tool and the tool shows the UI. The state of the of this UI element is that nothing is selected and the model knows about this. But if you modify the UI state, you can communicate this state change into the model itself. So, then basically, if for example, here I send another message, the model will be aware of what happened in the UI element. And you can do this by simply setting this using this this primitive set state and update the state that the model knows about. UI message. So, this is another very cool feature where from the UI element the UI widget that your tool returns, you can send messages back to the model. So, not only the interaction is I am a user, I have my chat interface, I see the UI, and I want to send another message. Or maybe there is some contextual message that you can you want to send. For instance, here we have the same shoe example, and you might want to learn more about Trey Blazer Pro. And you can of course link the click of this button learn more to the primitive send follow-up message, and this will send a message to the chat itself, and the model can start giving you more information about the Trey Blazer Pro shoe in this case. Um clients have different behavior regarding this, and this is true for many of the MCP features. For instance, Cloud will display the message in the chat input and tell the user like the user has the choice to send it or not. While OpenAI is a bit more integrated in this sense, it directly sends the model the message to the model and starts streaming immediately the answer to that message. This is a very cool feature. So, again, we have the the tool, and we have a UI element that's populated from the tool itself, right? If the model streams the input tokens into the tool arguments, you can in live take those partial input and update the UI incrementally. So, as you see in this case, we see that the the the the the tool inputs are being populated dynamically or gradually, and the the UI reacts accordingly. I have a very cool demo about this just later in a video where in one of the coolest demos of MCP apps uses exactly this pattern. So, you can, for example, imagine like you could have a UI component that renders something like an SVG, and there is MCP MCP apps doing that. We also seen we actually created a Remotion MCP app where we use Remotion to create a video with React, and we render the Remotion video inside the widget in real time as the tokens are streaming in. Another thing you can do is from the from the widget itself, you can call other tools. So, first of all, you can call the tool, of course, in the in the in the in the tool that was originally called to gather other data, but from the UI, for example, you can have a button that triggers another tool call to gather additional data about what what is there in the MCP server. Again, the primitive is very simple. This is code on the left here is always from MCP use. This is another very interesting thing that you can do with MCP apps. So, sometimes what happens is for instance, you want your MCP server to return certain informations, but you want to not show the full information because maybe is there's private information that you don't want to give to the to the to the model providers, and therefore, you might want to redact that right? This is like a known privacy issue with MCP servers that you don't want to return and put into the your private information. And MCP also allow you to do that. So, when you call a tool, you return a widget, which is populated with some arguments. You can return other outputs as well. As in normal MCP servers, the the return of a of an MCP tool is list of outputs of different types. You can imagine in this case, there is a structured output, which is sent into the widget itself. And there is an additional output that can be sent directly to the model. So, something common that you do is you show a very rich UI, like in this case, and and this is what the UI will show. So, this is a card showing the information private information of of this person, but the model will only see the information you want. So, there's two types of output, the ones that are shown in the UI, to put it simply, and the ones that are sent to the model. Like a common to maybe understand this better, a common pattern that you see is you show the full information in the UI, and then you instruct the model with a text output of what the user is seeing. For instance, we return a this this UI card, and we can even return nothing to the model. But just say, the user is seeing his private information in the widget above. So, this is a pattern that allows you to, you know, give allow it like experiences in in fields where maybe sharing data to the LLM is not possible because of privacy issues. In this case, you can show the UI to the user, but the model won't see the data that you display in the UI, unless you choose so. There's another set of functionalities which I think are minor or let's say less intuitive or less advanced. Here we show the request display mode which basically your MCP app widget is displayed in line with the tool call. But it can even put the full screen. So the full chat is going to be your MCP widget and input box is going to be overlaid on top of the widget. And for instance, this is very cool for video editing. You can imagine a widget showing some graphical interface and you can chat that we improve the the what's the shown inside the widget and the model can directly stream into the widget you're looking at. It can also be put in a picture-in-picture or in line which is the normal case. there's a other primitives that allow you to open external links from the MCP widget itself. You can listen to the theme of the OS so that you know your MCP app is synchronized in theme with the host your users are using. And there are many other things.主流客户端支持与开发者生态工具链
目前，头部的 AI 客户端与编辑器正在加速对 MCP 应用的适配与升级：
- 客户端支持现状：目前，包括 Claude 桌面端及工作区、ChatGPT 客户端以及 AI 代码编辑器 Cursor（在其 Agent 模式和普通聊天侧边栏中）均已全面支持 MCP 应用的运行与渲染。此外，VS Code 等主流 IDE 也在通过相应的插件生态跟进适配。
- 差异化适配与回退机制：为避免在不支持 UI 渲染的传统 MCP 客户端（如仅支持文本交互的 CLI 客户端）上出现界面异常，开发者可以利用开发框架提供的客户端元数据（Metadata）检测功能。通过判断宿主环境是否支持渲染 Widget，动态调整输出。如果支持，则推送富 UI；若不支持，则退回到纯文本或结构化数据，确保多端体验的一致性。
- 快速开发工具链：为了简化底层通信协议的处理，生态中推出了开源的高级抽象包 MCPUs。它对官方官方 SDK 进行了二次封装，提供了声明式的 React 组件绑定方式。开发者只需将 React 组件放在项目的特定资源文件夹中，编译工具便会自动将其打包为 HTML/CSS 格式并注册为 MCP UI 资源。此外，开发者可以通过运行
npx create-mcp-app快速脚手架命令，一键生成规范的 MCP 应用模板项目。
Original English Source
So I wanted to show you here a few videos of MCP apps because so far I've just been showing some mock-up that I created for this presentation. Uh but this is for example in Cursor we're using the MCP app. Cursor is one of the clients that supports MCP apps. And as you see here our MCP app returns the analytics of the remote MCP server app that I was talking to you about just before. And for instance, this is very useful in in analytics. For instance, we use Pulsar MCP a lot and then the Pulsar MCP will show you a UI element with your with your analytics. So that you as a human can understand what's going on, but the model itself can read those analytics and go do its job on the code you're writing. Um on Claude, so this is the demo I was telling you about. So, here we're using the Excalidraw MCP server, and here you will see the streaming functionality that I that I mentioned as before. So, you can see here that Claude is first reading the some instructions that are returned as tool by the Excalidraw MCP server. And at some point it will call the tool which is showing the canvas, and it will stream tokens into the canvas, and I think we motion it's one of the coolest animation around how those tokens are shown. As you see here, this is like a mermaid syntax that is sent into the tool, and the the UI updates as the tokens are streamed in. There's some of the some of the coolest demos here. By the way, very very useful to draw diagrams as well. And this is again ChatGPT using the Manifold MCP app showing the same analytics that I was telling you above. And as you see here, the rendering is a bit better in ChatGPT it's better. Basically, this is very similar to how it uses. Maybe this is a good time to talk about the client support. There's many clients that support MCP app. Some do more, some do less and these three I think are the main that people are using. And of course, all the different versions of Claude and ChatGPT so both Claude Co-work, Claude Desktop support MCP app, ChatGPT and Codex support MCP app. And Cursor both in the agent mode and in the normal side chat supports MCP app, but there is many more that support MCP app such as VS code and others. And I think it's actually interesting to mention here that another thing you can do you might be developing your MC server and you don't know if the host where your users are using the MC server supports or not MC apps. What you can do is since we know what the client is from the metadata that is exchanged the MC app you can return a UI element only for those host that actually accepts and can render those those widgets. And then this is not really a big deal because most non-MC app clients so MC client that don't support MC app will not will simply not show the widget. But I found developing these servers many times that if you don't show the widget, you need to return a different output because some of the information was returning the widget but maybe you want to give it to the model if the widget is not shown. So this is something also MC user helps you with with some primitives that allow you to to know if the client your MC server is connected to actually supports MC apps or not. Again, a little idea of how you can build these MC apps with MC users. We are one of the most popular SDKs to build these MC apps. The way we design our SDKs that basically you design your MC server as you always did. So you have your MC server constructor and then you define tools. And from the tools, you can simply return widgets which are automatically registered from this widget file in the resources folder. So whatever you put as a widget file in the resources folder will be registered as a UI resource that you can return from a tool. And the widget the widget file is just a React component and you can also use your existing UI components. And it will be compiled into HTML and CSS. And then returned and linked it to the tool. We have a template. You can just run NPX create-MCP-app and it will give you a template that you can serve.应用商店与动态发现：重塑软件分发的流量入口
随着 AI 原生交互生态的形成，软件分发和发现的底层逻辑正在被重新定义。分发机制的主要变革点如下：
- 自助提审通道的开放：在 2025 年底之前，MCP 的分发主要局限于少数受邀的设计合作伙伴。而现在，主流平台均已开放了自助提交系统。ChatGPT 推出了应用中心，Claude 对团队和企业账户开放了连接器（Connectors）自助提报表单，Cursor 也建立了对应的插件目录。
- 严格的规范校验流程：当开发者向商店提交 MCP 服务器或应用时，平台会自动扫描相关 API 描述，确保所有暴露的工具都包含清晰的描述性注解（Annotations）和参数约束。同时，系统会对服务器所声明的身份验证机制（Authentication）进行安全扫描，并要求开发者提供预置的测试 Prompts，以通过自动化与人工混合的测试验证。
- 一键安装体验：商店的成熟彻底告别了让用户手动复制配置 JSON 文件的复杂流程。用户在商店中点击“一键安装”即可无缝集成应用。
- 动态发现（Dynamic Discovery）机制：这是整个生态中极具颠覆性的演进。目前以 Anthropic 的 Claude 表现最为典型：当用户向 AI 描述一个复杂的意图或任务时，即便该用户的客户端中尚未安装特定工具，AI 也会根据语义在云端的 MCP 注册表（Registry）中主动检索最匹配的连接器，并动态推荐给用户使用。这意味着，只要开发者的 MCP 应用功能切中用户痛点且描述清晰，就能通过大模型决策链，将服务精准推送到数以亿计的意图爆发场景中，实现去中心化的自然增长。
正如 Y Combinator 创始人 Paul Graham 所言：“AI 应用就是新的浏览器。” 在这个全新的生态框架下，大模型客户端扮演着浏览器的角色，而各种搭载了富交互 UI 的 MCP 应用正是支撑起整个智能计算网络的新一代网页。未来的用户将越来越少地去主动登录林立的 SaaS 后台，转而习惯于在聊天与编码的工作流中，通过统一的 AI 界面直接调度各类 MCP 工具，完成在真实世界里的全部业务操作。
Original English Source
So, let's talk about distribution and discovery, which I think it's of course a very important topic. maybe even less known than how MCP apps work. I'm talking to many people and they don't know there's a store for MCP and they don't know how to submit, so I wanted to talk about a bit about this as well. So, the store is like a huge new distribution channels. Again, you're bringing the three most popular clients, ChatGPT, Claude, and Cursor, which the three of them, they all support a self-serve submission process. ChatGPT was one of the first supporting this. Claude, since a couple weeks they have self-serve submission form for team and enterprise accounts. And also Cursor allows you to submit their MCP server set. The way you submit is different for all three, but basically what happens is that you need to make sure that your MCP app is compliant. MCP apps or servers can be both submitted in all these three stores, so you it doesn't need to return a UI your your server to be eligible for submission. Um and the three processes to get your app submitted is different and they have different speed. So, it's going to take maybe a bit more on on Claude for now and ChatGPT instead is it's up a lot the acceptance of these of these apps. And again, the process is you link your remote MCP server. They will scan the tool. And they will make sure that all the tools are correctly annotated. And have the correct arguments and And once this is done, they're going to scan the the authentication as well. So, if your server requires authentication, you have to declare it and you need to make sure that it works. There's a few more different steps which are details for all the all the providers. But it's important to say that once your app is submitted, it's going to be partially manually or partially automatically tested. So, you will have to provide some test cases and some test prompts. And then it will be either accepted or rejected. And if accepted, you're going to be able to publish it and make it available on the stores that you can find on chadigpt.com/apps on the connectors directory on cloud or on the the cursor directory. Again, we did the many submissions and we we try to make this process easier. So, if you want to submit your app, I think you should go to manifester.com where we vet your app to make sure that it's ready to be submitted. So, we check and we try to do all the checks that those clients will do in the submission process. And also, we run we generate some of the submission artifacts that you need to submit like screenshots and test cases for you in in our cloud directory if connected to your MCP server. Something very very cool about this is that once your app is in the store, not only can people find it by searching on the store, not only you can send a URL to your customers and they're going to be able to install your application in one click. So, you don't have to share that ugly JSON file anymore with your MCP configuration. But it's very important that dynamic discovery of MCP server is happening. Today Cloud is the only client that actually does this, but for all apps in the stores, when Cloud needs is like assigned a task that doesn't have a specific tool to do, it will actually search in the MCP registry for the right connector to do the task. So imagine what this means for your particular product. All the people There's many of course active users on those applications or more than billion active users, which will manifest an intent directly in the chat and through the intelligence of the model, the model will choose what is the best connector. And if you're there, and you do your work to be the connector that is selected, this is going to be like a a huge wave of high intent individuals that want to need your product and will find it dynamically and organically on those on those platforms. So this is very important. Cloud does this today and ChatGPT is expected to do this pretty soon. So that was my discrete descriptive part of the talk. I just want to I think it should be clear by now how important it is to be on the stores. I can bring my experience. Being on the store brought us a lot of traffic. Personally, as a user of MCP, today I'm checking if a product has an MCP server and that's for me is like the most basic buying decision. I run most of my day-to-day work on Cloud Co-work or Cloud Code because I love the the the possibility to share the context between my code base and my different connectors. And this to me is so important. For instance, one workflow that I that I often run is I have my Granola MCP where I have my meeting notes. I have Linear where I track my tickets. Of course, I'm in my code base if I'm using this from Cloud Code. And I can basically pull the meeting notes with some customer feedback and feed it back in the in Linear maybe I create tickets for the rest of the team. And then I have the agent that pulls the Linear ticket through the Linear MCP and just starts doing it. Opens the PR. And closes the Linear ticket. And I mean, in an ideal world, it would even send an email back through MCP to the customer saying, "Oh, this is fixed." But maybe we're not there yet. But this is definitely true. And in fact, just a few days ago, Paul Graham, the founder of Y Combinator, said, "AI apps are the new browsers." And in this case, the AI apps are Cloud Code, Codex, Cloud Code Work. And I fully agree with this. If you think about it, Google Search in a way has been substituted by looking on ChatGPT. So, now that we have connectors where you cannot only search, but you can also do stuff in the real world, all those all those operations are going to be moved to the chat as well. So, in a way, I think that if AI apps are the new browsers, the ChatGPTs are the new websites. And as a website, they can return a UI with MCP apps. So, again, I don't want to look at your dashboard anymore. I want to use it in Cloud. And if any dashboard, I want to see it in the Cloud Code application. So, ship an MCP app. Thank you very much. I hope you enjoyed the talk and I'm hope there is any questions about this and super happy to help. Um by now, have a very expert on the topic. So, thank you very much. Have a good one.📌 文中提及的人物和组织
公司/组织: Manufact, OpenAI, Perplexity, Character AI, Anthropic, Y Combinator
产品/模型: Claude, ChatGPT, Cursor, Remotion, Excalidraw, Pulsar MCP, Granola MCP, Linear