input-mcp
MCP server for collecting contextual user input.
The server exposes a single collect_input tool that can collect:
- Text input - simple text or JSON from the user
- Image input - freeform drawing on a canvas
- Pixel art - grid-based pixel art editor with color palette
When called, it launches an Electron window where the user can provide their input, then returns the result (as a file path for images) back to the MCP client.
Quick Start
npm install
npm run build
npx @modelcontextprotocol/inspector node dist/src/server.js
Note: This package is also published on npm as @swairshah/input-mcp and can be used directly with npx @swairshah/input-mcp.
This opens a web interface where you can test the tool. Try calling collect_input with different parameters:
{"kind": "text"}- opens a text input window{"kind": "pixelart", "gridWidth": 16, "gridHeight": 16}- opens a pixel art editor{"kind": "image", "initialImage": "/path/to/image.png"}- opens an image editor with a starting image
Build and Test the UI Components
bun install first. obviously.
-
Build the UI bundle (creates
ui/dist/assets used by Electron):npm run build:ui # or bun run build:ui -
Launch the Electron prompt helper directly (useful for smoke tests):
bun run createThis spawns the image/text prompt window with the default text spec.
-
Test script:
bunx tsx scripts/test-input.ts image
Testing with MCP Inspector
npm run build
npx @modelcontextprotocol/inspector node dist/src/server.js
The inspector provides a web UI to test the tool. Images are saved to ~/.cache/input-mcp/images/ and the tool returns the file path.
Using with Claude Desktop
Add to your Claude config (~/Library/Application Support/Claude/claude_desktop_config.json):
Using npm package (recommended):
{
"mcpServers": {
"input-mcp": {
"command": "npx",
"args": ["-y", "@swairshah/input-mcp"]
}
}
}
Using local clone:
{
"mcpServers": {
"input-mcp": {
"command": "node",
"args": ["/absolute/path/to/input-mcp/dist/src/server.js"]
}
}
}
Then ask Claude things like:
- "Let me draw something for you" (opens drawing canvas)
- "I want to create pixel art" (opens pixel art editor)
Dev
Project Structure
shared/ → Zod schemas, shared types, and error helpers
ui/ → Electron renderer (HTML/CSS/JS) and prompt modules
create.ts → Launches the Electron window and normalises specs
server.ts → MCP server definition for the `collect_input` tool
scripts/ → Ad-hoc utilities (`test-input.ts` for manual runs)
Development Workflow
- Modify the renderer in
ui/renderer.tsand module files underui/modules/. - Add new input kinds by extending
shared/types.tsand branching insidemount*Modulehelpers. - When iterating on the UI, run
bun run create(ornpx tsx scripts/test-input.ts image) to open a live window with the current spec.
License
MIT