Building MCP Apps

This is the repository for the LinkedIn Learning course MCP Apps: Connecting Your Data and UI to Claude and ChatGPT. The full course is available from LinkedIn Learning.

Course Description

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.

See the readme file in the main branch for updated instructions and information.

How to use these exercise files

This repository contains a fully built MCP App to use as reference as you work through the course.

• ./MeetTheMonsters holds the MCP App
• ./MONSTERS holds the monster data and images used in the MCP App
• ./SPEC.md provides the specification for the MCP App to use with an AI coding agent
• ./.claude/skills/ contains official Agent Skills AI coding agents can use to build MCP Apps using the MCP Apps SDK

Instructions

Full instructions for how to run the MCP App are found in ./MeetTheMonsters/README.md.

Installing

These exercise files are designed to work in GitHub Codespaces, VS Code, and similar environments.

If using GitHub Codespaces, the setup is automatic and you can start working on the exercises right away.

If using VS Code or another environment, follow these instructions:

1. Make sure you have Node.js installed on your machine. You can download it from nodejs.org
2. Clone this repository into your local machine using the terminal (Mac), CMD (Windows), or a GUI tool like SourceTree
3. Install dependencies for the MCP App:
   • In terminal, navigate to the MeetTheMonsters folder
   • Run npm install to install the required dependencies