MCP Elicitation and Apps Demo

Ein minimaler MCP-Server-Demo mit Elicitation- und MCP-Apps-Unterstützung für Webinar-Präsentationen.

Features

• Elicitation-Tool: book_appointment mit SQLite-Persistenz

• MCP-App: view_appointments mit interaktiver HTML-Benutzeroberfläche

• Tailwind CSS: Moderne, responsive Oberfläche

• Echtzeitdaten: Live-Terminstatistiken

• SQLite-Datenbank: Datenpersistenz und Beispieldaten

• HTTP-Transport: Endpunkt unter http://localhost:3000/mcp

Related MCP server: MCP Appointment Booking Server

MCP-Apps-Funktion

Diese Demo enthält jetzt MCP-Apps-Unterstützung mit:

• Interaktive HTML-Oberfläche, die in MCP-Hosts gerendert wird

• Tailwind CSS für modernes Styling

• Echtzeit-Visualisierung von Termindaten

• Statistik-Dashboard

• Vorgeladene Beispieldaten

Datenbankschema

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

Installation

# Install dependencies
npm install

# Build TypeScript
npm run build

Demo ausführen

Elicitation-Demo (Original)

# Start the original elicitation server
npm start

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

MCP-Apps-Demo (Neu)

# Start the MCP Apps server
npm run start:apps

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

Einfacher Test

So sieht der erwartete Ablauf aus:

npm run test

Webinar-Ablauf

1. Server starten: npm start

2. Einen MCP-Client mit http://localhost:3000/mcp verbinden

3. Fragen: „Einen Termin mit John buchen"

4. Elicitation fragt nach der Dauer: 30 / 60 / 90 Minuten

5. Wählen Sie 60

6. Öffnen Sie appointments.db in einer SQLite-GUI

7. Zeigen Sie die eingefügte Zeile mit John, 60 Minuten und Zeitstempel

Tool-Spezifikationen

Termin buchen (Elicitation-Demo)

Name: book_appointment

Ersteingabe:

{
  "person": "string"
}

Elicitation (wenn die Dauer fehlt):

• Nachricht: „Wie lange soll der Termin dauern?"

• Schema: Enum von 30, 60 oder 90 Minuten

Ergebnis: Fügt in SQLite ein und gibt eine Bestätigungsnachricht zurück.

Termine anzeigen (MCP-App)

Name: view_appointments

Eingabe: Keine erforderlich

Ergebnis: Öffnet eine interaktive HTML-Oberfläche mit:

• Liste aller Termine

• Statistik-Dashboard (Gesamtzahl der Termine, Gesamtdauer, durchschnittliche Dauer)

• Echtzeit-Datenaktualisierung

• Modernes Tailwind-CSS-Styling

MCP-App-Funktionen:

• Interaktive Benutzeroberfläche, die direkt in MCP-Hosts gerendert wird

• HTML-Inhalt, der über die MCP-Resources-API bereitgestellt wird

• Echtzeitdaten aus der SQLite-Datenbank

Codestruktur

Original-Demo

• src/server-simple.ts – Einfacher MCP-Server mit Elicitation-Logik

• src/db.ts – SQLite-Datenbankoperationen

• appointments.db – SQLite-Datenbankdatei (wird beim ersten Start erstellt)

MCP-Apps-Demo

• src/server-apps.ts – Erweiterter Server mit MCP-Apps-Unterstützung

• src/appointments-ui.html – Interaktive HTML-Oberfläche mit Tailwind CSS

• appointments.db – Gemeinsame SQLite-Datenbank mit Beispieldaten

Wichtige Implementierungspunkte

1. Tool startet – Empfängt den Parameter person

2. Elicitation – Erkennt fehlende duration_minutes, gibt inputRequired zurück

3. Fortsetzen – Nachdem der Benutzer die Dauer angegeben hat, wird der Vorgang abgeschlossen und in der DB gespeichert

Testen

Sie können beide Server mit jedem MCP-kompatiblen Client (Claude Desktop, VS Code mit MCP-Erweiterung usw.) testen, indem Sie sich mit http://localhost:3000/mcp verbinden.

Elicitation-Demo testen

1. Mit http://localhost:3000/mcp verbinden

2. book_appointment mit {"person": "John"} aufrufen

3. Der Server fragt per Elicitation nach der Dauer (30/60/90 Minuten)

4. Dauer angeben, um den Termin abzuschließen

MCP-Apps-Demo testen

1. Den MCP-Apps-Server starten: npm run start:apps

2. Mit http://localhost:3000/mcp verbinden

3. view_appointments aufrufen (keine Parameter erforderlich)

4. Der MCP-Host rendert die interaktive HTML-Oberfläche

5. Termine mit Statistiken und Echtzeitdaten erkunden

Anforderungen

• Node.js 18+

• SQLite-GUI (zum Anzeigen der Datenbank während der Demo)