模型上下文协议演示工具

交互式MCP演示

用于学习模型上下文协议（MCP）的交互式可视化演示工具。专为希望了解人工智能应用程序如何通过标准化协议连接到外部工具和数据源的学生、教育工作者和开发人员而设计。

查看实时演示

概述

模型上下文协议（MCP）是一个开放标准，使人工智能应用程序能够安全地与外部数据源和工具连接。本项目提供了MCP架构的分步动画演练，说明了主机、客户端、服务器和外部上下文如何通过协议进行协作。演示引导用户完成一个完整的10步MCP交互序列，包括颜色编码组件、动画连接器和动态旁白。

特性

• 10步动画流程 遍历完整的MCP请求响应周期
• 自动播放和手动起搏 动画速度可调（0.5秒至3.0秒）
• 键盘快捷键 用于免提导航（箭头键、空格键、P键、R键）
• 侧边栏流量检查表 实时突出当前步骤
• 学习目标和讨论提示 为课堂提供便利
• 响应布局 适用于投影仪、台式机和移动设备
• 颜色编码架构图 带有动画SVG连接线

先决条件

• 现代网络浏览器（Chrome、Firefox、Safari或Edge）
• 无需构建工具、包管理器或服务器端依赖项

入门指南

安装

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

用法

打开 index.html 直接在您的浏览器中，或在本地提供：

python -m http.server 8000

然后访问 http://localhost:8000 在您的浏览器中。使用 下一步 按钮以继续浏览演练，或单击 自动播放 自动观看整个序列。

技术栈

许可证

该项目根据MIT许可证获得许可。看 许可证 文件以获取详细信息。