Песочница визуализации для тестирования компонентов MCP-UI и взаимодействий в удобной среде. Этот проект демонстрирует, как создавать приложения с поддержкой MCP-UI с использованием функций Express и Netlify без сервера.

Особенности

** Реакция 18** с помощью TypeScript Next.js для быстрого развития и строительства Express бессерверные функции в Netlify MCP-UI интеграция с богатыми компонентами пользовательского интерфейса Tailwind CSS для стилизации ** Интерактивные демонстрации** для погоды, выбора места и действий пользовательского интерфейса

##Что это за песочница?

Это песочница для визуализации для тестирования компонентов MCP-UI и взаимодействий. Он обеспечивает удобную среду для:

Тестирование компонентов пользовательского интерфейса, которые могут быть выполнены клиентами MCP-UI Моделирование вызовов инструментов и взаимодействия с пользователем

• Отладочное сообщение между MCP-серверами и UI-клиентами Прототип новых шаблонов пользовательского интерфейса для MCP-приложений

Песочница работает на бессерверных функциях 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