人机交互MCP扩展

一个VS Code扩展,实现MCP(模型上下文协议)服务器,用于AI代理与用户之间的交互式输入、确认和选择。

  • by DercasDrol
  • TypeScript
  • 本地部署
  • 4 星标
  • 更新于
在 GitHub 查看 DercasDrol/human-in-the-loop-mcp

使用说明

人在环MCP

实现MCP(模型上下文协议)服务器的VS代码扩展 人在循环 互动。它允许任何兼容MCP的AI代理直接在VS Code中请求用户输入、确认或选择。

⭐ 享受这个扩展? 如果你觉得它有用,请 在VS Code Marketplace上对其进行评分 --您的反馈有助于其他开发人员发现它!

什么是循环中的人类?

人类在循环(HITL) 是一种AI代理可以暂停执行以请求人工输入、验证或决策的模式。这对于以下方面至关重要:

  • 🔐 安全:在破坏性操作之前获得明确许可
  • 🎯 准确度:向用户澄清不明确的要求
  • 🔧 灵活性:收集无法预测的动态输入
  • ✅ 信任:让人类了解并控制人工智能行动

特性

特性 描述
🔄 MCP服务器 实现模型上下文协议的内置HTTP服务器
💬 互动面板 用于查看和响应代理消息的漂亮侧边栏面板
⏱️ 倒计时 带有可配置超时和进度条的可视化倒计时
🎯 多种输入类型 文本输入、是/否确认和按钮选择
🗂️ 多代理选项卡 多个代理可以同时发送请求——每个代理都显示为单独的选项卡
📎 文件附件 通过选择器、拖放或剪贴板粘贴将文件和图像附加到响应中
🔔 声音通知 当代理需要您注意时,可配置的音频警报
📤 自动提交 定时器到期时,可选择自动提交当前输入
📝 完整Markdown 代理消息中丰富的格式支持
📚 请求历史 所有与附件查看交互的可搜索历史记录
🔒 隐私第一 所有数据都保持在本地,没有外部连接
🖥️ 多实例 每个VS Code窗口都运行自己的隔离服务器

安装

来自VS代码市场

  1. 打开VS代码
  2. 转到扩展(Ctrl+Shift+X / Cmd+Shift+X)
  3. 搜索“人类在环MCP”
  4. 单击安装

源自源头

git clone https://github.com/DercasDrol/human-in-the-loop-mcp.git
cd human-in-the-loop-mcp
npm install
npm run compile
# Press F5 in VS Code to launch debug mode

快速开始

1.配置您的AI代理

将MCP服务器添加到项目的 .vscode/mcp.json:

{
  "servers": {
    "human-in-the-loop": {
      "url": "http://127.0.0.1:3847/mcp"
    }
  }
}

备注:扩展会自动检测此配置,并在指定端口上启动服务器。

2.使用侧边栏面板

  1. 点击 循环中的人类 活动栏中的图标
  2. 当您的AI代理发送请求时,它会出现在面板中
  3. 倒计时器显示剩余的响应时间
  4. 输入您的回答或单击相应的按钮

键盘快捷键

快捷方式 操作
Enter 发送响应
Shift+Enter 在文本输入中插入新行

小贴士:使用 Shift+Enter 要编写多行响应,则 Enter 发送。

可用的MCP工具

您的AI代理可以使用这些工具与用户交互:

ask_user_text

请求用户输入自由格式的文本。

用于:API密钥、文件路径、自定义名称、说明、说明

{
  "name": "ask_user_text",
  "arguments": {
    "title": "API Key Required",
    "prompt": "Please enter your **OpenAI API key**:\n\nYou can find it at [platform.openai.com](https://platform.openai.com/api-keys)",
    "placeholder": "sk-..."
  }
}

ask_user_confirm

请求用户确认是/否。

用于:破坏性操作、许可请求、验证

{
  "name": "ask_user_confirm",
  "arguments": {
    "title": "Confirm Deletion",
    "message": "Are you sure you want to delete the following files?\n\n- `src/old-module.ts`\n- `tests/old-module.test.ts`\n\n⚠️ **This action cannot be undone.**"
  }
}

ask_user_buttons

提供多个选项供用户选择。

用于:语言选择、操作菜单、配置选项

{
  "name": "ask_user_buttons",
  "arguments": {
    "title": "Select Framework",
    "message": "Which framework would you like to use for this project?",
    "options": [
      { "label": "React", "value": "react" },
      { "label": "Vue.js", "value": "vue" },
      { "label": "Angular", "value": "angular" },
      { "label": "Svelte", "value": "svelte" }
    ]
  }
}

