MCP Elicitation 및 Apps 데모

웨비나 발표를 위한 Elicitation 및 MCP Apps 지원이 포함된 최소 MCP 서버 데모입니다.

기능

• Elicitation 도구: SQLite 영속성을 갖춘 book_appointment

• MCP 앱: 대화형 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분의 Enum

결과: SQLite에 삽입하고 확인 메시지를 반환합니다.

예약 보기 (MCP 앱)

이름: view_appointments

입력: 필요 없음

결과: 다음을 포함한 대화형 HTML 인터페이스를 엽니다:

• 전체 예약 목록

• 통계 대시보드 (총 예약 수, 총 기간, 평균 기간)

• 실시간 데이터 새로고침

• 현대적인 Tailwind CSS 스타일링

MCP 앱 기능:

• 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분)을 elicitation으로 요청

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 (데모 중 데이터베이스 확인용)