MCP-UI 服务

MCP-UI项目（当地）

此存储库演示了如何运行一个提供UI资源的MCP服务器和一个通过WebSocket连接的小型web客户端。

需求

• Node.js 18+和 npm
• 如果您使用CDN托管的web组件，则可以访问互联网

安装依赖项

从项目根：

npm install

运行MCP服务器（HTTP+WebSocket）

该项目包括 server.ts （TypeScript）。在本地运行它的最快方法是 tsx:

npx tsx server.ts

默认情况下，服务器侦听端口 8000:

• Web UI（服务 src/index.html): http://localhost:8000
• MCP的WebSocket端点：ws://localhost:8000

如果 npx tsx 不可用，请将其作为开发依赖项安装：

npm install -D tsx
npx tsx server.ts

运行客户端（Vite）

此仓库还包含Vite配置（用于开发）。使用Vite运行客户端：

npm run dev

Vite通常在 http://localhost:5173客户端在以下位置连接到MCP WebSocket ws://localhost:8000，因此请确保MCP服务器首先运行。

工作原理（简述）

• server.ts 创建MCP服务器并注册名为的工具 get_project_status当被调用时，它返回客户端可以呈现的UI资源（HTML）。
• src/index.html 是一个简单的web客户端，通过WebSocket连接到MCP服务器，并通过JSON-RPC消息调用该工具(method: "tools/call").
• UI组件来自 @mcp-ui/client 从CDN加载 src/index.html一个小 process 其中包含polyfill是为了避免浏览器中的“进程未定义”错误。

故障排除

• Uncaught ReferenceError: process is not defined

  • 在顶部添加一个微小的聚乙烯填充物 src/index.html。请确保在导入web组件之前运行polyfill脚本。

• Failed to resolve module specifier "@mcp-ui/client/..."

  • 客户端导入使用CDN（jsDelivr或unpkg）。如果您更喜欢离线使用，请安装 @mcp-ui/client 并在当地提供服务。

• TypeScript/节点类型错误（例如缺失 http, fs，或 @types/node):

  • 安装开发类型： npm install -D @types/node typescript.

下一步我可以帮忙

• 添加a start 脚本到 package.json 因此，您可以使用以下命令运行服务器 npm start.
• 如果要避免加载外部脚本，请用简单的HTML呈现器替换CDN web组件。
• 调试特定的控制台错误——粘贴日志或描述您看到的内容，我将帮助修复它们。

README更新于 d:\\code\\test\\mcp-ui-project\\README.md.