使用说明

模型上下文协议+工具渲染UI文档审阅助手

一个最小的文档审查人工智能助手，带有交互式浏览器内编辑器和LLM驱动的审查工具，其中 UI由AI工具在运行时通过MCP生成.

MCP工具返回完全交互式的UI组件（HTML/CSS/JS），而不是传统的前端渲染后端数据。虽然前端是一个薄的静态外壳， 交互式UI组件由MCP工具交付，并动态插入用户界面。

在实践方面，该项目提供了一个轻量级、最小化、交互式的文档审阅器，可以 管理现场修改 和 核实事实 使用实时网络搜索和语义重排序。
在技术方面，它是使用 模型上下文协议（MCP） 和 UI资源组件. 它突出了 MCP服务器端逻辑与动态WebUI渲染的无缝集成，其中服务器提供用户直接在浏览器中实时与文档交互所需的代理工具和沙盒接口（UIResource）。

这不是一个经典的REST后端。相反，它使用：

MCP工具作为可调用函数
直接从MCP工具返回的UI资源
转换浏览器RPC的桥梁→ MCP工具调用

在该系统中：

用户选择文档文本
该模型调用了一个审查工具
MCP服务器返回实时审核卡小部件
UI会立即注入它
用户可以应用编辑、保存或下载

该模型不仅仅生成文本-- 它生成接口。

这演示了一个工具渲染的UI模式，其中服务器定义交互组件，模型动态编排界面组合。

堆栈摘要：

MCP工具协议
UI资源渲染
工具驱动的UI生成
LLM工具调用循环
桥梁建筑
交互式文档编辑器

🌟 特性

交互式用户界面：一个支持突出显示和编辑的丰富的基于网络的文档查看器。
机构评审：选择文本，让人工智能（Gemini）执行用户请求的修改，并使用网络搜索检查事实错误。
事实核查管道：集成 语言搜索 对于deep web搜索和 语义重新排序 为法学硕士提供高质量、相关的背景。
全栈MCP：展示了一个完整的架构，其中MCP服务器提供动态服务 UI资源 组件。这 基于iframe的Web用户界面 为文档交互提供了一个沙盒环境，允许服务器将自定义工具和接口直接注入客户端，同时保持文档查看器和主机应用程序逻辑之间的干净分离。

✨ 用户体验

此应用程序将静态文档转换为交互式、人工智能增强的工作空间。

您可以做什么：

浏览和查看：打开并读取本地文件(.docx, .md, .txt, .py)通过干净、现代的网络界面。
智能选择：突出显示您要验证、扩展或事实检查的任何文本。
一键式研究：触发一个自主代理，该代理搜索网络、重新排序来源并实时验证声明。
直接编辑：只需单击一下，即可查看人工智能生成的建议并将其应用于您的文档。

🔍 事实核查工作流程

选择文本：突出显示文档中的任何文本。
审查：请AI审阅所选文本。
能动循环:
- 服务器接收文本。
- 人工智能能够检测到事实性的主张。
- AI呼叫 web_search("...").
- 语言搜索 返回结果-> 重排序器 对它们进行排序-> 过滤器 提取片段。
- 人工智能比较事实并生成建议。
编辑并应用：查看AI的建议，必要时进行手动编辑，然后单击“应用”更新文档。

📄 支持的文件和位置

该应用程序适用于基于文本的文档和Word文件。

支持的格式: .docx, .pptx, .txt, .md, .py, .json
默认位置：默认情况下，应用程序会列出以下文件 docs/ 项目根目录中的文件夹。
手动选择：您可以使用 “浏览…” 用户界面中的按钮，用于从系统上的任何绝对路径加载文件。

🏗️ 建筑

该系统由三个主要层组成，它们协同工作(MCP-UI服务器、客户端和前端UI):

flowchart TD
    %% Client-side components
    User["User / Browser"] <-->|HTTP / WebSocket| HostUI["Host UI (host.html)"]
    HostUI <-->|postMessage| ViewerUI["Viewer UI (iframe / viewer.html)"]
    
    %% Bridge between client and server
    HostUI <-->|HTTP RPC| ClientBridge["Client Bridge (client.py)"]
    
    %% Server-side components
    ClientBridge <-->|Stdio / MCP| MCPServer["MCP Server (server.py)"]
    
    %% External services
    MCPServer <-->|External API| LangSearch["LangSearch API"]
    MCPServer <-->|External API| Gemini["Gemini LLM"]

MCP-UI架构

Browser UI (host.html + viewer.html) - Frontend UI Layer
        ↓
HTTP Bridge (client.py) - Bridge Layer
        ↓
MCP Tool Server (server.py with FastMCP)
        ↓
LLM + Tools (Gemini + Web Search + File handlers)

系统流程

Browser selection
→ POST /rpc review_selection
→ client.py queue
→ MCP tool call
→ Gemini + optional web_search
→ JSON comment + suggestion
→ browser displays inline feedback

典型用户工作流程：

User selects text → AI tool called → MCP returns Review Card widget →
UI injects editable suggestion → user applies change → save tool invoked

1.MCP服务器(`server/server.py`)

内置于 mcp.server.fastmcp 和 mcp-ui SDK。
工具:
- get_document_ui：读取文件并返回 UIResource （HTML内容），通过客户端桥传递到主机UI，并在查看器UI iframe中呈现。
- web_search：执行搜索+重新排序+过滤。
- review_selection：编排代理循环（LLM+搜索）。
- save_file：将更改持久化到磁盘。
- download_document：下载文档。
- upload_document：上载文档。
模板：用途 server/assets/viewer.html 作为文档视图的模板。

