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弹出式用户界面，浏览器中会打开一个干净的弹出窗口，您可以直接单击您的选择。
提供两种工具：
| 工具 | 目的 | UI元素 |
|---|---|---|
ask_user | 只选择一个选项 | 单选按钮 |
ask_user_multiple | 选择一个或多个选项 | 复选框 |
安装
通过npm全局安装：
npm install -g mcp-popup-ui或者直接运行而不安装：
npx y- mcp-popup-ui要求： Node.js 18或更高版本。
设置
为您的AI应用程序选择设置指南：
VS代码（GitHub副本）
- 在VS Code中打开项目文件夹
- 创建或编辑文件
.vscode/mcp.json:
{
"servers": {
"popup-ui": {
"command": "npx",
"args": ["mcp-popup-ui"]
}
}
}- 重新启动VS Code或重新加载窗口
LM 工作室
- 打开LM Studio设置
- 导航到MCP服务器部分
- 使用以下设置添加新服务器：
{
"mcp-popup-ui": {
"command": "npx",
"args": ["mcp-popup-ui"]
}
}- 启用服务器并开始新的聊天
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 | 是 | 选项数组（至少2个）。每个选项都有一个 label （必填），可选 description，可选 recommended 旗帜。 |
title | 否 | 选项上方显示标题 |
description | 否 | 标题下方显示其他文本 |
allow_other | 否 | 如果 true，为自定义输入添加文本字段 |
other_label | 否 | 自定义输入选项的标签（默认：“其他”） |
示例调用：
{
"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 | 是 | 选项数组（至少2个）。每个选项都有一个 label （必填），可选 description，可选 recommended 旗帜。 |
title | 否 | 选项上方显示标题 |
description | 否 | 标题下方显示其他文本 |
allow_other | 否 | 如果 true，为自定义输入添加文本字段 |
other_label | 否 | 自定义输入选项的标签（默认：“其他”） |
示例调用：
{
"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 用于开发设置和指南。
许可证
麻省理工学院