Add with-sightmap-webmcp: a Next.js example that ships WebMCP tools from its corpus

[chiplay]

Stack 2/3 — the example. Builds on #1 (the package); #3 is the write-up. Written to lift into vercel/next.js/examples/ later, once reviewed here.

What this changes

Adds examples/with-sightmap-webmcp: a three-route Next.js 16 task board with a curated .sightmap/, a .sightkick/ tool layer (nine tools, two journeys), three Gherkin features, and their stamped plans. <SightkickTools/> sits in the root layout; sightmap-next build runs as prebuild. CI gains a plans job that installs Chrome 152 via agent-browser install and replays the plans. Two screenshots under docs/.

Both screenshots were taken by agent-browser after it invoked the tools, not by clicking. The fourth row and the "Done" badge are the results of add_task and open_task → mark_done.

Why

To show the whole loop on the stock App Router, verified rather than described. Chrome for Testing 152, agent-browser 0.36.0:

$ agent-browser open localhost:3000 && agent-browser webmcp list
add_task [B8D45B9B…]
  Add a task to the board by title. Idempotent — an existing title is left alone. Returns `value` (string): …
complete_task …  delete_task …  list_tasks …  open_task …  set_filter …

$ agent-browser open localhost:3000/about && agent-browser webmcp list
No WebMCP tools registered on the current page        ← view-scoped: nothing is declared for /about

$ npm run test:plans
Complete a task from its detail page
  ✓ When I open "Write the sightmap"
  ✓ Then the task page shows it as "Active"
  ✓ When I mark it done
  ✓ Then the task page shows it as "Done"
  ✓ When I go back to the board
  ✓ And I show only Done tasks / Then "Write the sightmap" is listed as done

How a scenario line becomes a replayable step — resolved once by an agent, then replayed with no model:

flowchart LR
  g["<b>features/triage.feature</b><br/>When I mark it done"] -- "agent, once" --> p["<b>plans/triage.plan.json</b><br/>tool: mark_done<br/>expect: ok"]
  p -- "sightmap-next run-plan" --> ab["agent-browser<br/>webmcp invoke mark_done"]
  ab --> rt["Sightkick runtime<br/>click MarkDoneButton<br/>wait_for TaskDetail[status=Done]"]
  rt --> r["{ ok: true, value: 'Done',<br/>guidance: [back_to_board] }"]
  r -. "hash of feature + IR<br/>stamped in the plan" .-> p

Loading

Two things the example surfaced, both recorded in #3: agent-browser only sees the browser's native WebMCP registry (a polyfill is invisible; Chromium 141 reports webmcp_unsupported, 152 works), and a child component name reused under two parents in one view resolves to the last definition at compile time.

Corpus coverage from sightmap snapshot --coverage on the same Chrome build: / 20/20 T1, /tasks/1 6/6 T1, zero orphans.

Checklist

• Commits are signed off (git commit -s)
• npm test passes; npm run build:example and npm run test:plans pass (3/3) with the app running

🤖 Generated with Claude Code

https://claude.ai/code/session_013FZAbWuynKT4NqXFMwtoBA

---

Generated by Claude Code