React UI服务器应用

一个基于React UI的MCP应用示例，支持工具注册、UI资源链接及主机通信API。

by khandrew1
TypeScript
本地部署
更新于 2026.02.11

在 GitHub 查看 khandrew1/mcp-app-testbench

使用说明

示例：基本服务器（React）

一个带有React UI的MCP应用程序示例。

[！提示] 您在寻找一个普通的JavaScript示例吗？看 basic-server-vanillajs!

概述

使用链接的UI资源进行工具注册
使用React UI useApp() 钩子
应用程序通信API： callServerTool, sendMessage, sendLog, openLink

关键文件

server.ts -带工具和资源注册的MCP服务器
src/mcp-app.html / src/mcp-app.tsx -使用React UI useApp() 钩子

入门指南

npm install
npm run dev

运作原理

服务器注册了一个 get-time 带有元数据的工具，将其链接到UI HTML资源(ui://get-time/mcp-app.html).
当调用该工具时，主机将从资源中呈现UI。
UI使用MCP App SDK API与主机和调用服务器工具进行通信。