Skip to main content

​
What is MCP Apps?

MCP Apps is an official extension to the Model Context Protocol that lets MCP servers return interactive HTML/JavaScript interfaces — rendered directly in the host application (Langdock, Claude Desktop, VS Code, etc.) — instead of plain text.
MCP vs MCP AppsStandard MCP tools return text or structured data. MCP Apps tools can additionally return a fully interactive UI — forms, dashboards, visualizations — rendered inside the conversation.

​
How It Works

1

Tool declares a UI resource

Your tool definition includes a _meta.ui.resourceUri pointing to a ui:// resource served by your MCP server. This tells compatible hosts that the tool has a UI component.
2

Host fetches and renders the UI

When the LLM calls the tool, the host fetches the HTML from your server and renders it in a sandboxed iframe inside the conversation.
3

Bidirectional communication

The UI and host communicate via JSON-RPC over postMessage. Your app can request tool calls, update the model’s context, and receive results — all without leaving the conversation.

​
Security Model

MCP Apps runs in a sandboxed environment. The host controls what your app can access:
LayerWhat it does
Iframe sandboxIsolates the app from the parent page and other tabs
Predeclared resourcesHosts review HTML before rendering
Auditable JSON-RPCAll app-to-host communication is loggable
User consentTool calls initiated from the app still require user approval

​
Building Your Own

The official SDK is @modelcontextprotocol/ext-apps. It works with React, Vue, Svelte, Solid, Preact, and vanilla JavaScript. The core pattern: a tool returns _meta.ui.resourceUri pointing to a ui:// resource your server serves as HTML. Langdock fetches and renders it in a sandboxed iframe inside the conversation. 
// Tool declares a UI resource
server.tool("render_form", { /* schema */ }, async (input) => ({
  content: [{ type: "text", text: "Opening form..." }],
  _meta: { ui: { resourceUri: "ui://my-form" } }
}));

// Server serves the HTML
server.resource("ui://my-form", async () => ({
  contents: [{ uri: "ui://my-form", mimeType: "text/html", text: "<html>...</html>" }]
}));

MCP Apps Documentation

Official spec, SDK reference, and framework guides

ext-apps GitHub

SDK source, examples, and issue tracker

​
Example: ServiceNow MCP Server

The Langdock ServiceNow MCP Server is a reference implementation that shows how to combine OAuth Dynamic Client Registration (DCR) with MCP Apps forms for creating ServiceNow records from within Langdock. It exposes three tools:
ToolDescription
get_form_fieldsRetrieves available fields from a ServiceNow table
render_formReturns an interactive MCP Apps form, optionally pre-filled from conversation context
submit_formCreates a record in ServiceNow from the submitted form data

servicenow-mcp-server

Reference implementation — OAuth DCR + MCP Apps forms for ServiceNow

​
Connecting to Langdock

Once your MCP server is running, connect it to Langdock the same way as any MCP server. See the MCP integration guide for setup instructions, including authentication options.