Getting started with MCP Apps in MCP Server Console

Ashley Snyder · an hour ago

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 article introduces MCP Apps and walks through the setup. Watch the video below to see the full configuration from start to finish, then use the written steps and downloadable HTML file to follow along in your own instance.

Jump to

Video walkthrough Prerequisites How MCP Apps work Configuration steps Sample HTML file Client compatibility Resources

Watch

Video Walkthrough

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.

Before you begin

Prerequisites

Version requirement: MCP Apps requires Model Context Protocol Server (sn_mcp_server) v1.6, available in Australia Patch 4 or Zurich Patch 11.

Earlier patches will not have the Apps tab in MCP Server Console.

Before you begin, you will need:

The sn_mcp_server.tools_admin role
An existing MCP server with at least one tool configured
An HTML file to use as the app interface (see the sample file below)
A compatible MCP client to test the rendered output (Claude is shown in the video)
OAuth configured on your MCP server — required for any client connection

Concept

How MCP Apps Work

By default, when an MCP client calls a tool on your ServiceNow MCP server, the response comes back as plain text. For a single record or a short answer, that is fine. But when a tool returns a list — a set of open incidents, for example — plain text is hard to work with.

MCP Apps change that. When you attach an HTML file to a tool, the MCP client renders it in an iframe whenever that tool runs. Your HTML file uses the MCP Apps SDK to receive the tool response and display it however you choose — a formatted table, a status dashboard, a filtered list.

An MCP App on its own does nothing. It must be attached to a specific tool. That association is what tells the client which interface to render when a particular tool runs.

Configuration

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. See the sample file below for a working example.

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. If the table does not appear, see the compatibility note below.

Download

Sample HTML File

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 is linked at the bottom of this article.

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 client
App object — creates the connection point between the HTML and the client
ontoolresult 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.

Note

Client Compatibility

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.

Resources

Explore more MCP Server Console resources.

MCP Server Console docs MCP Server Console FAQ MCP & A2A FAQ MCP Apps documentation