mcp-demo

This MCP Demo is a visual, interactive tutorial designed to help students and developers understand how the Model Context Protocol (MCP) enables AI applications to connect with external data sources and tools. The app walks through a complete 10-step MCP interaction sequence with animated components, color-coded architecture, and narrated explanations. Use the Next Step and Auto Play controls to navigate the sequence, and leverage the keyboard shortcuts (Arrow keys, Space, P, R) to move through steps or pause playback. The left/sidebar provides a real-time flow checklist to track progress and highlight the current stage of the interaction.

Prerequisites:

• A modern web browser (Chrome, Firefox, Safari, Edge)
• No build tools or server-side dependencies required for the demo itself

Installation steps:

1. Clone the repository:

   git clone https://github.com/danielcregg/mcp-demo.git
   cd mcp-demo
   

2. Open the demo locally by serving the index.html file, or simply open it in a browser from the repository:
   • Quick local server (optional):

     python -m http.server 8000
     

     Then visit http://localhost:8000
   • Or double-click index.html in your file explorer to load the static demo directly in the browser.
3. (Optional) If you want to view a live hosted demo, visit the online URL provided in the README: https://danielcregg.github.io/mcp-demo/

Usage is immediate once the page loads. Use the Next Step button to advance through the 10-step flow, or toggle Auto Play for automatic progression.

Notes and tips:

• This is a frontend-only demonstration with no backend MCP server. It focuses on explaining the MCP flow visually rather than performing real API calls.
• There are keyboard shortcuts for navigation and a color-coded architecture diagram to help learners identify components quickly.
• If the demo doesn’t load properly, try clearing the browser cache or opening the page in an incognito/private window.
• The documentation highlights learning objectives and discussion prompts to facilitate classroom or workshop use.
• Since there is no runtime server, environment variables or backend configuration are not required for this demo.