Skip to Content
View all events

Create Visual AI Agents with MCP Apps

Published by O'Reilly Media, Inc.

AI agent interactivity complete with UIs and custom resources

What you’ll learn and how you can apply it

  • Learn how to create MCP apps with interactive HTML-based user interfaces that render in AI host applications
  • Master custom URI resources in MCP, enabling seamless app discovery and orchestration patterns
  • Build a corporate app directory that serves as a centralized registry for internal MCP applications
  • Create a practical expense report MCP app with form submission, data validation, and interactive UI

Course description

Model Context Protocol (MCP) has revolutionized how AI agents connect to data sources and services, and this course focuses on how to open new paths of interactivity for AI agents. The new MCP Apps extension enables MCP servers to display their own user interfaces. In this course with Bruce Hopkins, you’ll learn how to leverage the new MCP Apps extension to create enterprise-grade applications that work together seamlessly through custom URI resources and agent-chaining techniques that were popularized by LangChain.

With the MCP Apps Extension, MCP agents can show buttons, scrollbars, images, maps, diagrams, and more, unlike chat-based AI agents. Additionally, MCP servers can now perform agent-chaining strategies using custom URIs for MCP resources. This opens the door to communication between MCP AI agents and to collaborative chain actions. By the end of this course, you’ll understand how to architect MCP Apps that scale across your organization, providing users with intuitive, AI-powered interfaces while maintaining security and interoperability.

This live event is for you because...

  • You’re a developer who needs to build AI agents that go beyond simple chatbots to perform real tasks.
  • You’re an AI engineer looking to streamline agent development and reduce time to production.
  • You’re a technical lead who’s evaluating platforms for building enterprise AI applications.
  • You’re familiar with ChatGPT/Claude but want to create custom agents that access your organization’s data.
  • You want to future-proof your skills as AI agents become integral to modern applications.

Prerequisites

  • An OpenAI API key
  • Python 3.9+ installed
  • Node.js 18+ installed
  • Basic programming experience in any major programming language like Python or JavaScript
  • Familiarity with HTTP APIs and JSON
  • Experience using ChatGPT, Claude, or other LLMs
  • An understanding of basic software development concepts (functions, variables, APIs)

Recommended preparation:

Schedule

The time frames are only estimates and may vary according to how the class is progressing.

Introduction to MCP Apps and the Apps extension (30 minutes)

  • Presentation: Overview of the MCP Apps extension and its role in the ecosystem; understanding UI resources, custom URIs, and the ui:// scheme; security considerations—iframe sandboxing, predeclared templates, and user consent

Setting up your development environment with uv and FastMCP (30 minutes)

  • Presentation: Installing and configuring uv for Python package management; why FastMCP is perfect for rapid MCP server development; creating your first FastMCP server with a simple UI resource; testing MCP apps locally with Claude Desktop
  • Demonstration: Hello World MCP App with interactive UI
  • Q&A
  • Break

Corporate app directory architecture and resources (45 minutes)

  • Presentation: Designing the app directory; understanding the hub-and-spoke pattern; creating the directory’s resource structure with custom URIs; implementing app registration and metadata management; building the directory’s HTML interface for displaying available apps
  • Hands-on exercise: Create the app directory MCP server skeleton

Corporate app directory tools and discovery (45 minutes)

  • Presentation: Implementing tools for app search and discovery; creating natural language handlers for “find me an app that does X”; generating custom URI responses that point to specific apps; testing app discovery flows
  • Hands-on exercise: Implement search and discovery tools
  • Q&A
  • Break

Building the expense report MCP app—data model and UI (45 minutes)

  • Presentation: Designing the expense report data structure; creating an interactive HTML form for expense submission; implementing the UI resource with proper MCP communication patterns; handling form validation and user input
  • Demonstration: Interactive expense form in action
  • Hands-on exercise: Build the expense report UI template

Building the expense report MCP app—tools and business logic (30 minutes)

  • Presentation: Implementing tools for expense creation, retrieval, and submission; adding receipt upload capabilities (simulated); creating approval workflows and status tracking; registering the expense app with the directory
  • Hands-on exercise: Complete the expense report app implementation Q&A
  • Break

Orchestration—connecting apps with custom URIs (45 minutes)

  • Presentation: Understanding the orchestration flow (directory → expense app); implementing custom URI generation in the directory; handling custom URI resolution in the host; creating seamless user experiences across app boundaries
  • Demonstration: Complete orchestration flow from discovery to app launch
  • Hands-on exercise: Test the full workflow end-to-end

Best practices and production considerations (20 minutes)

  • Presentation: Security best practices for MCP Apps in enterprise environments; error handling and fallback patterns for UI-incapable hosts; performance optimization—caching, prefetching, and lazy loading; deployment strategies for internal MCP app ecosystems

Wrap-up and Q&A (10 minutes)

Your Instructor

  • Bruce Hopkins

    Bruce Hopkins is a technical writer, an AI expert, an Intel Software Innovator for AI, and an Oracle Java Champion. He’s also the author of ChatGPT for Java and the coauthor of Beginning ChatGPT for Python.

    Xlinksearch

Skill covered

Web APIs