MCP-UIコンポーネントと便利な環境での相互作用をテストするための可視化サンドボックス。 このプロジェクトでは、Netlify のサーバーレス関数で Express を使用して MCP-UI を有効にしたアプリケーションを構築する方法を説明します。

##特徴

• TypeScriptでReact 18
• Next.js 高速開発と建物
• Netlifyの Express**サーバーレス機能 -MCP-UI 豊富なUIコンポーネントの統合
• スタイリング用のTailwind CSS
• 天候、座席選択およびUIの行為のための相互活動的なデモ

このサンドボックスとは何ですか?

MCP-UIコンポーネントとインタラクションをテストするためのvisualization sandboxです。 それは便利な環境にににに提供します:

• MCP-UI クライアントがレンダリングできる UI コンポーネントのテスト
• ツール呼び出しとユーザーインタラクションをシミュレートする
• MCP サーバーと UI クライアント間で渡るメッセージのデバッグ
• MCP アプリケーション用の新しいUIパターンのプロトタイプ

sandbox は、Netlify サーバレス関数 上で実行され、インフラストラクチャの管理なしで他のユーザーと簡単にデプロイして共有することができます。

開発

前提条件

• Node.js 18 +
• pnpm(推奨)またはnpm

セットアップ

1. 依存関係を取付けて下さい:

2. 開発サーバーを始めて下さい:

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