Model Context Protocol (MCP) Apps in MCP Server ConsoleSummary<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } What are MCP Apps? MCP Apps are a feature of MCP Server Console that lets you attach a custom HTML interface to a tool. When a compatible MCP client calls that tool, instead of returning plain text, the client renders your HTML in an iframe alongside the response. The data is the same. The experience is completely different. This video covers the complete setup: creating an MCP App in MCP Server Console, attaching it to a tool, connecting to Claude Desktop, and verifying the rendered output. Configuration Steps The video covers each of these steps in detail. This is a summary for reference. Step 1: Create the MCP App Navigate to MCP Server Console and select Apps from the left navigation. This tab is new in v1.6. Click Create app. Fill in the fields: Label — a human-readable name, such as "Incident Table"Description — be specific. This field is exposed to AI clients and used to determine when to invoke the app. Example: "Renders a formatted table of incident records returned by the Look Up Incident Records tool. Displays number, priority, state, and short description."Permissions — declare any browser APIs your HTML needs (microphone, camera, geolocation, clipboard). Leave empty if your interface does not require them. Step 2: Attach the HTML file Under App source, click Add file and attach your HTML file. This is the interface that will render in the MCP client when the tool runs. The HTML file must import the MCP Apps SDK, create an App object, and implement an ontoolresult handler to receive and display the tool response. Step 3: Declare external references If your HTML file imports from any external source, you must declare it. Click Add reference and enter the domain. For the sample file provided: set Type to External Resources, enter https://esm.sh as the URL, and set Library Name to MCP Apps SDK. External Resources vs. External Connection: Use External Resources for libraries, fonts, and stylesheets loaded at render time. Use External Connection for domains your HTML makes API requests to at runtime, such as AJAX calls. Click Create app to save. Step 4: Attach the app to a tool Navigate to Tools and open the tool you want to attach this app to. Find the MCP app field and select the app you just created. Save the tool record. The app is now associated — when a compatible client calls this tool, it will render the HTML interface instead of returning a plain text block. Step 5: Verify in a compatible client Open your MCP client, connect to your server, and invoke the tool. If MCP Apps is supported, the client will render the HTML interface inline. In Claude Desktop, the app appears as a framed panel directly in the conversation. The sample file used in this video renders a formatted incident table. It is designed to work with a Scripted REST tool that returns incident records with number, priority, state, and short_description fields. The file uses three key elements of the MCP Apps pattern: SDK import — loads the MCP Apps SDK from esm.sh, the library that handles communication between the HTML and the MCP clientApp object — creates the connection point between the HTML and the clientontoolresult handler — receives the tool response and builds the table from the returned data Before attaching this file: Ensure your tool's Scripted REST resource returns number, priority, state, and short_description in the response payload. If your tool only returns number, those columns will appear empty. The fields your table displays depend entirely on what your tool returns. MCP Apps is a relatively new addition to the MCP protocol. Not all clients support it yet. If you connect a client and the HTML interface does not appear, check whether that client supports MCP Apps and whether it is on a current enough version. Claude supports MCP Apps. Other clients may vary — check the client's documentation or release notes to confirm support. Related Links<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } MCP Server, MCP Client, and A2A explained Getting started with MCP Apps in MCP Server Console