MCP Elicitation and Apps Demo

A minimal MCP server demo with Elicitation and MCP Apps support for webinar presentations.

Features

• Elicitation Tool: book_appointment with SQLite persistence

• MCP App: view_appointments with interactive HTML UI

• Tailwind CSS: Modern, responsive interface

• Real-time Data: Live appointment statistics

• SQLite Database: Data persistence and sample data

• HTTP Transport: Endpoint at http://localhost:3000/mcp

Related MCP server: MCP Appointment Booking Server

MCP Apps Feature

This demo now includes MCP Apps support with:

• Interactive HTML interface rendered in MCP hosts

• Tailwind CSS for modern styling

• Real-time appointment data visualization

• Statistics dashboard

• Sample data pre-loaded

Database Schema

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

Running the Demo

Elicitation Demo (Original)

# Start the original elicitation server
npm start

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

MCP Apps Demo (New)

# Start the MCP Apps server
npm run start:apps

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

Simple Test

To see the expected flow:

npm run test

Webinar Flow

1. Start server: npm start

2. Connect an MCP client to http://localhost:3000/mcp

3. Ask: "Book an appointment with John"

4. Elicitation asks for duration: 30 / 60 / 90 minutes

5. Choose 60

6. Open appointments.db in a SQLite GUI

7. Show the inserted row with John, 60 minutes, and timestamp

Tool Specifications

Book Appointment (Elicitation Demo)

Name: book_appointment

Initial input:

{
  "person": "string"
}

Elicitation (when duration is missing):

• Message: "How long should the appointment be?"

• Schema: Enum of 30, 60, or 90 minutes

Result: Inserts into SQLite and returns confirmation message.

View Appointments (MCP App)

Name: view_appointments

Input: None required

Result: Opens an interactive HTML interface with:

• List of all appointments

• Statistics dashboard (total appointments, total duration, average duration)

• Real-time data refresh

• Modern Tailwind CSS styling

MCP App Features:

• Interactive UI rendered directly in MCP hosts

• HTML content served via MCP resources API

• Real-time data from SQLite database

Code Structure

Original Demo

• src/server-simple.ts - Simple MCP server with Elicitation logic

• src/db.ts - SQLite database operations

• appointments.db - SQLite database file (created on first run)

MCP Apps Demo

• src/server-apps.ts - Extended server with MCP Apps support

• src/appointments-ui.html - Interactive HTML interface with Tailwind CSS

• appointments.db - Shared SQLite database with sample data

Key Implementation Points

1. Tool starts - Receives person parameter

2. Elicitation - Detects missing duration_minutes, returns inputRequired

3. Continue - After user provides duration, completes operation and saves to DB

Testing

You can test both servers using any MCP-compatible client (Claude Desktop, VS Code with MCP extension, etc.) by connecting to http://localhost:3000/mcp.

Testing Elicitation Demo

1. Connect to http://localhost:3000/mcp

2. Call book_appointment with {"person": "John"}

3. Server will elicit for duration (30/60/90 minutes)

4. Provide duration to complete the appointment

Testing MCP Apps Demo

1. Start the MCP Apps server: npm run start:apps

2. Connect to http://localhost:3000/mcp

3. Call view_appointments (no parameters needed)

4. MCP host will render the interactive HTML interface

5. Explore appointments with statistics and real-time data

Requirements

• Node.js 18+

• SQLite GUI (for viewing the database during demo)