MCP Apps: Connecting Your Data and UI to Claude and ChatGPT

MCP Apps extends the Model Context Protocol (MCP) by letting you render interactive UI and app features directly inside MCP clients like Claude, ChatGPT, VS Code, Goose, and more. In this course, you’ll learn how to build an MCP App from scratch. You’ll connect your own data, design UI elements that work in chat, and shape interaction patterns that feel natural for users. Along the way, you’ll explore view modes and how they appear in context, practice sending text, context, and UI updates to the client, and create interactive experiences that trigger client responses from UI actions. You’ll also use the MCPJam inspector to test and iterate quickly during development.

Learning objectives
Explain what MCP Apps are and how they extend MCP to render interactive UI in MCP clients.
Build an MCP App from scratch using templates and AI skills, integrating your data and UI components.
Implement two‑way interaction patterns where UI events send messages to the chat model and model outputs update the UI.
Compare view modes and predict how each will display and behave in a chat context across clients.
Test and debug MCP Apps with the MCPJam inspector to validate messages, context, and UI updates during development.