Building Generative UI with MCP in React

Chat interfaces are everywhere, but text isn’t always the best response. Sometimes users need a comparison table, an interactive list or a form they can act on.

In this workshop, you’ll learn how to build interactive React interfaces that live inside AI conversations. We’ll use the Model Context Protocol (MCP) and its MCP Apps extension to connect tools, data and UI.

Together, we’ll build a small application that responds to user intent with different presentations. You’ll see how an AI model can interpret a request and choose an appropriate view, while React renders the components you’ve designed. We’ll then make those interfaces interactive, allowing users to refine results and continue the conversation through the UI.

The workshop follows a collaborative, mob-style format. We’ll build together using AI coding agents, discuss the decisions along the way and inspect the code they produce. You’ll have opportunities to experiment with the application and adapt it yourself.

You’ll learn how to:

• Understand the roles of MCP tools, resources and the host application.
• Connect an MCP tool to an interactive React interface.
• Use structured data to select and populate different views.
• Connect UI interactions back to tools and the conversation.
• Handle loading, errors and situations where an interactive UI is unavailable.
• Use AI coding agents to implement changes and evaluate the results.

This workshop is for developers who are comfortable with React and basic TypeScript. No prior experience with MCP or building AI applications is required.

Bring a laptop with your preferred editor. Setup instructions, the starter repository and any account requirements will be shared before the workshop.

You’ll leave with the workshop source code, checkpoint solutions and a practical understanding of how to bring your own React interfaces into conversational applications.