> ## Documentation Index
> Fetch the complete documentation index at: https://docs.langdock.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Building MCP Servers with MCP Apps
> MCP Apps is an official MCP extension that lets your server return interactive UIs rendered directly inside Langdock and other MCP hosts.
## 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 Apps**
Standard 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
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.
When the LLM calls the tool, the host fetches the HTML from your server and renders it in a **sandboxed iframe** inside the conversation.
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.
```typescript theme={null}
// 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: "..." }]
}));
```
Official spec, SDK reference, and framework guides
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 |
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.
***
## Related Documentation
* [MCP Integration Guide](/en/using-langdock/guides/integrations/mcp/mcp) — How to connect MCP servers to Langdock
* [MCP Server Directory](/en/using-langdock/integrations/mcp-directory) — Verified remote MCP servers you can connect today
* [A2A Protocol](/en/using-langdock/integrations/a2a-protocol) — Agent-to-agent communication