A purely text-based AI agent, no matter how intelligent, often leads to a frustrating user experience. An agent can identify a user's need to book a meeting, but can only respond with, "Okay, please visit our website to complete the booking." This forces the user out of the conversational flow and onto a separate webpage to perform the action. The conversation hits a dead end.
This context-switching is inefficient and creates a disjointed experience. For an agent to be truly useful, it must be able to handle not just conversation, but also interaction. The core engineering problem is this: how can an AI agent present rich, interactive UI elements—like buttons, dropdowns, and input forms—directly within the chat window in a standardized, secure, and platform-agnostic way?
The solution is the "MCP Apps" extension to the Model Context Protocol. MCP Apps are an open standard, analogous to real-world frameworks like Microsoft's Adaptive Cards or Slack's Block Kit, for defining UI declaratively using JSON. It allows a tool (via its MCP Server) to respond not with text, but with a rich UI component that the chat client can render natively.
The architecture follows a simple, powerful workflow:
invoke('meeting_scheduler.find_available_slots').MCP Server for the scheduling tool finds three available time slots. Instead of formatting them as a plain text list, it constructs an McpApp JSON payload. This payload describes a UI "card" containing text blocks and interactive buttons for each time slot.invoke call, containing data from the clicked button, back to the tool to finalize the booking. The conversational workflow is completed without ever leaving the chat window.+------------+ 1. find_slots() +-------------+
| Agent |----------------->| MCP Server |
+------------+ +-------------+
^ | 2. Returns McpApp JSON
| 3. Passes JSON to client |
v v
+-------------+ 4. Renders UI +----------------------+
| Chat Client |<-----------------| { "type": "McpApp" } |
+-------------+ +----------------------+
| 5. User clicks button
v
+------------+ 6. book_slot() +-------------+
| Agent |----------------->| MCP Server |
+------------+ +-------------+
The MCP Apps specification is designed to be simple for both tool developers and client renderers. The mcp-server libraries provide convenient helpers to construct the JSON payloads.
Snippet 1: The MCP App JSON Payload
This is the raw JSON an MCP Server might send to ask for user input. It is declarative, describing what to show, not how to show it.
json
{
"type": "McpApp",
"body": [
{
"type": "TextBlock",
"text": "Please provide a reason for the flight cancellation.",
"wrap": true,
"size": "medium"
},
{
"type": "Input.Text",
"id": "cancellationReason",
"placeholder": "e.g., change in travel plans"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Confirm Cancellation",
"data": {
"mcp_tool_name": "flight_booking_tool.confirm_cancellation",
"booking_id": "FL-12345-ABC"
}
}
]
}
Snippet 2: MCP Server Returning an McpApp Object (Python)
A tool developer doesn't need to write raw JSON. They can use helper classes provided by the mcp-server-py library.
```python
from mcp_server_py import McpServer, tool from mcp_server_py.ui import McpApp, TextBlock, Input, Action
class FlightBookingServer(McpServer): @tool(description="Initiates the cancellation process for a flight.") def request_cancellation_reason(self, booking_id: str) -> McpApp: """ Instead of returning text, this tool returns an interactive UI card to gather the necessary information from the user. """ cancellation_card = McpApp( body=[ TextBlock( "Please provide a reason for the flight cancellation.", wrap=True, size="medium" ), Input.Text(id="cancellationReason", placeholder="e.g., change in travel plans") ], actions=[ Action.Submit( title="Confirm Cancellation", data={ # This data is securely passed back when the user submits "mcp_tool_name": "confirm_cancellation_with_reason", "booking_id": booking_id } ) ] ) # The MCP framework automatically serializes this object to the correct JSON return cancellation_card ```
Performance: MCP Apps are designed for high performance. The payloads are lightweight JSON, which is trivial to send over the network. All rendering logic is handled entirely on the client-side by the native chat application, avoiding the need for heavy web page loads or complex rendering environments. This results in a snappy, responsive user experience.
Security: The MCP Apps model provides a two-fold security guarantee.
1. Sandboxed Rendering: The standard strictly forbids executable code or arbitrary HTML in the JSON payload. The client application renders components from a predefined and safe set (e.g., text blocks, inputs, images, buttons). This prevents a malicious MCP Server from executing a Cross-Site Scripting (XSS) attack within the chat client.
2. Action Validation: The data payload within an Action.Submit button is opaque to the client. The client simply sends this data back to the MCP Server when the button is clicked. It is the server's responsibility to validate this data. For example, upon receiving the confirm_cancellation action, the server must first verify that the currently authenticated user is actually authorized to cancel the specified booking_id. This prevents a user from manipulating the client-side payload to take an action they are not permitted to perform.
The "MCP Apps" extension is the critical bridge between conversational AI and modern graphical user interfaces. By allowing tools to return interactive UI components, it fundamentally upgrades the capability of any agent.
The return on this investment is significant: * Massively Improved User Experience: It keeps the user in the conversational flow, creating a seamless and efficient experience that eliminates the jarring need to switch to an external website for simple actions. * Enables Complex, Multi-Step Workflows: It makes it possible to build sophisticated workflows that require user input—such as filling out forms, selecting from menus, or confirming choices—directly within the chat interface. * Write Once, Render Anywhere: Because MCP Apps are an open standard, a tool developer can create a single JSON payload that can be rendered natively across any chat platform that supports the protocol, be it a web chat, a mobile app, or a corporate messenger.
MCP Apps are the key to evolving agents from simple Q&A bots into powerful, interactive applications that can guide users through complex processes and truly get work done.