Model Context Protocol Interactive Walkthrough

Follow a guided journey to see how hosts, clients, servers, and external context collaborate through MCP.

10-step animated flow Auto-play or manual pacing Keyboard friendly

Learning Objectives

  • Understand the four core MCP roles and their responsibilities.
  • Observe the sequence of messages exchanged during a request.
  • Connect each visual step to real-world AI assistant behavior.

How to Use This Demo

Advance at your own pace with Next Step, or let the flow play automatically. Hover over any component to revisit its purpose.

Primary Controls

  • Next Step: Advance one action at a time.
  • Auto Play: Watch the scenario end-to-end.
  • Reset: Return to the welcome view.

Keyboard Shortcuts

  • Space or → Next step
  • ← Previous step
  • P Play / pause
  • R Reset
1.5s
Step 0 of 10

Host Application

Where the user interacts with the AI assistant.

Example: VS Code, Claude Desktop

MCP Client

Implements the protocol and orchestrates requests.

Discovery Routing Security

MCP Server

Exposes tools, resources, and prompts the assistant can call.

Tools Resources Prompts

External Context

Where the real data and side effects live.

Examples: APIs, databases, file systems
User request
Protocol message
Tool execution
Data response

What Happens During This Step

Click "Next Step" or "Auto Play" to see how the Model Context Protocol routes a user request.