Provides autocomplete for GitHub issues and pull requests in multiline input dialogs.
Allows GitHub Copilot CLI to request human input through browser dialogs for interactive decision-making.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@human-loop-mcp show a confirmation dialog to deploy v2.1.0 to production"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
An MCP (Model Context Protocol) server that gives AI agents a way to ask the human operator questions through the browser.
A lightweight localhost HTTP server spins up
Your default browser opens a dialog page
You fill in the form (optionally attaching files) and submit
The response flows back to the agent through MCP
No Python, no Tkinter, no Electron — just a Node.js process, a browser tab, and clean HTML.
GUI-based human-in-the-loop tools often break on macOS (Accessibility permissions, focus stealing, Python framework builds). This project sidesteps all of that by using the browser as the UI layer — it works everywhere Node.js runs.
Related MCP server: Implore MCP
7 MCP tools | Text input, multiline, choice, confirmation, info, health check, and usage guidance |
File attachments | Drag-and-drop, paste, or click-to-upload files in the multiline dialog. Files are base64-encoded and returned alongside the text response (5 MB per-file limit) |
Autocomplete |
|
Dark/light mode | Follows system preference automatically |
Keyboard-first |
|
Command-palette UI | Linear/Raycast-inspired design with purple accents, monospace labels, noise texture background |
Zero bloat | Only two runtime dependencies: |
Single-file HTML | No static assets, no bundler — fully server-rendered |
npm install -g human-loop-mcpOr run directly without installing:
npx human-loop-mcpgit clone https://github.com/dzulfiikar/human-loop-mcp.git
cd human-loop-mcp
npm install
npm run buildAdd to ~/Library/Application Support/Claude/claude_desktop_config.json:
{
"mcpServers": {
"human-loop": {
"command": "npx",
"args": ["-y", "human-loop-mcp"]
}
}
}Add to .cursor/mcp.json or equivalent:
{
"mcpServers": {
"human-loop": {
"command": "npx",
"args": ["-y", "human-loop-mcp"]
}
}
}[mcp_servers.human-loop]
command = "npx"
args = ["-y", "human-loop-mcp"][mcp_servers.human-loop-dev]
command = "npx"
args = ["tsx", "/path/to/human-loop-mcp/src/index.ts"]Tool | Description |
| Single-line text, password, integer, or float input |
| Single or multi-select from a list of choices |
| Large text area with autocomplete and file attachments |
| Binary confirm/cancel dialog |
| Informational message with acknowledgement |
| Returns guidance text on when to use the tools |
| Returns server health status and available tools |
{
"title": "API Key",
"prompt": "Enter your OpenAI API key:",
"input_type": "password"
}{
"title": "Database",
"prompt": "Which database should I use?",
"choices": ["PostgreSQL", "MySQL", "SQLite"],
"allow_multiple": false
}{
"title": "Deploy",
"message": "Deploy v2.1.0 to production?",
"confirm_label": "Deploy",
"cancel_label": "Abort"
}The get_multiline_input dialog supports file attachments through three methods:
Method | How |
Drag and drop | Drag files onto the textarea — a drop overlay appears |
Paste |
|
Upload button | Click the paperclip "Attach" button below the textarea |
Any file type is accepted
5 MB per-file limit — oversized files are rejected with an inline error
Files are base64-encoded and returned in the tool result alongside the text value
Image previews are shown as thumbnails in the attachment chips
Each chip shows the file name, size, and a remove button
When no files are attached, the result is identical to the previous format (fully backward-compatible)
When attachments are present, the get_multiline_input tool returns:
{
"action": "submit",
"value": "Here is the screenshot",
"attachments": [
{
"name": "screenshot.png",
"type": "image/png",
"size": 48210,
"data": "iVBORw0KGgo..."
}
]
}When no attachments are provided, the attachments field is omitted entirely.
Variable | Default | Description |
|
| HTTP server bind address |
| (ephemeral) | Fixed HTTP port. If unset, the OS assigns a random port |
| (unset) | Set to |
import { BrowserDialogServer } from "human-loop-mcp/browser/browser-dialog-server";
const server = new BrowserDialogServer({
port: 8080,
launchUrl: async (url) => {
console.log(`Open: ${url}`);
},
});┌──────────────────────────────────────────┐
│ MCP Client (AI Agent) │
│ Claude / Cursor / Copilot CLI │
└──────────────┬───────────────────────────┘
│ stdio (JSON-RPC)
┌──────────────▼───────────────────────────┐
│ index.ts Tool registration │
│ service.ts Business logic │
│ browser-dialog-server.ts HTTP + APIs │
│ dialog-session-manager.ts Sessions │
│ html.ts HTML/CSS/JS renderer │
└──────────────┬───────────────────────────┘
│ HTTP (localhost)
┌──────────────▼───────────────────────────┐
│ Browser Dialog UI │
│ Forms · Autocomplete · Attachments │
│ Dark/light · Keyboard shortcuts │
└──────────────────────────────────────────┘MCP client calls a tool (e.g. get_multiline_input) via stdio JSON-RPC
index.ts routes the call to HumanLoopService
service.ts transforms args and calls BrowserDialogServer.openDialog()
browser-dialog-server.ts creates a session, starts HTTP if needed, opens the browser
html.ts renders a self-contained HTML page with the dialog form
User submits (with optional file attachments) — the POST handler validates and resolves the session promise
Response flows back through MCP to the AI agent, including any base64-encoded attachments
npm install # Install dependencies
npm run dev # Run from source (tsx, hot-reload)
npm run build # Compile to dist/
npm test # Run tests (Vitest)
npm run typecheck # Type-check without emittingsrc/
├── index.ts MCP server entry point & tool registration
├── service.ts Tool handler business logic
└── browser/
├── browser-dialog-server.ts HTTP server, browser launcher, API endpoints
├── dialog-session-manager.ts Session lifecycle, validation & attachment types
└── html.ts Dialog page renderer (forms, autocomplete, attachments)
tests/
├── service.test.ts
├── dialog-session-manager.test.ts
└── browser-dialog-server.test.tsSee CONTRIBUTING.md for development setup, code style, and PR guidelines.
Explain when to use the human-loop browser tools.
Inputs: no named parameters.
Open a browser-based choice dialog for the user.
Inputs: title (required), prompt (required), choices (required), allow_multiple, +1 more.
Open a browser-based single-line input dialog for the user.
Inputs: title (required), prompt (required), input_type, default_value.
Check server and browser dialog runtime health.
Inputs: no named parameters.
Ask the user to confirm or cancel an action in the browser.
Inputs: title (required), message (required), cancel_label, confirm_label.
Show an informational browser page and wait for acknowledgement.
Inputs: title (required), message (required), acknowledge_label.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 6 tools
Each tool has a clearly distinct purpose: showing info, getting input, getting a choice, confirming, explaining usage, and health check. No overlaps.
All tool names follow a consistent verb_noun or noun_noun pattern in snake_case (e.g., show_info_message, get_user_input, health_check). No deviations.
6 tools is well-scoped for a human-in-the-loop server, covering core interaction types without bloat or insufficiency.
The set covers the essential human-loop interactions: informational display, single-line input, choice selection, confirmation, plus a meta tool and health check. No obvious gaps.
Give any AI agent a way to ask a person — for approval, a decision, an answer or a review.
Let your AI agent ask a person for a decision, a date or a photo, and get a structured answer back.
Poke your human for approvals and decisions during agent sessions — answered with one phone tap.
Human review for AI agents: ask through ActionBox and retrieve a typed decision before proceeding.