AI助手可视化弹窗工具

mcp弹出式用户界面

MCP（模型上下文协议）服务器，允许AI助手通过浏览器中的可视化弹出窗口向您提问，而不仅仅是打印文本选项。

📢 关于未来的说明

该项目最初是作为MCP生态系统中一个空白的实验性解决方案：让AI助手通过可视化界面而不是纯文本收集用户输入。如今，它适用于任何兼容MCP的客户端。

MCP规范现在包括 MCP应用程序 -一个官方扩展，将交互式UI直接嵌入聊天对话中。这提供了更好的用户体验（没有浏览器弹出窗口，没有上下文切换），最终将成为推荐的方法。

目前，mcp-pop-ui仍然有用，因为mcp Apps支持仍然仅限于少数客户端（Claude、VS Code Insiders、Goose、Postman、MCPJam）。一旦MCP Apps广泛可用，考虑迁移到基于MCP Apps的解决方案以获得最佳体验。

这有什么作用

当你与人工智能助手（如GitHub Copilot、Claude或本地LLM）聊天时，人工智能有时需要你的输入——例如，“你想要哪个框架？”或“选择要包含的功能”

如果没有这个工具，人工智能会打印一个编号列表，并要求你输入你的选择。 使用mcp弹出式用户界面，浏览器中会打开一个干净的弹出窗口，您可以直接单击您的选择。

提供两种工具：

安装

通过npm全局安装：

npm install -g mcp-popup-ui

或者直接运行而不安装：

npx y- mcp-popup-ui

要求： Node.js 18或更高版本。

设置

为您的AI应用程序选择设置指南：

VS代码（GitHub副本）

1. 在VS Code中打开项目文件夹

2. 创建或编辑文件 .vscode/mcp.json:

   复制

   {
     "servers": {
       "popup-ui": {
         "command": "npx",
         "args": ["mcp-popup-ui"]
       }
     }
   }
   

3. 重新启动VS Code或重新加载窗口

LM 工作室

1. 打开LM Studio设置

2. 导航到MCP服务器部分

3. 使用以下设置添加新服务器：

   复制

   {
     "mcp-popup-ui": {
       "command": "npx",
       "args": ["mcp-popup-ui"]
     }
   }
   

4. 启用服务器并开始新的聊天

Ollama（通过Open WebUI或类似方式）

Olama本身并不支持MCP。但是，您可以将其与支持MCP的前端一起使用，例如使用MCP插件的Open WebUI。配置取决于您的特定前端-有关添加MCP服务器，请参阅其文档。

克劳德桌面版

添加到您的Claude Desktop配置文件中：

• 窗户： %APPDATA%\Claude\claude_desktop_config.json
• macOS： ~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "popup-ui": {
      "command": "npx",
      "args": ["mcp-popup-ui"]
    }
  }
}

保存后重新启动Claude Desktop。

副驾驶说明（可选）

为了确保AI自动使用弹出工具，而不是在文本中列出选项，请将其添加到您的项目中 .github/copilot-instructions.md:

## User Input Collection

Use MCP tools for user choices:

- `ask_user` - single selection (radio buttons)
- `ask_user_multiple` - multiple selection (checkboxes)

Use these tools when presenting options like framework choices, implementation approaches, or any list of alternatives.

工具参考

ask_user

显示带有单选按钮的弹出窗口。用户只选择一个选项。

参数：

示例调用：

{
  "options": [
    { "label": "React", "description": "Component-based UI library" },
    { "label": "Vue", "description": "Progressive JavaScript framework" },
    { "label": "Svelte", "description": "Compile-time framework", "recommended": true }
  ],
  "title": "Choose a Frontend Framework",
  "description": "Select one framework for your project."
}

答复：

{
  "action": "submit",
  "selection": "Svelte"
}

如果用户单击跳过：

{
  "action": "skip"
}

ask_user_multiple

显示一个带有复选框的弹出窗口。用户选择一个或多个选项。

参数：

示例调用：

{
  "options": [
    { "label": "TypeScript", "recommended": true },
    { "label": "ESLint" },
    { "label": "Prettier" },
    { "label": "Jest" }
  ],
  "title": "Select Project Features",
  "description": "Choose all features to include."
}

答复：

{
  "action": "submit",
  "selections": ["TypeScript", "ESLint", "Prettier"]
}

附加功能

• 跳过按钮： 用户可以跳过任何问题，而无需选择选项
• 评论字段： 用户可以根据自己的选择添加其他注释
• 解释请求： 用户可以在决定之前询问有关选项的更多详细信息
• Markdown支持： 选项描述支持Markdown格式

文档

• 工具设计最佳实践 -LLM刀具设计模式研究

贡献

看 贡献.md 用于开发设置和指南。

许可证

麻省理工学院