设置

在VS代码设置中配置扩展(Ctrl+,):

设置 类型 默认值 描述
humanInTheLoop.timeout number 120 响应超时(秒)。0=无限超时
humanInTheLoop.autoSubmitOnTimeout boolean false 定时器到期时自动提交当前输入
humanInTheLoop.soundEnabled boolean true 在新请求时播放声音
humanInTheLoop.soundVolume number 0.5 音量(0.0-1.0)
humanInTheLoop.soundType string “默认” 通知声音类型
humanInTheLoop.enableLogging boolean false 启用详细日志记录(输出>人机交互MCP)
humanInTheLoop.bindAddress string “0.0.0.0” 服务器绑定地址(请参阅下面的WSL/Remote部分)

声音类型

  • default -标准通知(简短)
  • chime -柔和的蜂鸣声(短)
  • ping -快速ping(短)
  • bell -带谐波的钟(中等)
  • notification -双音升调(中号)
  • alert -引人注目的蜂鸣声(长)
  • melody -音乐短语C-E-G-C(长)

建筑

┌─────────────────┐     ┌──────────────────┐
│    AI Agent     │────▶│   MCP Server     │
│ (Any MCP Client)│◀────│  (HTTP/JSON-RPC) │
└─────────────────┘     └────────┬─────────┘
                                 │
                                 ▼
                        ┌──────────────────┐
                        │   VS Code        │
                        │   Extension      │
                        └────────┬─────────┘
                                 │
                                 ▼
                        ┌──────────────────┐
                        │  Sidebar Panel   │
                        │  (User Interface)│
                        └──────────────────┘

会话隔离

每个VS代码窗口:

  • 在唯一端口上运行自己的HTTP服务器
  • 有自己的侧边栏面板
  • 独立处理请求

这使得可以同时处理多个项目而不会发生冲突。

兼容性

此扩展适用于 支持模型上下文协议(MCP)的任何AI代理或工具,包括:

  • 支持MCP的VS代码扩展
  • 实现MCP客户端的CLI工具
  • 使用MCP SDK的自定义AI代理
  • 任何可以发送JSON-RPC请求的HTTP客户端

命令

命令 描述
Human in the Loop: Show Connection Instructions 显示设置说明和当前服务器URL
Human in the Loop: Restart MCP Server 重新启动本地MCP服务器

隐私和安全

此扩展:

  • ✅ 在您的计算机上完全本地运行
  • ✅ 不收集任何遥测或分析
  • ✅ 不向外部服务器发送数据
  • ✅ 所有通信都在VS Code和您的本地AI代理之间进行
  • ✅ 默认情况下,绑定到 0.0.0.0 WSL/远程兼容性(可配置为 127.0.0.1)

WSL和远程开发

此扩展完全支持VS代码远程开发:

  • Windows 子系统 for Linux (Linux的Windows子系统)
  • 远程-SSH
  • 开发容器
  • GitHub代码空间

运作原理

在远程环境中工作时,扩展程序在 工作区上下文 (远程机器)。VS Code会自动将MCP服务器端口转发到您的本地计算机。

绑定地址设置

值 描述
0.0.0.0 在所有接口上监听(默认,WSL/Remote需要)
127.0.0.1 仅在本地主机上监听(限制性更强,仅限本地访问)

如果你只在本地工作,想要更严格的网络隔离,你可以改变 humanInTheLoop.bindAddress 到 127.0.0.1.

需求

  • VS代码1.100.0或更高
  • Node.js 20+(用于开发;VS Code包括自己的运行时)

贡献

欢迎投稿!请随时提交拉取请求。

  1. 分叉存储库
  2. 创建功能分支(git checkout -b feature/amazing-feature)
  3. 提交您的更改(git commit -m 'Add amazing feature')
  4. 推到分支(git push origin feature/amazing-feature)
  5. 打开拉取请求

发布过程

此项目使用GitHub Actions进行自动发布:

  1. 更新版本 package.json
  2. 创建并推送版本标签: git tag v1.0.1 && git push --tags
  3. GitHub操作将自动:
    • 构建扩展
    • 使用VSIX创建GitHub版本
    • 发布到VS代码市场(如果 VSCE_PAT 机密已配置)
    • 发布到打开的VSX注册表(如果 OVSX_PAT 机密已配置)

许可证

MIT许可证-请参阅 许可证 了解详情。

更新日志

看 更改日志.md 版本历史。


制作❤️ 对于AI社区