MCP server that provides interactive popup UI tools for user input collection
npm install mcp-popup-uiAn MCP (Model Context Protocol) server that lets AI assistants ask you questions through a visual popup in your browser - instead of just printing text options.
!MCP Popup UI in action with LM Studio
When you chat with an AI assistant (like GitHub Copilot, Claude, or a local LLM), the AI sometimes needs your input - for example, "Which framework do you want?" or "Select the features to include."
Without this tool, the AI would print a numbered list and ask you to type your choice. With mcp-popup-ui, a clean popup opens in your browser where you can click your selection directly.
Two tools are provided:
| Tool | Purpose | UI Element |
|------|---------|------------|
| ask_user | Pick exactly one option | Radio buttons |
| ask_user_multiple | Pick one or more options | Checkboxes |
Install globally via npm:
``bash`
npm install -g mcp-popup-ui
Or run directly without installing:
`bash`
npx y- mcp-popup-ui
Requirements: Node.js 18 or higher.
Choose the setup guide for your AI application:
1. Open your project folder in VS Code
2. Create or edit the file .vscode/mcp.json:
`json`
{
"servers": {
"popup-ui": {
"command": "npx",
"args": ["mcp-popup-ui"]
}
}
}
3. Restart VS Code or reload the window
1. Open LM Studio settings
2. Navigate to the MCP Servers section
3. Add a new server with these settings:
`json`
{
"mcp-popup-ui": {
"command": "npx",
"args": ["mcp-popup-ui"]
}
}
4. Enable the server and start a new chat
Ollama itself does not natively support MCP. However, you can use it with frontends that support MCP, such as Open WebUI with MCP plugins. The configuration depends on your specific frontend - consult its documentation for adding MCP servers.
Add to your Claude Desktop configuration file:
- Windows: %APPDATA%\Claude\claude_desktop_config.json~/Library/Application Support/Claude/claude_desktop_config.json
- macOS:
`json`
{
"mcpServers": {
"popup-ui": {
"command": "npx",
"args": ["mcp-popup-ui"]
}
}
}
Restart Claude Desktop after saving.
To ensure the AI uses the popup tools automatically instead of listing options in text, add this to your project's .github/copilot-instructions.md:
`markdownUser 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.
`
Displays a popup with radio buttons. The user picks exactly one option.
Parameters:
| Parameter | Required | Description |
|-----------|----------|-------------|
| options | Yes | Array of options (minimum 2). Each option has a label (required), optional description, and optional recommended flag. |title
| | No | Heading displayed above the options |description
| | No | Additional text displayed below the title |allow_other
| | No | If true, adds a text field for custom input |other_label
| | No | Label for the custom input option (default: "Other") |
Example call:
`json`
{
"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."
}
Response:
`json`
{
"action": "submit",
"selection": "Svelte"
}
If the user clicks Skip:
`json`
{
"action": "skip"
}
Displays a popup with checkboxes. The user picks one or more options.
Parameters:
| Parameter | Required | Description |
|-----------|----------|-------------|
| options | Yes | Array of options (minimum 2). Each option has a label (required), optional description, and optional recommended flag. |title
| | No | Heading displayed above the options |description
| | No | Additional text displayed below the title |allow_other
| | No | If true, adds a text field for custom input |other_label
| | No | Label for the custom input option (default: "Other") |
Example call:
`json`
{
"options": [
{ "label": "TypeScript", "recommended": true },
{ "label": "ESLint" },
{ "label": "Prettier" },
{ "label": "Jest" }
],
"title": "Select Project Features",
"description": "Choose all features to include."
}
Response:
`json``
{
"action": "submit",
"selections": ["TypeScript", "ESLint", "Prettier"]
}
- Skip button: Users can skip any question without selecting an option
- Comments field: Users can add additional notes with their selection
- Explanation request: Users can ask for more details about an option before deciding
- Markdown support: Option descriptions support Markdown formatting
- Tool Design Best Practices - Research on LLM tool design patterns
See CONTRIBUTING.md for development setup and guidelines.
MIT