用户界面工具——给你的人工智能一个美丽的窗口

用于打开webview窗口的桌面MCP服务器，以便AI可以与用户进行丰富的交流

立即创建任何界面。 完全支持HTML/CSS/JavaScript双向通信。工作在任何地方，总是。

![License](LICENSE) ![Python](https://www.python.org/) ![Platform](https://github.com/AuraFriday/mcp-link-server)

______________________________________________________________________

益处

1.🎨 立即创建任何界面

完全支持HTML/CSS/JavaScript意味着 无限的UI可能性 没有预先构建的组件。从简单的确认到复杂的多步骤向导——如果你能用HTML构建它，你的人工智能就可以向用户展示它。

2.🌍 随时随地工作

跨平台Qt WebEngine，具有久经考验的线程安全队列通信。Windows、Mac、Linux——一个工具，零平台特定代码，每次都能完美渲染。

3.🛡️ 智能安全

自动调整大小消除了滚动条的猜测。超时保护防止挂起对话框。HMAC令牌安全确保正确使用。优雅的错误处理和详细的诊断。

______________________________________________________________________

为什么这个工具是无与伦比的

大多数AI工具无法向用户显示任何内容。 它们仅限于聊天窗口中的文本回复。这个工具完全打破了这一限制。

其他UI框架需要预构建的组件。 想要自定义表单吗？在他们的框架中构建它，学习他们的API，克服他们的局限性。这个工具？只需编写HTML。

特定于平台的UI是一场噩梦。 为Windows写一次，为Mac重写，为Linux重写一次。该工具通过Qt WebEngine在任何地方都呈现相同的效果。

秘方： MCP工具和Qt主线程之间的线程安全队列通信。没有比赛条件，没有僵局，没有撞车。每次都有可靠、美观的界面。

______________________________________________________________________

获取MCP链接（免费）

此工具依赖于MCP链路服务器 --将AI连接到计算机的免费桌面服务器。

🎁 完全免费 •无订阅•无账户•无信用卡\ 🖥️ 一键安装 •Windows、Mac、Linux•只需下载并运行\ 🔗 适用于一切 •ChatGPT、Claude、Cursor、VSCode、本地模型

因为webview控件需要复杂的事件和线程管理，所以此工具需要mcp链接中的服务器环境才能运行——它不可能独立运行（抱歉！）

立即下载

从获取MCP链接 aurafriday.com

用户界面工具（以及数十个其他功能强大的工具）会自动包含在内。安装一次，随处使用。

______________________________________________________________________

现实世界故事：API关键问题

在该工具存在之前：

AI：“我需要你的OpenAI API密钥才能继续。”\ 用户： *复制密钥，粘贴聊天*\ AI：“谢谢！现在我把它保存到……等等，我无法访问你的文件系统。”\ 用户： *手动编辑配置文件*\ AI：“好的，再试一次。”\ 用户： *重新启动一切*

使用此工具：

AI：“我需要你的OpenAI API密钥。”\ *出现带有密码字段、验证和直接保存到配置的漂亮对话框*\ 用户： *输入键，单击保存*\ AI：“明白了！继续……”

一个命令。一个对话框。完成。 人工智能收集密钥，对其进行验证，通过服务器的设置API将其保存到配置文件中，然后继续-所有这些都不需要用户离开他们的工作流程。

______________________________________________________________________

完整的功能集

核心业务

`show_popup` --非模态窗户

显示信息而不阻止其他应用程序。非常适合通知、进度显示或不需要立即采取行动的信息内容。

`show_dialog` --模态对话框

阻止交互，直到用户响应。对于关键决策、所需输入或必须确认的确认至关重要。

`collect_api_key` -内置API密钥集合

专业的、随时可用的接口，用于收集API密钥，具有：

带验证的密码字段
与服务器设置API直接集成
自动配置文件持久化
密钥获取的服务URL链接
美观、值得信赖的设计

`readme` --自我记录

每个操作都包括完整的文档和示例。AI代理始终可以访问有关如何使用该工具的最新准确信息。

高级窗口管理

定位和行为：

center_on_screen --自动以用户显示器为中心
always_on_top --保持在所有其他窗口之上（在所有平台上都是可靠的）
bring_to_front --强制到前台（由于操作系统限制，在Windows上尽最大努力）
modal --阻止与其他窗口的交互，直到关闭
resizable --允许用户调整窗口大小

智能尺寸：

auto_resize --通过JavaScript测量自动完美匹配内容
精确的铬计算：+16px宽，+39px高
两阶段调整大小以避免滚动条引起的布局级联
基于内容类型的智能默认大小

定时与控制：

timeout --指定秒后自动关闭（0=无超时）
wait_for_response -通知的即发即弃模式
优雅的超时处理，错误信息清晰

JavaScript桥——双向通信

您的HTML可以将数据发送回AI：

// Success with data
window.userResponse = {
  "status": "success", 
  "data": {"api_key": "sk-1234...", "username": "john"}
};
window.close();

// Cancellation
window.userResponse = {"status": "cancelled", "message": "User declined"};
window.close();

// Error
window.userResponse = {"status": "error", "error": "Invalid input format"};
window.close();

为什么这很重要： 人工智能可以获得结构化数据，而不仅仅是“用户点击了什么”。它确切地知道发生了什么，并且可以做出适当的反应。

内容加载选项

内联HTML：

{
  "html": "..."
}

URL加载：

{
  "url": "https://example.com/form.html"
}

从任何URL加载内容——非常适合复杂的界面、外部表单或频繁更改的内容。

安全性和可靠性

HMAC令牌系统：

每个安装、每个用户、每个代码版本都是唯一的
确保AI在调用之前完全了解工具的使用情况
防止意外误用
工具间调用的工具间令牌格式

线程安全架构：

MCP线程和Qt主线程之间基于队列的消息传递
没有比赛条件或僵局
具有超时保护的请求-应答模式
诊断的详细日志记录

全面的错误处理：

带有明确错误消息的参数验证
对所有输入进行类型检查
Qt不可用时性能下降
用于调试的全栈跟踪
错误时自动附加自述文件

平台智能

Windows特定处理：

确认操作系统级别的焦点窃取预防
推荐 always_on_top 超过 bring_to_front
在文档中提供特定于平台的指导

跨平台一致性：

Windows、Mac、Linux上的相同渲染
所有平台的API相同
无需平台特定代码
Qt WebEngine确保了现代web标准

______________________________________________________________________

窗口大小——隐藏的复杂性变得简单

问题

Qt WebEngine将窗口chrome（标题栏+边框）添加到您请求的大小：

实际宽度=请求宽度+16px
实际高度=请求高度+39px

你的HTML内容会得到你要求的精确尺寸——chrome会添加在上面。

听起来很简单，对吧？ 不是的。低估20px，你会得到滚动条。滚动条更改布局。改变布局需要不同的高度。无尽的挫折感。

解决方案：自动调整大小

集 auto_resize: true 以及工具：

以2倍请求的高度打开窗口（无法使用滚动条）
JavaScript测量实际内容维度
窗口缩小以完美适应内容+填充
窗口自动重新居中
没有滚动条，没有猜测，没有挫折

这种细节将“有时工作”与“总是工作”区分开来

确定最佳实践的规模

如果不使用自动调整大小：

总是高估而不是低估
在估计的内容高度之外添加50-80px缓冲区
帐户：正文填充+容器填充+边距+内容+按钮

适用的常见尺寸：

简单形式：400-500px高度
API键对话框：450-550px高
信息显示：350-450px高度
复杂形状：600-800px高

经验法则： 如果你认为你需要300px，请求400px。

______________________________________________________________________

HTML模板--复制、粘贴、自定义

专业API密钥集合


    API Key Required
    
        body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 
            padding: 30px; 
            background: #f5f5f5; 
            margin: 0; 
        }
        .container { 
            background: white; 
            padding: 30px; 
            border-radius: 8px; 
            box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
            max-width: 400px; 
            margin: 0 auto; 
        }
        h2 { color: #333; margin-top: 0; }
        input[type="password"] { 
            width: 100%; 
            padding: 12px; 
            border: 1px solid #ddd; 
            border-radius: 4px; 
            font-size: 14px; 
            margin: 10px 0; 
        }
        button { 
            background: #007AFF; 
            color: white; 
            border: none; 
            padding: 12px 24px; 
            border-radius: 4px; 
            cursor: pointer; 
            margin-right: 10px; 
        }
        button:hover { background: #0056CC; }
        .cancel { background: #666; }
        .cancel:hover { background: #333; }
    

    

        
🔑 OpenAI API Key Required

        
Please enter your OpenAI API key to continue:

        
        

            Submit
            Cancel
        

    

    
    
        function submit() {
            const key = document.getElementById('apiKey').value.trim();
            if (!key) return alert('Please enter an API key');
            if (!key.startsWith('sk-')) return alert('Invalid API key format');
            
            window.userResponse = {"status": "success", "data": {"api_key": key}};
            window.close();
        }
        
        function cancel() {
            window.userResponse = {"status": "cancelled"};
            window.close();
        }
        
        document.getElementById('apiKey').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') submit();
        });

简单确认对话框


    Confirmation
    
        body { font-family: system-ui; padding: 20px; text-align: center; }
        .icon { font-size: 48px; margin-bottom: 20px; }
        button { 
            padding: 10px 20px; 
            margin: 0 5px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
        }
        .yes { background: #28a745; color: white; }
        .no { background: #dc3545; color: white; }
    

    
⚠

    
Delete all files?

    
This action cannot be undone.

    Yes, Delete
    Cancel
    
    
        function respond(confirmed) {
            window.userResponse = {"status": "success", "data": {"confirmed": confirmed}};
            window.close();
        }

多步向导


    Setup Wizard
    
        body { font-family: system-ui; padding: 20px; background: #f5f5f5; }
        .wizard { background: white; padding: 30px; border-radius: 8px; max-width: 500px; margin: 0 auto; }
        .step { display: none; }
        .step.active { display: block; }
        .progress { display: flex; justify-content: space-between; margin-bottom: 30px; }
        .progress-dot { width: 30px; height: 30px; border-radius: 50%; background: #ddd; 
                       display: flex; align-items: center; justify-content: center; }
        .progress-dot.active { background: #007AFF; color: white; }
        .progress-dot.completed { background: #28a745; color: white; }
        button { padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; margin: 5px; }
        .primary { background: #007AFF; color: white; }
        .secondary { background: #666; color: white; }
    

    

        

            
1

            
2

            
3

        

        
        

            
Step 1: Basic Information

            
            Next
        

        
        

            
Step 2: Preferences

             Enable notifications

             Auto-save

            Back
            Next
        

        
        

            
Step 3: Confirm

            
Ready to complete setup?

            Back
            Finish
        

    

    
    
        function nextStep(num) {
            document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));
            document.getElementById('step' + num).classList.add('active');
            document.getElementById('dot' + (num-1)).classList.add('completed');
            document.getElementById('dot' + num).classList.add('active');
        }
        
        function prevStep(num) {
            document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));
            document.getElementById('step' + num).classList.add('active');
            document.getElementById('dot' + (num+1)).classList.remove('active');
            document.getElementById('dot' + num).classList.remove('completed');
        }
        
        function finish() {
            window.userResponse = {
                "status": "success",
                "data": {
                    "name": document.getElementById('name').value,
                    "notifications": document.getElementById('pref1').checked,
                    "autosave": document.getElementById('pref2').checked
                }
            };
            window.close();
        }

______________________________________________________________________

使用示例

显示API密钥收集对话框

{
  "input": {
    "operation": "show_dialog",
    "html": "...[full HTML]...",
    "title": "API Key Required",
    "width": 500,
    "height": 450,
    "modal": true,
    "timeout": 120,
    "tool_unlock_token": "YOUR_TOKEN_HERE"
  }
}

使用预构建的API密钥收集器

{
  "input": {
    "operation": "collect_api_key",
    "service_name": "OpenAI",
    "service_url": "https://platform.openai.com/api-keys",
    "tool_unlock_token": "YOUR_TOKEN_HERE"
  }
}

显示非阻止通知

{
  "input": {
    "operation": "show_popup",
    "html": "
✅ Success!

Your settings have been saved.
setTimeout(() => window.close(), 3000);",
    "title": "Success",
    "width": 400,
    "height": 200,
    "modal": false,
    "wait_for_response": false,
    "tool_unlock_token": "YOUR_TOKEN_HERE"
  }
}

从URL加载内容

{
  "input": {
    "operation": "show_dialog",
    "url": "https://example.com/form.html",
    "title": "External Form",
    "width": 800,
    "height": 600,
    "tool_unlock_token": "YOUR_TOKEN_HERE"
  }
}

______________________________________________________________________

返回值

成功响应

{
  "status": "success",
  "data": {
    "api_key": "sk-1234...",
    "username": "john",
    "preferences": {"theme": "dark"}
  },
  "window_closed": true
}

取消响应

{
  "status": "cancelled",
  "message": "User cancelled the dialog"
}

超时响应

{
  "status": "timeout",
  "error": "UI request timed out after 125 seconds"
}

异步模式响应（wait_for_Response:false）

{
  "status": "success",
  "message": "Window opened successfully (async mode - not waiting for user response)",
  "async": true
}

______________________________________________________________________

技术架构

线程安全通信

挑战： MCP工具在工作线程中运行。Qt UI必须在主线程中运行。你如何安全地沟通？

解决方案： 基于队列的消息传递，采用请求-应答模式。

工具创建 UIRequest 具有操作数据和回复队列
工具通过以下方式向friday.py的主线程发送请求 sys.modules['friday_ui_queue']
Qt主线程轮询队列，处理请求，创建窗口
用户与窗口交互
窗口关闭，响应通过回复队列发回
工具收到响应，返回AI

为什么这样做：

线程之间没有共享状态
无需锁或静音
超时保护防止挂起请求
MCP和Qt层之间的干净分离

安全令牌系统

基于HMAC的令牌可确保正确使用：

TOOL_UNLOCK_TOKEN = get_tool_token(__file__)
# Generates unique token from: file path + user + code version

令牌验证：

直接匹配：AI已阅读文档
工具间格式： -{calling_tool_token}-{target_tool_token}
无效/缺失：返回完整文档

为什么这很重要： 防止AI在不了解参数的情况下调用工具，减少错误并提高可靠性。

自动调整大小算法

两阶段调整大小消除了滚动条级联：

Stage 1: Open at 2× requested height
  → No scrollbars possible
  → JavaScript measures content height
  → Sends height to Python via bridge

Stage 2: Resize to measured height + padding
  → Window shrinks to perfect size
  → Re-center on screen
  → No scrollbars, no layout changes

为什么是两个阶段？ 以精确大小打开可能会导致滚动条。滚动条更改布局。更改后的布局需要不同的大小。两阶段方法打破了这种循环。

______________________________________________________________________

常见用例

收集敏感信息

API密钥、密码、令牌-任何不应该粘贴在聊天窗口中的内容。

用户首选项和配置

主题选择、功能切换、高级设置——漂亮的表单而不是命令行标志。

确认对话框

“你确定吗？”在采取破坏性行动之前需要用户明确确认的时刻。

多步向导

复杂的设置过程被分解为可管理的步骤，并带有进度指示。

进度显示

包含图表、图形或详细状态信息的丰富、格式化的进度更新。

数据输入表格

带有验证、下拉菜单、复选框和正确错误消息的结构化输入。

错误显示和操作

不仅仅是“出了点问题”——展示发生了什么，为什么，以及用户可以做些什么。

文件选择和选项

具有预览、过滤和元数据显示功能的自定义文件选择器。

______________________________________________________________________

最佳实践

HTML结构

始终包含完整的HTML，包括DOCTYPE、head和body
使用现代CSS实现美观、响应迅速的布局
在JavaScript中包含正确的错误处理
使用语义HTML和适当的表单验证
首先在浏览器中测试HTML的复杂界面

窗口大小

为高度估计值添加50-80px缓冲区，以避免滚动条
使用 auto_resize: true 完美定码，无需猜测
考虑所有间距：正文填充+容器填充+边距+内容+按钮
如果可能，在所有平台上进行测试（Windows、Mac、Linux）

用户体验

为模态对话框设置合理的超时（120-300秒）
使用 always_on_top: true 在Windows上实现可靠的可见性
在所有对话框中提供明确的取消选项
包括键盘快捷键（Enter可提交，Escape可取消）
显示异步操作的加载状态
关闭窗口前验证输入

错误处理

在发送到Python之前，验证JavaScript中的所有用户输入
提供清晰的错误信息和可操作的指导
在所有操作周围使用try-catch块
集 window.userResponse 打电话之前 window.close()
优雅地处理超时情况

安全

切勿在窗口标题或日志中暴露敏感数据
使用密码输入类型作为机密
保存前验证API密钥
使用后从内存中清除敏感数据
尽可能使用HTTPS加载URL

______________________________________________________________________

故障排除

窗口不出现

可能的原因：

Qt不可用（检查friday.py是否在Qt支持下运行）
UI请求队列不可访问（确保服务器通过friday.py启动）
在其他窗户后面打开的窗户（使用 always_on_top: true)

解决：

检查日志是否存在“无可用UI请求队列”错误
验证Qt WebEngine是否已安装
尝试 test_queue 诊断通信问题的操作

窗口有滚动条

可能的原因：

身高被低估
忘记考虑填充/边距
内容超出预期

解决：

将50-80px添加到高度估计值
使用 auto_resize: true 用于自动定尺寸
检查车身衬垫、集装箱衬垫、边缘

超时错误

可能的原因：

用户花费的时间超过了超时允许的时间
窗口被其他窗口遮挡（用户看不到）
网络延迟加载URL内容

解决：

增加超时值
使用 always_on_top: true 能见度
使用 wait_for_response: false 用于非关键操作

JavaScript桥不工作

可能的原因：

忘记设置 window.userResponse 之前 window.close()
响应格式不正确（必须是带有“状态”键的对象）
JavaScript错误阻止执行

解决：

检查浏览器控制台是否存在JavaScript错误
验证响应格式是否与预期结构匹配
首先在常规浏览器中测试HTML

______________________________________________________________________

由MCP Link供电

此工具是 MCP链路服务器 --经过实战测试、可投入生产的MCP服务器 就是好用 在每个平台上。

为什么选择MCP Link？

独立Python环境：

不接触你的系统Python
包括所有依赖项（Qt、PySide2等）
在旧系统和新系统上工作
无需配置

久经考验的基础设施：

线程安全队列通信
全面的错误处理
诊断的详细日志记录
组件不可用时性能下降

跨平台卓越：

Windows、Mac、Linux支持
跨平台的一致行为
平台特定优化
本土外观和感觉

获取MCP链接

下载适用于您平台的安装程序：

安装是自动的。配置是自动的。它只是工作。

______________________________________________________________________

技术规格

语言： Python 3.x\ 依赖关系： Qt Web引擎（PySide2），包含在MCP链接中\ 螺纹安全： 是（基于队列的消息传递）\ 平台支持： Windows、macOS、Linux\ 安全： HMAC令牌验证、参数类型检查\ 错误处理： 全面的堆栈跟踪\ 登录中： 通过MCPLogger进行详细说明\ 文档： 通过以下方式进行自我记录 readme 操作

版本： 2025.09.13.009\ 架构： 没有直接导入Qt（sys.modules注册表）\ 沟通： 原生Python队列。队列\ 令牌系统： 每个安装、每个用户、每个代码版本

______________________________________________________________________

许可和版权

根据Apache许可证2.0版（“许可证”）许可；除非遵守许可证，否则您不得使用此文件。您可以在以下网址获得许可证副本：

https://www.apache.org/licenses/LICENSE-2.0

除非适用法律要求或书面同意，否则软件根据许可证分发的内容按“原样”分发，无任何明示或暗示的保证或条件。请参阅许可证，了解管理权限和许可证下的限制。

AI培训许可：您可以使用此软件和任何培训、评估、微调或改进的相关内容人工智能系统，包括商业模型。

SPDX许可证标识符：Apache-2.0

Aura Friday MCP链路服务器项目的一部分。

______________________________________________________________________

支持与社区

问题和功能请求：\

文档：\ MCP链接文档

社区：\ 与其他开发人员一起使用MCP-Link构建令人惊叹的人工智能工具。

user MCP

快速接入

详细介绍

用户界面工具——给你的人工智能一个美丽的窗口

益处

1.🎨 立即创建任何界面

2.🌍 随时随地工作

3.🛡️ 智能安全

为什么这个工具是无与伦比的

获取MCP链接（免费）

立即下载

现实世界故事：API关键问题

完整的功能集

核心业务

show_popup --非模态窗户

show_dialog --模态对话框

collect_api_key -内置API密钥集合

readme --自我记录

高级窗口管理

JavaScript桥——双向通信

内容加载选项

安全性和可靠性

平台智能

窗口大小——隐藏的复杂性变得简单

问题

解决方案：自动调整大小

确定最佳实践的规模

HTML模板--复制、粘贴、自定义

专业API密钥集合

简单确认对话框

多步向导

使用示例

显示API密钥收集对话框

使用预构建的API密钥收集器

显示非阻止通知

从URL加载内容

返回值

成功响应

取消响应

超时响应

异步模式响应（wait_for_Response:false）

技术架构

线程安全通信

安全令牌系统

自动调整大小算法

常见用例

收集敏感信息

用户首选项和配置

确认对话框

多步向导

进度显示

数据输入表格

错误显示和操作

文件选择和选项

最佳实践

HTML结构

窗口大小

用户体验

错误处理

安全

故障排除

窗口不出现

窗口有滚动条

超时错误

JavaScript桥不工作

由MCP Link供电

为什么选择MCP Link？

获取MCP链接

技术规格

许可和版权

支持与社区

目录标签

接入字段

权限和风险

来源信息

继续浏览同类 MCP

`show_popup` --非模态窗户

`show_dialog` --模态对话框

`collect_api_key` -内置API密钥集合

`readme` --自我记录