Day 5-6: MCP UI

    Enhance your MCP server responses with simple UI elements to help users have a better experience interacting with your server and viewing their information.

    Description

    Welcome to MCP UI 🪟! In this workshop, you'll dive into the world of the Model Context Protocol (MCP)—an open protocol designed to seamlessly connect AI models with external data sources and tools. MCP UI is a powerful extension to the spec that enables servers to send rich, interactive user interfaces along with their responses, transforming AI chat into visually engaging experiences.

    Throughout this workshop, you'll learn:

    • The core concepts of MCP UI and how it extends the MCP protocol
    • How to create raw HTML UI resources
    • How to create consistent UI with Remote DOM
    • How to build complex interactions with iframe-based UI components
    • How to implement interactive communication between iframes and the host using postMessage
    • Advanced features like structured tool results and passing initial render data

    Contents