一个可视化沙盒,用于在方便的环境中测试MCP-UI组件和相互作用. 该项目演示了如何使用具有Netlify无服务器功能的Express构建MCP-UI启用应用程序.

□ 特性

• ** 反应 18 ** 有类型脚本
• ** 用于快速发展和建设的下一个js**
• ** 在Netlify上执行** 无服务器功能
• ** MCP-UI** 丰富的UI组件集成 -** 用于造型的Tailwind CSS**
• ** 互动演示** 用于天气、座位选择和UI动作

□这是沙盒?

这是一个可视化沙盒,用于测试MCP-UI组件和相互作用. 它提供了一个方便的环境:

• 测试MCP-UI客户端可以提供的UI组件
• 模拟工具呼叫和用户互动
• MCP服务器和UI客户端之间的调试消息
• MCP应用的原型新UI模式

沙盒运行在Netlify无服务器功能上,使得在不管理基础设施的情况下很容易部署和与他人共享.

□ 发展

· 先决条件

• 节点.js 18+
• pnpm(建议)或npm

QQ 设置

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