Skip to content

MCP server to enable Claude Desktop to use an electron window to take various kinds of user input

License

Notifications You must be signed in to change notification settings

swairshah/InputMCP

Repository files navigation

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.

Pixel Art Example

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.

  1. Build the UI bundle (creates ui/dist/ assets used by Electron):

    npm run build:ui
    # or
    bun run build:ui
  2. Launch the Electron prompt helper directly (useful for smoke tests):

    bun run create

    This spawns the image/text prompt window with the default text spec.

  3. 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.ts and module files under ui/modules/.
  • Add new input kinds by extending shared/types.ts and branching inside mount*Module helpers.
  • When iterating on the UI, run bun run create (or npx tsx scripts/test-input.ts image) to open a live window with the current spec.

License

MIT

About

MCP server to enable Claude Desktop to use an electron window to take various kinds of user input

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published