Inspiration

Civic failures are experienced locally but reported through fragmented, repetitive workflows. A resident may have the strongest evidence—a photo and a locality—but still needs to identify the issue type, find the correct ward, avoid filing a duplicate, and connect the report to relevant public works. A general browser agent can try to click through that process, but DOM guessing is brittle and makes it hard for the resident to see or trust what changed.

WebMCP turns civic reporting from a fragile sequence of inferred clicks into a legible collaboration. People retain judgment and visual confirmation; agents handle structured lookup and repetitive coordination. The result is faster reporting, fewer duplicates, better geographic routing, and a clearer connection between a resident's evidence and the city's published work.

What it does

Nagara is a public Bengaluru civic-voice map designed as a shared workspace for a person and an agent. The resident supplies context and evidence. A WebMCP-enabled agent discovers the current page's actions, fills the same visible form, classifies the issue, resolves the GBA ward, files or supports a voice, focuses the matching map pin, and retrieves related public records. Human and agent actions use one command layer and one local state model, so the interface never drifts into a hidden agent-only workflow.

Key features

  • Route-aware list_ui_actions manifest covering every meaningful control
  • Shared human/agent form with visible field, category, reset, and filing updates
  • Public evidence-photo attachment by URL or human file upload
  • Bengaluru locality or coordinate lookup to a GBA ward and corporation
  • Issue classification across flooding, water, lakes, works, encroachment, footpaths, lights, waste, and other
  • Duplicate-aware voice filing and community support
  • Shared MapLibre pin selection and focus
  • Related civic-record discovery with bundled OpenCity/news data and optional Firecrawl refresh
  • WebMCP readiness indicator and on-page agent activity trail
  • /llms.txt, a public UI-to-tool coverage matrix, and reproducible judge instructions

How we built it

Nagara exposes 19 structured WebMCP tools on every route. list_ui_actions gives an agent a route-aware manifest of meaningful controls. set_draft, select_category, classify_issue, resolve_ward, use_current_location, and file_voice form a complete filing workflow. focus_voice and support_voice preserve shared follow-up. list_related_tenders, refresh_tenders, and enrich_source connect the selected voice to public information. Each mutation returns explicit stateChanges and updates the visible UI and activity log.

The implementation uses JSON Schema enums and URI formats, readOnlyHint, untrustedContentHint, titled tools, structured error results, and AbortSignal-based lifecycle cleanup. Unsupported browsers retain the full human workflow.

  • Next.js 16 / React 19 / TypeScript: public application and route handlers
  • WebMCP bridge: lifecycle-safe document.modelContext.registerTool registrations with titled tools and structured schemas
  • Tool registry: 19 descriptors plus route-aware UI mappings and a single execution dispatcher
  • Voice command layer: one command surface used by both React controls and WebMCP tools
  • MapLibre GL: shared geospatial map and focused pins
  • UploadThing: optional public evidence-photo hosting
  • Firecrawl: optional refresh/enrichment of allowlisted civic sources
  • Local-first state: browser persistence keeps the public demo usable without an account or backend setup

How we used Codex

Codex was used as an engineering partner to inspect the existing Next.js application, fetch the current WebMCP and Next.js documentation, audit every visible interaction, implement the missing semantic tools, refactor the shared state provider for React 19, add lifecycle-safe tool registration, write judge-facing documentation and tests, and exercise the resulting tools from the Codex in-app browser. The browser verification caught an intentional-unregistration promise rejection that ordinary unit tests did not; the registration wrapper was then fixed and rechecked against a production build with a clean browser console.

Testing instructions

  1. Open https://nagara-webmcp.vercel.app/create in ChatGPT's or Codex's in-app browser.
  2. Confirm the page displays WebMCP ready.
  3. Call list_ui_actions; it should return 10 mapped interaction groups for /create.
  4. Call get_workspace_state to inspect the same selected voice and form visible on screen.
  5. Call set_draft with areaName: "HSR Layout", a factual title, a short body, and any public image URL in photoUrl. Watch the form fill.
  6. Call select_category { "category": "flooding" }, then resolve_ward { "areaName": "HSR Layout" }.
  7. Call file_voice. A new pin should appear, become selected, and show a timeline and related records.
  8. Call focus_voice or support_voice with a returned voice ID. The same visible pin/rail should update.
  9. Call clear_draft; the visible filing form should reset.

No account or credentials are required. Optional live UploadThing and Firecrawl paths have bundled/local fallbacks, so the core WebMCP demo remains judge-testable.

Product screenshots

Bengaluru landing experience

Nagara landing experience

Shared civic overview

Nagara shared Bengaluru civic overview

Filing workspace, live map, and public records

Nagara filing workspace with map and public records

Known limitations and next steps

  • Voice data persists in the current browser rather than a shared production database
  • Ward lookup is a focused demo dataset of Bengaluru localities, not a complete authoritative city GIS
  • Live UploadThing and Firecrawl behavior depends on deployment credentials; core filing and bundled records continue to work without them
  • get_link_target returns external URLs for deliberate agent navigation instead of forcing a popup or navigating away from the active tool context

Next we would add a shared production database, expand ward resolution against authoritative Bengaluru GIS data, provide moderation and provenance workflows for evidence, and deepen civic-record matching across budgets, tenders, work orders, and service-level commitments.

Try it

Live app: https://nagara-webmcp.vercel.app/

Source: https://github.com/perfect7613/nagara-webmcp

Demo video: https://drive.google.com/drive/folders/1d6CDT6Ks_Jx9Z-tvACH4L2WMHQ-2cQPj?usp=sharing

Built With

Share this project:

Updates

Submission history