MCP-UI 부품 및 편리한 환경에서의 상호 작용을 테스트하기위한 시각화 샌드 박스. 이 프로젝트는 Netlify serverless 함수를 사용하여 MCP-UI 활성화 응용 프로그램을 구축하는 방법을 보여줍니다.

특징

-React 18 타입 스크립트

• **Next.js ** 빠른 개발 및 구축
• **Express ** Netlify의 서버가 없는 기능
• MCP-UI 풍부한 UI 컴포넌트 통합
• Tailwind CSS 스타일링 -Interactive demos 날씨, 좌석 선택 및 UI 동작

이 샌드박스는 무엇입니까?

이것은 MCP-UI 구성 요소 및 상호 작용을 테스트하는 가상화 sandbox입니다. 그것은 편리한 환경을 제공합니다:

• MCP-UI 클라이언트에 의해 렌더링 될 수있는 UI 구성 요소를 테스트
• 도구 호출 및 사용자 상호 작용
• MCP 서버와 UI 클라이언트를 통과하는 디버그 메시지
• MCP 응용 분야의 새로운 UI 패턴

sandbox는 ** Netlify serverless 기능**에서 실행되며 인프라를 관리하지 않고 다른 사람들과 쉽게 배포하고 공유할 수 있습니다.

개발

# 필수품

• 노드.js 18+
• pnpm (추천) 또는 npm

설정

1. 의존성 설치:

2. 개발 서버 시작:

3. 명세.

MCP-UI Demos

A visualization sandbox for testing MCP-UI components and interactions in a convenient environment. This project demonstrates how to build MCP-UI enabled applications using Express with Netlify serverless functions.

Features

• React 18 with TypeScript
• Next.js for fast development and building
• Express serverless functions on Netlify
• MCP-UI integration for rich UI components
• Tailwind CSS for styling
• Interactive demos for weather, seat selection, and UI actions

What is this Sandbox?

This is a visualization sandbox for testing MCP-UI components and interactions. It provides a convenient environment to:

• Test UI components that can be rendered by MCP-UI clients
• Simulate tool calls and user interactions
• Debug message passing between MCP servers and UI clients
• Prototype new UI patterns for MCP applications

The sandbox runs on Netlify serverless functions, making it easy to deploy and share with others without managing infrastructure.

Development

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm

Setup

1. Install dependencies:

   pnpm install
   

2. Start the development server:

   pnpm dev
   

3. Open your browser to http://localhost:3000

Building for Production

Build the React app:

pnpm build

The built files will be ready for deployment on Netlify.

Available Demos

Weather Demo (/get-weather)

Test the weather tool with real API calls to Open-Meteo. Demonstrates how to integrate external APIs with MCP-UI components.

Seat Selection (/pick-seat)

Interactive seat picker with visual feedback. Shows how to create complex interactive UI components that can be embedded in MCP clients.

UI Actions (/ui-actions)

Test different types of MCP-UI message actions including tool calls, prompts, links, intents, and notifications.

Toast Notifications (/toast-demo)

Demonstrate toast notification patterns for user feedback in MCP-UI applications.

MCP Integration

This project includes MCP (Model Context Protocol) integration through Express serverless functions, specifically designed for MCP-UI components.

Using as a Goose Extension

1. Add a custom extension
2. Give it a name
3. Select HTTP type
4. Add a description
5. Add this endpoint: https://mcp-aharvard.netlify.app/mcp
6. A timeout of 300 is fine
7. Save changes
8. Ask goose what’s the weather in your city (not all cities are supported)

Available Tool Calls

getWeather

Fetches real-time weather data from Open-Meteo API

• Parameters:
  • location: string (city name)
  • units: “metric” | “imperial”

SeatSelection

Interactive seat selection interface with visual feedback

• Features:
  • Visual seat grid
  • Real-time availability
  • Selection confirmation

UIActionCard

Demonstrates various MCP-UI message types