Building MCP Servers with MCP Apps

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

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.

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.

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:

Layer	What it does
Iframe sandbox	Isolates the app from the parent page and other tabs
Predeclared resources	Hosts review HTML before rendering
Auditable JSON-RPC	All app-to-host communication is loggable
User consent	Tool 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:

Tool	Description
`get_form_fields`	Retrieves available fields from a ServiceNow table
`render_form`	Returns an interactive MCP Apps form, optionally pre-filled from conversation context
`submit_form`	Creates 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.

MCP Integration Guide — How to connect MCP servers to Langdock
MCP Server Directory — Verified remote MCP servers you can connect today
A2A Protocol — Agent-to-agent communication

Get Started

Chat

Skills

Library

Agents

Workflows

Integrations

Microsoft Plugins

Models & Limits

Guides

Account

Resources

Troubleshooting

Building MCP Servers with MCP Apps

What is MCP Apps?

How It Works

Security Model

Building Your Own

MCP Apps Documentation

ext-apps GitHub

Example: ServiceNow MCP Server

servicenow-mcp-server

Connecting to Langdock

​What is MCP Apps?

​How It Works

​Security Model

​Building Your Own

MCP Apps Documentation

ext-apps GitHub

​Example: ServiceNow MCP Server

servicenow-mcp-server

​Connecting to Langdock

​Related Documentation

What is MCP Apps?

How It Works

Security Model

Building Your Own

Example: ServiceNow MCP Server

Connecting to Langdock

Related Documentation