# 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

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

## Installation

```bash
# Install dependencies
npm install

# Build TypeScript
npm run build
```

## Running the Demo

### Elicitation Demo (Original)
```bash
# Start the original elicitation server
npm start

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

### MCP Apps Demo (New)
```bash
# 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:

```bash
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**:
```json
{
  "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)