2.客户桥(`client/client.py`)

自定义Python MCP客户端。
角色：将Web UI连接到基于Stdio的MCP服务器。
功能:
- 托管本地web服务器（端口8081）。
- 将MCP服务器作为子进程生成(uv run server.py).
- 暴露一个 /rpc 端点，允许浏览器调用特定的MCP工具。
  - 这篇文章 /rpc 端点从主机UI接收工具调用，将请求推入队列，通过Future等待MCP结果，向浏览器返回JSON响应。
    
    queue → call MCP tool → return result → resolve Future → HTTP response
因此，浏览器从不直接与MCP通信，只能通过这座桥。

3.前端用户界面(`host.html` & `viewer.html`)

主机用户界面：“Shell”应用程序。它列出文件并管理主窗口。
查看器UI：一个沙盒环境（iframe），用于呈现 UIResource （HTML/JS）由MCP服务器提供服务。它捕获用户交互，如文本选择，并将其传达给 主机用户界面 通过 window.postMessage这允许主机UI充当桥梁，将UI事件转发到 MCP服务器 （通过客户端桥）触发工具执行或状态更新，而服务器通过同一链将更新的UI发送回来。

host.html 充当主shell UI：

侧边栏布局
加载资产
允许用户：
- 上传文件
- 选择文件
- 打开文档查看器
通过POST/rpc发送工具调用

viewer.html 是交互式文档查看器/编辑器模板。服务器注入｛｛DOCUMENT_CONTENT｝｝和｛｛FILEPATH｝｝。这不仅仅是一个显示界面，它还是一个交互式编辑界面。

特征：

样式化文档视图
可编辑内容
文本选择
查看所选文本
“保存”按钮→ 调用MCP工具save_file
下载按钮→ 调用download_document
审核选择→ 通话回顾_选择

💡 MCP-UI实施细节

该项目展示了构建丰富MCP接口的强大模式： 通过UI资源进行前端-后端桥接.

“UIResource”模式

与其像大多数MCP工具那样只返回文本 get_document_ui 工具返回a UIResource这允许服务器指定接口用户看到。

# server.py
@mcp.tool()
def get_document_ui(filepath: str) -> List[UIResource]:
    # ... read file ...
    # ... inject into viewer.html template ...
    return [create_ui_resource({
        "uri": f"ui://viewer/{filename}",
        "content": {"type": "rawHtml", "htmlString": html}, # The full HTML app
        # ...
    })]

这使得：

MCP tool → returns UI → rendered in client

这是一个核心的MCP UI模式。

Iframe大桥

为了使UI具有交互性（例如，单击UI中的按钮会调用Python工具），我们使用 postMessage 桥梁：

查看器（iframe）：用户点击“查看”。

// viewer.html
window.parent.postMessage({
    type: 'mcp-tool-call',
    tool: 'review_selection',
    params: { text: "...", context: "..." }
}, '*');

主持人（家长）：监听消息并调用后端。

// host.html
window.addEventListener('message', async (event) => {
    if (event.data.type === 'mcp-tool-call') {
        // Call Python client bridge via HTTP
        const result = await callTool(event.data.tool, event.data.params);
        // Send result back to iframe
        frame.contentWindow.postMessage({ type: 'tool-response', ... }, '*');
    }
});

客户端（Python）：将请求代理到MCP服务器。

# client.py
# Receives POST /rpc -> calls session.call_tool() -> Returns result

📂 项目结构

interactive-doc-mcp/
├── client/
│   ├── assets/
│   │   └── host.html       # The main "Shell" UI
│   └── client.py           # The MCP Client Bridge
├── server/
│   ├── assets/
│   │   └── viewer.html     # The interactive document template
│   ├── .env                # API keys and configuration
│   └── server.py           # The MCP Server logic
├── docs/                   # Default folder for documents
├── requirements.txt        # Shared dependencies
└── README.md

🚀 设置和使用

先决条件

Python 3.10+
uv （包管理器）
API密钥：
- GOOGLE_API_键：双子座法学硕士。
- 语言搜索_API_KEY：用于搜索和重新排名。

安装

克隆仓库。
安装依赖项（客户端和服务器共享）：
```
uv pip install -r requirements.txt
```
创建 .env 归档 server/ 用你的钥匙。

运行应用程序

从根目录运行客户端网桥。这将自动启动服务器。

uv run client/client.py

应用程序将在默认浏览器中打开 http://localhost:8080.

使用说明

模型上下文协议+工具渲染UI文档审阅助手

🌟 特性

✨ 用户体验

您可以做什么：

🔍 事实核查工作流程

📄 支持的文件和位置

🏗️ 建筑

MCP-UI架构

系统流程

典型用户工作流程：

1.MCP服务器(server/server.py)

2.客户桥(client/client.py)

3.前端用户界面(host.html & viewer.html)

💡 MCP-UI实施细节

“UIResource”模式

Iframe大桥

📂 项目结构

🚀 设置和使用

先决条件

安装

运行应用程序

相关 MCP

DuckDuckGo 搜索 MCP 服务器

图表生成MCP服务器

AI开发助手

必应中文搜索MCP服务器

PostgreSQL管理服务器

网页内容获取工具

1.MCP服务器(`server/server.py`)

2.客户桥(`client/client.py`)

3.前端用户界面(`host.html` & `viewer.html`)