MCP显示器
支持HTTP传输的本地MCP（模型上下文协议）服务器，为MCP客户端提供在web浏览器界面中显示文本、图像和SVG内容的工具。
此存储库已停止使用，取而代之的是另一个版本 这里
目录
安装
先决条件
- Node.js 20.19.0或更高版本
- npm（附带Node.js）
- 现代网络浏览器（Chrome、Firefox、Safari、Edge）
步骤
- 克隆存储库
git clone
cd mcp-display- 安装依赖项
npm install- 安装Playwright浏览器进行测试（可选）
npm run test:install配置
环境变量
应用程序支持以下环境变量：
PORT：服务器端口（默认值：8080）NODE_ENV：环境模式（开发/生产）
服务器配置
服务器配置为：
- 默认情况下在端口8080上运行
- 接受来自任何来源的HTTP请求（启用CORS）
- 处理高达50MB的JSON有效载荷（适用于大型base64图像）
- 从提供静态文件
dist目录 - 提供WebSocket连接以实现实时更新
软件结构
mcp-display/
├── src/
│ ├── server/
│ │ └── index.js # Main MCP server with HTTP transport
│ └── client/
│ ├── index.html # Main HTML file
│ ├── main.js # Vue app entry point
│ └── App.vue # Main Vue component
├── tests/
│ ├── api/
│ │ └── mcp-server.test.js # Jest API tests
│ └── e2e/
│ └── app.spec.js # Playwright E2E tests
├── dist/ # Built frontend (generated)
├── package.json # Dependencies and scripts
├── vite.config.js # Vite configuration
├── jest.config.js # Jest configuration
├── playwright.config.js # Playwright configuration
└── README.md # This file架构概述
该应用程序遵循客户端-服务器架构：
服务器（Node.js）
- MCP服务器：使用HTTP传输实现模型上下文协议
- API快车：为web界面提供REST端点
- WebSocket服务器：启用与浏览器的实时通信
- 工具操作员：流程
display_text,display_image，以及display_svgMCP工具调用
客户端（Vue 3）
- 视图3组成API：现代反应式前端框架
- 单页应用程序：采用Vite打造，快速发展
- WebSocket客户端：从服务器接收实时更新
- 响应式设计：适用于台式机和移动设备
关键组件
MCP服务器(src/server/index.js)
- MCPDisplayServer类：管理所有功能的主服务器类
- 快速安装：具有CORS、JSON解析和静态文件服务的HTTP服务器
- WebSocket设置：与浏览器客户端实时通信
- MCP工具注册：实施
display_text,display_image，以及display_svg工具 - 连接日志记录：跟踪所有MCP客户端交互
Vue前端(src/client/App.vue)
- 显示区域：显示来自MCP客户端的文本或图像内容
- 侧边栏：带有时间戳和预览的连接日志
- 清除按钮：允许手动清除显示的内容
- WebSocket集成：从服务器接收实时更新
- 响应布局：适应不同的屏幕尺寸
用法
启动服务器
开发模式
npm run dev这将以热重新加载的方式在开发模式下启动服务器和客户端。
生产模式
npm run build
npm start访问界面
- 打开浏览器并导航到
http://localhost:3000 - 您将看到MCP显示界面：
- 主显示区域（最初为空） - 带有连接日志的侧栏 - 清除按钮重置显示
使用MCP工具
服务器提供了三个客户端可以使用的MCP工具：
display_text
在浏览器中显示文本内容。
参数：
text（string，必填）：要显示的文本
MCP请求示例：
{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/call",
"params": {
"name": "display_text",
"arguments": {
"text": "Hello, World!\nThis is a multi-line text display."
}
}
}显示图像
在浏览器中显示base64编码的图像。
参数：
imageData（字符串，必填）：Base64编码图像数据mimeType（字符串，可选）：图像的MIME类型（默认值：“image/png”）
MCP请求示例：
{
"jsonrpc": "2.0",
"id": 2,
"method": "tools/call",
"params": {
"name": "display_image",
"arguments": {
"imageData": "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==",
"mimeType": "image/png"
}
}
}显示器_svg
在浏览器中显示SVG图形。
参数：
svgData（字符串，必填）：SVG标记数据title（字符串，可选）：SVG的可选标题
MCP请求示例：
{
"jsonrpc": "2.0",
"id": 3,
"method": "tools/call",
"params": {
"name": "display_svg",
"arguments": {
"svgData": "",
"title": "Blue Circle"
}
}
}演示脚本
该项目包括一个演示脚本，展示了所有三种显示功能：
./demo.sh此脚本将：
- 继续之前检查服务器运行状况
- 清除所有现有内容
- 显示带格式的示例文本内容
- 显示带有渐变和形状的彩色SVG图形
- 显示公共目录中的睡莲图像
- 添加包含技术细节的完成消息
演示脚本是测试所有功能并查看不同内容类型的好方法。
MCP客户端集成
要将此服务器与MCP客户端一起使用，请将客户端配置为连接到：
- HTTP端点:
http://localhost:3000/mcp（代理到MCP服务器） - 运输：JSON-RPC 2.0格式的HTTP POST请求
测试
该项目包括单元/集成测试（Jest）和端到端测试（Playwright）的全面测试。
运行测试
API测试（Jest）
npm test测试服务器功能、API端点和MCP工具验证。
端到端测试（剧作家）
npm run test:e2e测试完整的应用程序流程，包括UI交互和WebSocket通信。
安装Playwright浏览器
npm run test:install测试覆盖率
API测试(tests/api/mcp-server.test.js)
- API端点验证
- MCP工具功能（文本、图像和SVG）
- WebSocket连接处理
- 错误处理
E2E测试(tests/e2e/app.spec.js)
- UI组件渲染
- 内容显示（文本、图像和SVG）
- 连接日志功能
- WebSocket通信
- 错误处理和恢复
- 响应式设计
GET/api/内容
返回当前显示的内容。
答复：
{
"content": [
{
"id": "uuid",
"type": "text|image|svg",
"data": "content data",
"timestamp": "2024-01-01T00:00:00.000Z",
"mimeType": "image/png", // only for images
"title": "Optional title" // only for SVG
}
]
}GET/api/连接
返回连接日志。
答复：
{
"connections": [
{
"id": "uuid",
"timestamp": "2024-01-01T00:00:00.000Z",
"tool": "display_text|display_image|display_svg",
"preview": "content preview"
}
]
}发展
脚本
npm run dev：通过热重新加载启动开发服务器npm run server:dev：仅在开发模式下启动服务器npm run client:dev：仅启动客户端开发服务器npm run build：构建生产版本npm run preview：预览生产版本npm test：运行Jest测试npm run test:e2e：运行Playwright E2E测试
开发设置
- 安装依赖项:
npm install - 启动开发服务器:
npm run dev - 打开浏览器：导航到
http://localhost:3000（所有服务都通过此端口代理）
代码结构指南
- 服务器代码：纯JavaScript（无TypeScript）遵循Node.js最佳实践
- 客户端代码：Vue 3组合API，带有单文件组件
- 样式：采用现代设计原则的CSS
- 测试：用于单元测试的小丑，用于E2E测试的剧作家
- 代码风格：可读和可维护的代码优于性能优化
api参考
REST端点
GET/api/健康
返回服务器运行状况和统计信息。
答复：
{
"status": "healthy",
"uptime": "123s",
"timestamp": "2024-01-01T00:00:00.000Z",
"version": "1.0.0",
"server": "mcp-display-server",
"stats": {
"contentItems": 5,
"connections": 10,
"websocketClients": 2
}
}GET/api/内容
返回当前显示的内容。
答复：
{
"content": [
{
"id": "uuid",
"type": "text|image|svg",
"data": "content data",
"timestamp": "2024-01-01T00:00:00.000Z",
"mimeType": "image/png", // only for images
"title": "Optional title" // only for SVG
}
]
}GET/api/连接
返回连接日志。
答复：
{
"connections": [
{
"id": "uuid",
"timestamp": "2024-01-01T00:00:00.000Z",
"tool": "display_text|display_image|display_svg",
"preview": "content preview"
}
]
}POST/api/clear
清除显示的内容。
答复：
{
"success": true
}POST/mcp
用于工具调用的MCP HTTP传输端点。
请求： 标准JSON-RPC 2.0 MCP请求 答复： 标准JSON-RPC 2.0 MCP响应
WebSocket事件
客户端→ 服务器
- 连接建立（自动）
服务器→ 客户端
content：要显示的新内容connection：新连接日志条目clear：清除显示命令
MCP工具
display_text
- 名字:
display_text - 描述：在浏览器中显示文本内容
- 输入:
{ text: string } - 输出：通过预览确认成功
显示图像
- 名字:
display_image - 描述：在浏览器中显示base64编码的图像
- 输入:
{ imageData: string, mimeType?: string } - 输出：使用MIME类型确认成功
显示器_svg
- 名字:
display_svg - 描述：在浏览器中显示SVG图形
- 输入:
{ svgData: string, title?: string } - 输出：SVG预览成功确认
许可证
MIT许可证-有关详细信息，请参阅许可证文件。
支持
有关问题、疑问或贡献，请参阅项目的问题跟踪器或文档。