MCP玻璃盒演示
一个基于浏览器的交互式模拟，将 模型上下文协议（MCP） 实时建筑。在MCP主机引导、连接到服务器并协调工具调用时，逐步完成每个JSON-RPC消息、API调用和状态更改。
快速开始
打开 index.html 在任何现代浏览器中。就是这样——无需安装，无需构建步骤，也不需要服务器。
该文件从CDN加载React、Babel和Tailwind，因此您在首次加载时需要互联网连接。
你会看到什么
演示过程如下 4行为:
| 行动 | 标题 | 发生了什么 |
|---|---|---|
| 1 | 引导序列 | 主机读取配置，生成MCP客户端，通过stdio连接到服务器，运行初始化握手，发现工具 |
| 2 | 简单问题 | 用户提出一个问题，模型在没有工具的情况下回答——一个干净的基线 |
| 3 | 工具触发问题 | 触发问题 read_file --通过客户端、服务器和返回的完整MCP往返 |
| 4 | 链接的工具调用 | 两个工具、两个不同的服务器、三个API调用-完整视图中的主机编排循环 |
每个步骤显示：
- 架构图 --带有突出显示的组件和消息流数据包的动画SVG
- 聊天面板 --带打字指示器的克劳德风格对话UI
- 消息日志 -顺序中的每个JSON-RPC和API消息
- 有效载荷检查员 --带有语法突出显示和差异视图的完整JSON有效载荷
- 步骤旁白 --解释发生了什么以及为什么
控制
| 输入 | 操作 |
|---|---|
| 下一页/返回 按钮 | 前进或后退 |
| 播放 按钮 | 自动按步骤前进 |
| 箭头键 | 导航步骤 |
1 2 3 4 | 跳起来表演 |
P | 切换播放/暂停 |
Esc | 重置为开始 |
项目结构
index.html # Self-contained demo (open directly in browser)
prompts/ # Planning and architecture docs used to build the demo技术栈
- 反应18 --UI渲染（CDN）
- Babel独立 --浏览器内JSX转译（CDN）
- Tailwind CSS --实用程序样式（CDN）
- 零依赖 --没有npm，没有node_modules，没有bundler
免责声明
这是一个 教育演示 旨在从概念层面说明MCP的工作原理。所示的JSON有效负载、API消息和协议交换都是简化的表示，旨在教授流程和体系结构，而不是作为确切的协议参考。不要将特定的有效载荷内容视为权威规范。
许可证
麻省理工学院