Skip to content

feat: MCP get_current_selection tool#39

Merged
trmquang93 merged 1 commit intomainfrom
feat/mcp-get-current-selection
Apr 17, 2026
Merged

feat: MCP get_current_selection tool#39
trmquang93 merged 1 commit intomainfrom
feat/mcp-get-current-selection

Conversation

@trmquang93
Copy link
Copy Markdown
Collaborator

Summary

Adds a new MCP tool, get_current_selection, that returns the element(s) the user currently has selected in the running Drawd browser app — so an AI agent can act on "this screen" or "this hotspot" without the user pasting IDs.

Selection is 100% runtime state and never persisted, so the tool relies on a tiny localhost HTTP bridge between the app and the MCP server.

How it works

  • MCP sidemcp-server/src/selection-bridge.js opens an HTTP listener on localhost:3337 (override with DRAWD_SELECTION_PORT). It stores the latest selection snapshot in memory. If the port is busy it warns on stderr and the stdio server keeps running.
  • Toolmcp-server/src/tools/selection-tools.js reads the snapshot, enriches each item from FlowState:
    • screen → name, description, status, hotspotCount
    • sticky → content, color, x, y
    • connection → fromScreenId, toScreenId, label, action
    • hotspot → screenId, label, action, targetScreenId
    • screenGroup → name, screenIds
    • comment → text, targetType, targetId, resolved
    • Stale (>60s) snapshots return { selection: null, reason: \"no_recent_selection\", hint }.
  • App sidesrc/hooks/useSelectionReporter.js watches every selection slot (canvasSelection, selectedScreen/Sticky/ScreenGroup/Connection/CommentId, selectedHotspots, and hotspotInteraction for single-hotspot select), de-dups, debounces 150 ms, and POSTs to the bridge. Fetch errors are swallowed so the app is unaffected when the bridge isn't running.

Test plan

  • npm run lint passes
  • npm test — 648 tests pass
  • mcp-server/npm run build succeeds; node dist/index.js boots with Selection bridge listening on http://localhost:3337
  • POST/GET round-trip verified via curl
  • Tool enrichment verified for screen, sticky, connection, hotspot, screenGroup, comment
  • EADDRINUSE path warns on stderr without crashing
  • Live end-to-end verified in the browser for screen, hotspot, connection, sticky selections
  • Reviewer: run npm run dev + MCP server, select elements, call get_current_selection from an MCP client

Adds a live bridge between the Drawd browser app and the MCP server so
AI agents can read the user's current canvas selection without asking
for IDs.

- mcp-server: HTTP listener on localhost:3337 receives selection
  snapshots; `get_current_selection` tool enriches them from FlowState
  (screen name, hotspot count, connection endpoints, etc.) with a 60s
  staleness guard.
- drawd app: `useSelectionReporter` debounces selection state changes
  (screens, stickies, connections, hotspots, groups, comments) and POSTs
  them to the bridge. Fails silently when the bridge isn't running.
@trmquang93 trmquang93 merged commit 7af7f45 into main Apr 17, 2026
1 check passed
@github-actions github-actions Bot deleted the feat/mcp-get-current-selection branch April 17, 2026 02:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant