[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-detail":3},{"article":4,"alternate":36,"related":37,"latest":46},{"orderNumber":5,"showImage":6,"title":7,"metaDescription":8,"jumpUrl":9,"content":10,"metaKeywords":11,"withAllowSearch":12,"modified":13,"viewCount":14,"id":15,"lang":16,"slug":17,"dpTemplateId":18,"thumbnail":6,"withHot":19,"withLeadNews":19,"author":20,"created":21,"withTop":19,"highlightContent":22,"userId":23,"highlightTitle":7,"commentStatus":12,"commentCount":5,"thumbnailToContent":19,"withRecommend":19,"metaTitle":24,"editMode":25,"siteId":5,"user":26,"authorEn":27,"status":34,"categoryId":35,"summary":29},0,"\u002Fattachment\u002F20261009\u002F48462bcee5554dcb8a732885cab930cc.webp","AG-UI, A2UI and MCP Apps: Which Agent UI Standard?","Are AG-UI, A2UI and MCP Apps competing Agent UI standards? The guide\nexplains what each protocol does, when to choose A2UI or AG-UI, and how\nthey work together.","https:\u002F\u002Fyun-hub.chat\u002Flink\u002F?app=aipollo&clickid=yunpoly","\u003Cp style=\"margin:0 0 18px;\">A customer opens a support chat and types one sentence: \"Refund my order from yesterday.\"\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">No menus. No buttons. The Agent understands, and the work begins. In moments like this, natural language feels like the only user interface an Agent will ever need.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">But watch what happens next.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">The customer wants to scan fifteen orders at once. They want to adjust a quantity, compare two receipts, and give a final confirmation before money moves. Suddenly typing sentences feels slow — and the Agent UI needs buttons, lists, and cards after all.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">The simplest way to talk to an Agent is not always the most efficient way to work with one. In production AI systems, the engine and the harness matter, but a well-designed frontend remains indispensable, especially for user-facing AI-native apps.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">Three standards have emerged around this problem: AG-UI, A2UI, and MCP Apps. They sound similar. They are not competing copies. Each one solves a different layer of the Agent UI puzzle.\u003C\u002Fp>\n\u003Ch2 style=\"color:#111;font-size:21px;line-height:1.4;margin:28px 0 12px;\">\u003Cstrong>One Sentence Isn't a User Interface: What Agent UI Changes\u003C\u002Fstrong>\u003C\u002Fh2>\n\u003Cp style=\"margin:0 0 18px;\">\u003Cstrong>Natural language cannot replace traditional UI.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">Expressing a task in words is powerful. \"Refund my order from yesterday\" beats hunting through menus. But reading a dozen orders is faster in a list, changing a quantity is faster with an input or a slider, and confirming an action is faster with a button than typing \"I'm sure.\"\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">So an Agent UI is usually a hybrid: natural language for intent, graphical interface for precision.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">When an Agent and a human exchange complex information repeatedly, the visual expressiveness of HTML beats a wall of plain text or Markdown. Think of a customer-service workbench with a streaming reply and live status panels.\u003C\u002Fp>\n\u003Cfigure class=\"image image_resized\" style=\"width:60.79%;display:table;margin-left:auto;margin-right:auto;clear:both\">\n \u003Cimg src=\"\u002Fattachment\u002F20261009\u002F7b2023a85a2f49e68ec933943aaec47c.webp\" alt=\"Customer service workbench with a streaming Agent reply and live order status panels, flat vector Agent UI illustration.\">\n\u003C\u002Ffigure>\n\u003Cp style=\"margin:0 0 18px;\">\u003Cstrong>Agents need a UI that moves with the task.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">A traditional app is designed in advance: search, order list, order detail, confirmation, success. The user follows a fixed route.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">An Agent's route is not fixed. Which tool runs first, what information is missing, when a human must step in — none of this is guaranteed before the task starts. The interface therefore has to appear as the task demands: an address picker when an address is missing, an amount check when payment is involved.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">\u003Cstrong>The complexity runs deeper still.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">An Agent task can run for minutes. The frontend must show more than replies — it must show progress: which tool is being called, how much is done, what artifact is being produced.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">And when an Agent reaches an external system through MCP, a new question appears. If that integration needs continuous interaction — finding nearby restaurants and ordering from one, for example — where does the interface come from? Building every one of them by hand in the client creates heavy coupling.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">AG-UI, A2UI, and MCP Apps each answer a piece of that question.\u003C\u002Fp>\n\u003Ch2 style=\"color:#111;font-size:21px;line-height:1.4;margin:28px 0 12px;\">\u003Cstrong>AG-UI: A Shared Vocabulary for Agent-Frontend Events\u003C\u002Fstrong>\u003C\u002Fh2>\n\u003Cp style=\"margin:0 0 18px;\">AG-UI, the Agent-User Interaction Protocol, was started by CopilotKit team, released publicly in May 2025, and reached a stable 1.0 specification by September 2026.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">In one sentence, it is an open event standard for real-time, two-way, structured communication between an AI Agent and a user interface.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">A frontend and an Agent constantly exchange signals: requests, replies, progress, confirmations. AG-UI standardizes the events, formats, and protocol behind those signals.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">One boundary matters: AG-UI does not define the UI itself. It tells the frontend what happened — not how the card should look. Presentation stays entirely in the frontend's hands.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">The flow works like this. The frontend submits a task, usually over HTTP POST. An AG-UI adaptation layer converts the Agent's output into standard events streamed back, typically over SSE: run started, run finished, step started, step finished, text message, text delta, state snapshot, tool call started, and more. User confirmations flow back to the Agent the same way.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">The official 1.0 SDK supports TypeScript, Python, and .NET, with adapters for frameworks such as LangChain. On the frontend, teams can use CopilotKit or the standalone @ag-ui\u002Fclient without replacing their UI framework.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">Return to the refund example. At the confirmation step, the Agent should present a clear graphical refund card and capture the customer's decision.\u003C\u002Fp>\n\u003Cfigure class=\"image image_resized\" style=\"width:59.28%;display:table;margin-left:auto;margin-right:auto;clear:both\">\n \u003Cimg src=\"\u002Fattachment\u002F20261009\u002F8fdc7670d368483bbda2e189a69d6845.webp\" alt=\"Refund confirmation card linked to an AI brain by AG-UI event dots, with blank detail rows and confirm and cancel buttons.\">\n\u003C\u002Ffigure>\n\u003Cp style=\"margin:0 0 18px;\">The card is still built by the client. Only the communication follows AG-UI. Print the events the Agent sends and the point becomes clear: there are no UI elements in them, only facts about what is happening and the data those moments carry.\u003C\u002Fp>\n\u003Ch2 style=\"color:#111;font-size:21px;line-height:1.4;margin:28px 0 12px;\">\u003Cstrong>A2UI: The Agent Describes the Interface, the Frontend Renders It\u003C\u002Fstrong>\u003C\u002Fh2>\n\u003Cp style=\"margin:0 0 18px;\">A2UI, the Agent-to-User Interface protocol, is a declarative UI standard initiated by Google and published in December 2025, with CopilotKit and the broader community contributing.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">Its purpose is to let a backend AI safely and dynamically drive the generation and updating of frontend interfaces across platforms.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">This is the answer to the dynamic-UI problem. When a task needs an interface that does not exist in any fixed flow, A2UI carries a description of which controls are needed, how they are organized, and what data they bind to. The frontend then draws them with components it trusts.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">The Agent decides what the UI should express. The frontend keeps control over rendering, styling, and capabilities.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">The backend sends JSON describing surfaces, components, and data. A frontend renderer validates that description against a component catalog, maps each component to a local control, and renders it. When the user clicks, an action travels back through the frontend to the backend, which returns updated UI messages.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">The catalog is a security mechanism. Every renderable component — Button, Card, Text, and the rest — must be registered in advance. The Agent can only request whitelisted components; it cannot inject arbitrary scripts or out-of-scope elements.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">The same description can be reused across platforms, provided both sides support matching component versions, though pixel-perfect parity is not guaranteed. Because A2UI is only a description format, it can travel over plain HTTP or be carried inside AG-UI or A2A.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">In the refund example, the Agent returns a UI description built from Column, Text, Image, and Button components. A simplified trace looks like this:\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">{ \"version\": \"v0.9\", \"createSurface\": { \"surfaceId\": \"refund\", \"catalogId\": \"https:\u002F\u002Frefund-demo.local\u002Fcatalog\u002Fv1\" } }\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">{ \"version\": \"v0.9\", \"updateComponents\": { \"surfaceId\": \"refund\", \"components\": [ { \"id\": \"root\", \"component\": \"Column\", \"appearance\": \"refund-card\", \"children\": [\"eyebrow\", \"heading\", \"actions\"] }, { \"id\": \"eyebrow\", \"component\": \"Text\", \"text\": \"REFUND REVIEW\" }, { \"id\": \"confirm\", \"component\": \"Button\", \"variant\": \"primary\", \"action\": { \"event\": { \"name\": \"confirm_refund\", \"context\": { \"taskId\": \"0eebb393-201d-4e59-9dde-b739341e996d\" } } } } ] } }\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">The contrast with AG-UI is sharp. One standard carries events that let the frontend update itself; the other carries a direct description of the interface.\u003C\u002Fp>\n\u003Ch2 style=\"color:#111;font-size:21px;line-height:1.4;margin:28px 0 12px;\">\u003Cstrong>MCP Apps: When the Tool Brings Its Own Interface\u003C\u002Fstrong>\u003C\u002Fh2>\n\u003Cp style=\"margin:0 0 18px;\">MCP Apps is the official UI extension for MCP, driven together by teams including Anthropic and OpenAI, drawing on the MCP-UI and OpenAI Apps SDK work. The proposal appeared in November 2025 and the release followed in January 2026.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">Picture an MCP connection to a company CRM. The classic approach builds data-query tools, and the frontend renders the results itself. The limits are familiar: plain Markdown and tables are weak for filtering, drill-downs, dynamic panels, and non-text data, forcing many round-trip conversations.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">MCP Apps changes the contract: an MCP Server can return not just text, code, or JSON, but a fully designed HTML frontend alongside the tool.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">A tool that supports MCP Apps carries an additional ui:\u002F\u002F resource reference in its metadata. When the host application discovers it, the host loads the UI resource and isolates it inside an App view running in an iframe, then hands the tool result to that App for display.\u003C\u002Fp>\n\u003Cfigure class=\"image image_resized\" style=\"width:58.88%;display:table;margin-left:auto;margin-right:auto;clear:both\">\n \u003Cimg src=\"\u002Fattachment\u002F20261009\u002F5dfd3a76d778402a9c76ed60dfaff0c9.webp\" alt=\"MCP App architecture showing an iframe sandbox, AppBridge, MCP Client and cloud server connected with two-way arrows.\">\n\u003C\u002Ffigure>\n\u003Cp style=\"margin:0 0 18px;\">When the App needs the backend, it cannot speak to the MCP Server directly. It messages an AppBridge using the browser's native postMessage API, and the MCP Client calls the server tool over the standard MCP protocol. The proxy is a security requirement, not an inconvenience.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">Developers use the official @modelcontextprotocol\u002Fext-apps SDKs, registering tools and UI resources with registerAppTool and registerAppResource. The page lives in the iframe sandbox and exists mainly to deliver dynamic interaction. Pressing \"confirm refund\" inside the App calls a server tool and renders the result: const result = await app.callServerTool({ name: \"decide_refund\", arguments: { taskId, decision: \"confirm\" } }); render(result);\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">Even faster, AI coding tools can build it. Official skills scaffold a new MCP App from scratch, add an interactive UI to an existing MCP Server, or convert a normal web app into an MCP App for quick Agent integration.\u003C\u002Fp>\n\u003Ch2 style=\"color:#111;font-size:21px;line-height:1.4;margin:28px 0 12px;\">\u003Cstrong>How to Choose (and Why You Can Combine All Three)\u003C\u002Fstrong>\u003C\u002Fh2>\n\u003Cp style=\"margin:0 0 18px;\">All three standards touch the interface, but each owns a different stage. Selection starts with the missing piece in your own project.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">\u003Cstrong>Choose AG-UI when the frontend already exists.\u003C\u002Fstrong> The interface is designed in-house, and the app needs the Agent's replies, progress, and status as standardized events.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">\u003Cstrong>Choose A2UI when forms and cards must be assembled dynamically by task.\u003C\u002Fstrong> The requirement is a client that already ships a matching component catalog and renderer.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">\u003Cstrong>Choose MCP Apps when an external tool needs a reusable interface\u003C\u002Fstrong>, such as a map or an editor, that travels with the tool itself. The host must support the extension.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">Each standard can be adopted alone. They can also be layered — an AG-UI stream carrying A2UI descriptions, with an MCP App embedded for a tool that demands a rich interface.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">The question was never which one replaces the others. It is which layer of the Agent UI your application is missing today.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">Have you built with any of these standards? Share where the interface broke down — or where it finally clicked.\u003C\u002Fp>\n\u003Cdiv class=\"dp-template-card\" style=\"border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.1);margin:10px 0;max-width:100%;overflow:hidden;width:100%;\">\n \u003Ca style=\"display:block;text-decoration:none;\" href=\"https:\u002F\u002Fyun-hub.chat\u002Flink\u002F?app=aipollo&clickid=yunpoly\" target=\"_blank\">\u003Cimg class=\"image_resized\" style=\"display:block;height:auto;max-width:100%;width:100%;\" src=\"\u002Fattachment\u002F20260824\u002Fa971e5e4a1844e4b85b51e1600973b00.png\" alt=\"a971e5e4a1844e4b85b51e1600973b00\">\n  \u003Cbutton style=\"align-items:center;background-color:#545bc0;border-radius:0 0 0 0;border-style:none;color:#ffffff;cursor:pointer;display:flex;font-family:Times New Roman;font-size:19px;height:40px;justify-content:center;padding:0;width:100%;\">One-Click Watching\u003C\u002Fbutton>\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003Ch2 style=\"color:#111;font-size:21px;line-height:1.4;margin:28px 0 12px;\">\u003Cstrong>References\u003C\u002Fstrong>\u003C\u002Fh2>\n\u003Cp style=\"margin:0 0 18px;\">AG-UI (Agent-User Interaction Protocol), official documentation and 1.0 specification: https:\u002F\u002Fdocs.ag-ui.com\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">A2UI (Agent-to-User Interface), declarative UI protocol specification and component catalog documentation, Google.\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">Model Context Protocol (MCP), official specification and documentation: https:\u002F\u002Fmodelcontextprotocol.io\u003C\u002Fp>\n\u003Cp style=\"margin:0 0 18px;\">All illustrations are AI-generated.\u003C\u002Fp>","yunpoly, aipollo, mediasync-claw, AG-UI, A2UI, MCP Apps, Agent UI",true,"2026-10-09 15:48:11",192,12787,"zh_CN","agent-frontend-ui-protocols-compared",21,false,"生物新課標在線實驗望京小王","2026-10-09 15:39:00","A customer opens a support chat and types one sentence: "Refund my order from yesterday." ...",22,"AG-UI vs A2UI vs MCP Apps: Agent UI Protocols | yunpoly","html",{"emailStatusOk":19,"statusLocked":19,"mobileStatusOk":19,"englishNickname":27,"nickname":20,"statusReg":19,"id":23,"created":28,"sourceString":29,"avatar":30,"url":31,"statusOk":19,"detailUrl":32,"username":33},"Science Guide AIpollo Player","2026-05-26 16:11:01","","\u002Fstatic\u002Fcommons\u002Fimg\u002Favatar.png","\u002Fuser\u002F22","\u002Fadmin\u002Fuser\u002Fdetail\u002F22","dongxy","normal",72,null,{"prev":38,"next":42},{"id":39,"slug":40,"title":41,"categoryId":35},12815,"0ba924-motionface-ai-animation-copyright-debate","MotionFace Sparks Debate: Is Shared AI Animation Plagiarism or Progress?",{"id":43,"slug":44,"title":45,"categoryId":35},12785,"ai-mathematics-manuscripts-openai","722 Math Manuscripts and the Ten Details Behind Them",[47,52,57,62],{"id":48,"slug":49,"title":50,"thumbnail":51,"categoryId":35},13062,"f0a5f9-showa-rich-girl-aesthetic-viral","The Allure of Showa-Era Elegance: How Retro Fashion Captivates the Digital Age","https:\u002F\u002Fcdn.banyunjuhe.com\u002Fattachment\u002F20261016\u002F8e2ea82531084d1fb66e6e569d2a37ab.png",{"id":53,"slug":54,"title":55,"thumbnail":56,"categoryId":35},13060,"853107-autumn-makeup-trends-low-key-beauty","Embracing the Subtle: Why the \"Low-Key\" Autumn Makeup Trend Is Capturing Hearts","\u002Fattachment\u002F20261016\u002Fb7a43ec994c44031aa6d9cd41427a3e2.png",{"id":58,"slug":59,"title":60,"thumbnail":61,"categoryId":35},13058,"96842b-effortless-curls-beauty-trend","The Art of Effortless Curls: Why 'Perfectly Imperfect' Hair is Taking Over","https:\u002F\u002Fcdn.banyunjuhe.com\u002Fattachment\u002F20261016\u002Fe85b783b60c04535826c3f5b47bbb075.png",{"id":63,"slug":64,"title":65,"thumbnail":66,"categoryId":35},13056,"c526d3-viral-makeup-tutorial-beauty-comments","The Art of the Glow: Inside the Latest Viral Makeup Tutorial Evolution","https:\u002F\u002Fcdn.banyunjuhe.com\u002Fattachment\u002F20261016\u002Ff3706cfcf0284115bdf5c0a408395a55.png"]