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

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)