MCP Apps POC

You can run an MCP Server that serves both traditional text responses and interactive MCP Apps UIs. This setup lets you deliver dashboards, forms, and charts inside chat clients, while keeping a text fallback for clients that don’t render UIs. It supports bidirectional UI communication, security sandboxing, and backward compatibility with text-only clients.

How to use

You use an MCP client to connect to the server and access the interactive App UI. The server exposes a set of tools that your UI can call, and the UI can relay results back to the chat host. To start, run the server in HTTP mode and, if you want interactive UI locally, also run the test host that hosts the UI inside a sandboxed iframe.

How to install

Prerequisites: ensure you have Node.js installed on your machine. You also need npm to install dependencies and run scripts.

Install dependencies, build, and start the HTTP server and test host with these commands in sequence.

Additional notes

Configuration focuses on two modes: an HTTP MCP Server that runs locally and serves tools, and a stdio-based local server that can be launched for integration with clients that communicate over stdio. The HTTP server provides a URL you can point MCP clients to, while the stdio variant uses a local command to start the server process.

Key features include rendering interactive UI within chat clients, bidirectional communication between the UI and server tools, sandboxed UIs running in isolated iframes, and a fallback to text-only responses for non-UI-capable clients.

Examples and troubleshooting

If you see only text responses, verify that the MCP client supports UI rendering and that you are connected to the correct HTTP URL. If you want to test the interactive UI locally, ensure the test host is running and the UI iframe is loaded from a local sandboxed origin. Check console logs for any cross-origin or sandboxing errors and confirm the UI can call server tools and relay messages back to the chat host.

Available tools

get-tasks

Returns a list of tasks and renders the interactive UI for managing tasks.

add-task

Adds a new task to the list.

toggle-task

Marks a task as complete or incomplete.

delete-task

Removes a task from the list.