MCP Elicitation と Apps デモ

ウェビナー発表用の、Elicitation と MCP Apps をサポートする最小限の MCP サーバーデモです。

機能

• Elicitation ツール: SQLite 永続化を備えた book_appointment

• MCP App: インタラクティブな HTML UI を備えた view_appointments

• Tailwind CSS: モダンでレスポンシブなインターフェース

• リアルタイムデータ: ライブの予約統計

• SQLite データベース: データの永続化とサンプルデータ

• HTTP トランスポート: http://localhost:3000/mcp のエンドポイント

Related MCP server: MCP Appointment Booking Server

MCP Apps 機能

このデモには、以下の MCP Apps サポートが含まれています:

• 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

デモの実行

Elicitation デモ (オリジナル)

# Start the original elicitation server
npm start

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

MCP Apps デモ (新規)

# 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. Elicitation が所要時間を尋ねます: 30 / 60 / 90 分

5. 60 を選択

6. SQLite GUI で appointments.db を開く

7. John、60 分、タイムスタンプが挿入された行を表示

ツール仕様

予約の作成 (Elicitation デモ)

名前: book_appointment

初期入力:

{
  "person": "string"
}

Elicitation (所要時間が欠落している場合):

• メッセージ: 「予約の所要時間はどのくらいにしますか?」

• スキーマ: 30、60、または 90 分の列挙型

結果: SQLite に挿入し、確認メッセージを返します。

予約の表示 (MCP App)

名前: view_appointments

入力: 不要

結果: 以下の内容を含むインタラクティブな HTML インターフェースを開きます:

• すべての予約のリスト

• 統計ダッシュボード (予約総数、合計所要時間、平均所要時間)

• リアルタイムのデータ更新

• モダンな Tailwind CSS スタイリング

MCP App 機能:

• MCP ホストに直接レンダリングされるインタラクティブな UI

• MCP リソース API 経由で提供される HTML コンテンツ

• SQLite データベースからのリアルタイムデータ

コード構造

オリジナルデモ

• src/server-simple.ts - Elicitation ロジックを備えたシンプルな MCP サーバー

• src/db.ts - SQLite データベース操作

• appointments.db - SQLite データベースファイル (初回実行時に作成)

MCP Apps デモ

• src/server-apps.ts - MCP Apps サポートを備えた拡張サーバー

• src/appointments-ui.html - Tailwind CSS を使用したインタラクティブな HTML インターフェース

• appointments.db - サンプルデータを含む共有 SQLite データベース

主要な実装ポイント

1. ツールの開始 - person パラメータを受け取ります

2. Elicitation - 欠落している duration_minutes を検出し、inputRequired を返します

3. 続行 - ユーザーが所要時間を提供した後、操作を完了して DB に保存します

テスト

任意の MCP 互換クライアント (Claude Desktop、MCP 拡張機能付き VS Code など) を http://localhost:3000/mcp に接続することで、両方のサーバーをテストできます。

Elicitation デモのテスト

1. http://localhost:3000/mcp に接続

2. {"person": "John"} を指定して book_appointment を呼び出し

3. サーバーが所要時間 (30/60/90 分) を尋ねます

4. 所要時間を提供して予約を完了

MCP Apps デモのテスト

1. MCP Apps サーバーを起動: npm run start:apps

2. http://localhost:3000/mcp に接続

3. view_appointments を呼び出し (パラメータは不要)

4. MCP ホストがインタラクティブな HTML インターフェースをレンダリング

5. 統計とリアルタイムデータで予約を確認

要件

• Node.js 18+

• SQLite GUI (デモ中にデータベースを表示するため)