MCP-UI + TanStack = Next Gen Web

Key Concepts

• MCP (Model Context Protocol): A protocol used to extend LLMs (Large Language Models) or AI to interact with the real world by providing them with tools.
• MCP UI: An extension to MCP that allows tools to return UI elements (HTML, JavaScript, iframes) instead of just text or JSON.
• UI Resources: The different ways MCP UI can output UI elements, including raw HTML, external URLs (iframes), and remote DOM.
• Streamable HTTP: A transport type for MCP that allows for streaming data over HTTP.
• Tanstack Start: A framework used in the video to demonstrate MCP UI implementation.
• Storm MCP: A service that simplifies the use of MCP over HTTP by providing integrations with various platforms and tools.
• Goose: A UI application for trying out MCP and chatting.
• MCP UI Inspector: A tool for inspecting and testing MCP UI implementations.
• Remote DOM: A more complex option for MCP UI that allows for more interactive UI elements.

MCP UI: The Future of LLM Interaction

The video introduces MCP UI as a crucial technology for the future of LLM interaction, emphasizing its importance in 2025 and 2026. It builds upon the existing MCP framework, which enables LLMs to use tools to perform actions in the real world. The key limitation of MCP was its restriction to text or JSON outputs. MCP UI overcomes this by allowing tools to return full UI elements, including HTML, JavaScript, and iframes.

Implementing MCP UI with Tanstack Start

The video demonstrates how to implement MCP UI using Tanstack Start. The example used is a "Tan Chat" application that recommends guitars. The goal is to enable a tool to return HTML that can be rendered directly within the application's UI.

Existing MCP Endpoint

The existing Tan Chat application already has an MCP endpoint that returns JSON data about guitars. This endpoint is created using the model-context-protocol SDK and registered with a get guitars tool. The endpoint is exposed using Tanstack Start's create server file route function.

MCP UI Inspector

The video uses a forked version of the MCP inspector specifically designed for MCP UI. This inspector allows you to connect to the MCP endpoint, list available tools, and run them to see their output. The inspector is connected using the "streamable HTTP" transport type.

Storm MCP: Simplifying MCP over HTTP

The video highlights Storm MCP as a service that simplifies the use of MCP over HTTP. Storm MCP provides integrations with various platforms and tools, such as Microsoft 365, Slack, Jira, and GitHub. It allows users to connect to these services, select the tools they want to use, and get a URL that can be used to access those tools. The video demonstrates how Storm MCP can be used with Claude and Cursor to automate tasks.

UI Resource Options

The video discusses the different options for returning UI elements with MCP UI, focusing on the create UI resource function. The main options are:

• Raw HTML: Allows tools to inject raw HTML into the client's page. This is considered insecure.
• External URL (Iframe): Wraps an external URL in an iframe, providing a secure way to render UI elements. The iframe isolates the content from the host page.
• Remote DOM: A more complex option that allows for more interactive UI elements. This option is not covered in detail in this video.

The video focuses on the iframe approach due to its security benefits.

Creating an Iframe-Based MCP UI Tool

The video demonstrates how to create an iframe-based MCP UI tool in the Tanstack Start application.

1. Create an Iframe Page: A new page is created in the routes directory to display the guitar information within an iframe. This page takes a guitar ID as a route parameter.
2. Implement the recommend guitar Tool: A new tool called recommend guitar is registered with the MCP server. This tool uses the create UI resource function to create an iframe that points to the newly created iframe page, passing the guitar ID as a parameter.
3. Test with MCP UI Inspector: The MCP UI inspector is used to test the recommend guitar tool. The tool returns an iframe that displays the guitar information.
4. Test with Goose: The Goose application is used to test the MCP UI integration in a chat context. The application is configured to use the MCP endpoint. When asked to recommend a guitar, the application invokes the recommend guitar tool and renders the iframe in the chat interface.

Conclusion

The video provides a practical introduction to MCP UI, demonstrating how it can be used to extend LLMs with UI capabilities. The iframe approach is presented as a secure and effective way to render UI elements within an application. The video also highlights the importance of Storm MCP for simplifying MCP over HTTP and the usefulness of the MCP UI inspector and Goose for testing and experimenting with MCP UI. The main takeaway is that MCP UI is a promising technology that will play a significant role in the future of LLM interaction.