MCP 引导与 MCP 应用演示

一个支持引导（Elicitation）和 MCP 应用（MCP Apps）的最小化 MCP 服务器演示，用于网络研讨会展示。

功能特性

• 引导工具：book_appointment，支持 SQLite 持久化

• MCP 应用：view_appointments，提供交互式 HTML 界面

• Tailwind CSS：现代、响应式界面

• 实时数据：实时预约统计

• SQLite 数据库：数据持久化与示例数据

• HTTP 传输：端点位于 http://localhost:3000/mcp

Related MCP server: MCP Appointment Booking Server

MCP 应用功能

本演示现已支持 MCP 应用，包括：

• 在 MCP 主机中渲染的交互式 HTML 界面

• 采用 Tailwind CSS 实现现代样式

• 实时预约数据可视化

• 统计仪表盘

• 预加载的示例数据

数据库结构

CREATE TABLE appointments (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  person TEXT NOT NULL,
  duration_minutes INTEGER NOT NULL,
  created_at TEXT NOT NULL
);

安装

# Install dependencies
npm install

# Build TypeScript
npm run build

运行演示

引导演示（原始版）

# Start the original elicitation server
npm start

# Or for development with auto-reload:
npm run dev

MCP 应用演示（新版）

# Start the MCP Apps server
npm run start:apps

# Or for development with auto-reload:
npm run dev:apps

简单测试

查看预期流程：

npm run test

网络研讨会流程

1. 启动服务器：npm start

2. 连接 MCP 客户端至 http://localhost:3000/mcp

3. 提问：“为 John 预约一个时间段”

4. 引导询问时长：30 / 60 / 90 分钟

5. 选择 60

6. 打开 appointments.db（使用 SQLite GUI）

7. 展示插入的记录，包含 John、60 分钟及时间戳

工具规格说明

预约工具（引导演示）

名称：book_appointment

初始输入：

{
  "person": "string"
}

引导（当缺少时长时）：

• 消息：“预约时长应为多少？”

• 模式：枚举值 30、60 或 90 分钟

结果：写入 SQLite 并返回确认消息。

查看预约（MCP 应用）

名称：view_appointments

输入：无需参数

结果：打开一个交互式 HTML 界面，包含：

• 所有预约列表

• 统计仪表盘（预约总数、总时长、平均时长）

• 实时数据刷新

• 现代 Tailwind CSS 样式

MCP 应用功能：

• 直接在 MCP 主机中渲染的交互式界面

• 通过 MCP 资源 API 提供 HTML 内容

• 来自 SQLite 数据库的实时数据

代码结构

原始演示

• src/server-simple.ts - 包含引导逻辑的简单 MCP 服务器

• src/db.ts - SQLite 数据库操作

• appointments.db - SQLite 数据库文件（首次运行时创建）

MCP 应用演示

• src/server-apps.ts - 支持 MCP 应用的扩展服务器

• src/appointments-ui.html - 使用 Tailwind CSS 的交互式 HTML 界面

• appointments.db - 包含示例数据的共享 SQLite 数据库

关键实现要点

1. 工具启动 - 接收 person 参数

2. 引导 - 检测缺少 duration_minutes，返回 inputRequired

3. 继续 - 用户提供时长后，完成操作并保存到数据库

测试

您可以使用任何兼容 MCP 的客户端（Claude Desktop、带 MCP 扩展的 VS Code 等）连接至 http://localhost:3000/mcp 来测试两个服务器。

测试引导演示

1. 连接至 http://localhost:3000/mcp

2. 调用 book_appointment，参数为 {"person": "John"}

3. 服务器将引导询问时长（30/60/90 分钟）

4. 提供时长以完成预约

测试 MCP 应用演示

1. 启动 MCP 应用服务器：npm run start:apps

2. 连接至 http://localhost:3000/mcp

3. 调用 view_appointments（无需参数）

4. MCP 主机将渲染交互式 HTML 界面

5. 浏览预约，查看统计和实时数据

环境要求

• Node.js 18+

• SQLite GUI（用于在演示过程中查看数据库）