Citizen's Easy (CZE)

Inspiration

Every citizen knows the frustration of interacting with public service portals. Even in modern digital states like Thailand—where identity infrastructure such as ThaID has made remarkable progress in digital authentication—citizens still find themselves trapped in "form purgatory." Logging in is no longer the hardest step; what comes after authentication is the bottleneck. A citizen wanting to update a mailing address or register for a local municipal permit still has to manually navigate complex service directories, decipher bureaucratic jargon, and re-type 15 to 30 redundant fields (name, national identification number, sub-district, district, postal code, and contact information) over and over again for every different agency. When we discovered the WebMCP standard, a realization hit us: the web does not need another government portal or chatbot widget; the web needs to become machine-actionable. We asked ourselves: "What if citizens never had to fill out another public form? What if they could simply state their goal, and an AI agent collaborated with the browser to do the tedious mechanical work—while keeping the human fully in control and preserving strict data privacy?" That question gave birth to Citizen's Easy (CZE).

What it does

CZE shifts the citizen-web interaction paradigm from "Form-First" (human as manual typist) to "Intent-First" (human as supervisor and decision-maker). Natural Intent Expression: Instead of navigating complex drop-downs, the citizen states what they need in conversational language (e.g., "I just moved to Ideo Sukhumvit 40, Room 502/14. Please update my contact address for public correspondence."). Granular, Privacy-Preserving Consent: CZE does not dump personal data into an opaque LLM context. Through WebMCP tools, the agent analyzes the intent and prompts the user with a Least-Privilege Consent Dialog, requesting only the specific data fields required (e.g., verified_name and registered_address, strictly omitting tax IDs, biometric tokens, or family trees). Bidirectional WebMCP Orchestration: Once the human grants permission, the agent invokes client-side WebMCP tools: It retrieves the verified credentials from a ThaID-compatible sandbox identity provider. It parses the natural address into standard administrative hierarchy (Subdistrict, District, Province, Postal Code). It dynamically populates the living form in the DOM and visibly highlights modified sections with gold focal indicators so the citizen can track changes in real time. Validation & Human-in-the-Loop Submission: The agent runs client-side integrity checks (\text{Field Validation} = 100\%) and prepares the application summary. The final submission is locked until the human performs an explicit visual verification and clicks "Approve & Submit".

How we built it

We designed CZE to run natively within modern WebMCP-enabled environments (such as Google Chrome with WebMCP flags and the ChatGPT in-app browser). ┌─────────────────────────────────────────────────────────────┐ │ Citizen (Human User) │ │ Expresses Intent & Grants Consent │ └──────────────┬───────────────────────────────▲──────────────┘ │ │ Visual Feedback ▼ │ & Verification ┌──────────────────────────────────────────────┴──────────────┐ │ WebMCP Tool Registry Layer │ │ (document.modelContext.registerTool API) │ │ │ │ ├── request_citizen_consent() │ │ ├── get_verified_identity() │ │ ├── get_registered_address() │ │ ├── autofill_service_application() │ │ ├── validate_application_rules() │ │ └── submit_application() │ └──────────────┬───────────────────────────────▲──────────────┘ │ Execute Mutation │ Query State ┌──────────────▼───────────────────────────────┴──────────────┐ │ CZE Client Interface │ │ - React 19 & Tailwind CSS │ │ - ThaID Sandbox Identity Provider │ │ - Reactive Form State Manager with Visual Focus Cues │ │ - Deployed on Vercel / Cloudflare Pages │ └─────────────────────────────────────────────────────────────┘ Technical Stack: WebMCP Architecture: Registered 6 client-side tools using document.modelContext.registerTool() complying strictly with JSON Schema specifications for inputs and outputs. Frontend Application: Built with React and styled with Tailwind CSS, designed mobile-first with adaptive touch states. Identity Sandbox: Built a mock ThaID Identity & Consent Provider demonstrating how production digital identity tokens can safely interface with client-side agents without exposing unauthorized personal attributes. Deployment & Hosting: Hosted and optimized on Vercel with zero-latency edge delivery.

Challenges we ran into

Separating Identity from Intent (Privacy Boundary): The biggest challenge in combining AI agents with public services is privacy. Feeding raw citizen records into an LLM context window violates fundamental data minimization standards (\text{GDPR / PDPA}). We solved this by designing an intermediate Consent Handshake: the agent never queries the identity provider directly; it calls request_citizen_consent(), which renders a browser-native modal. The token is only released to the DOM once the human approves. Bidirectional State Sync without Jitter: Ensuring that tool execution results from the WebMCP runtime synced seamlessly with React's internal state without causing race conditions or layout flickers required crafting deterministic action reducers for the form manager. Deterministic Address Resolution: Thai administrative addresses consist of nested layers (Tambon, Amphoe, Changwat, Zipcode). When a user provides messy conversational text, mapping it accurately to official administrative data required a robust validation tool (validate_application_rules) that gives structured feedback back to both the agent and the human reviewer.

Accomplishments that we're proud of

True Human-Agent Co-Creation: We avoided the cliché of a standalone chat bubble. In CZE, the agent and the human share the same canvas—the agent fills, the human inspects, and the browser visually indicates every action. Measurable Efficiency Gain: We reduced the time required to complete a complex municipal change-of-address form from an average of T_{\text{manual}} \approx 12\text{ minutes} down to T_{\text{CZE}} \approx 35\text{ seconds}, representing a speedup efficiency factor of: while reducing manual keystroke errors to essentially zero. Full WebMCP Standard Adherence: Every single action on the page is exposed via clear, discoverable, and well-typed schemas using the native WebMCP browser specification.

What we learned

WebMCP is the missing bridge between APIs and User Interfaces: Traditional APIs connect servers to servers; UI connects servers to humans. WebMCP connects agents to interactive user interfaces, allowing the agent to operate within the exact security and permission context granted by the human in the browser. Agent UX requires "Visual Legibility": When an agent executes tools, users feel uneasy if changes occur invisibly in the background. Adding visible highlight rings, smooth scrolling to active fields, and progressive disclosure cards dramatically increased user trust and satisfaction

What's next for Citizen's Easy (CZE)

Expanding Beyond Address Changes: Integrating additional high-friction citizen workflows, such as business license renewals, child allowance subsidies, and elderly healthcare registrations. Official Digital ID Gateway Integration: Collaborating with standard digital identity sandboxes (such as Thailand's Department of Provincial Administration guidelines for ThaID Relying Parties) to establish an open-source standard for citizen-agent interaction. Multi-lingual & Voice Accessibility: Leveraging web speech recognition to enable elderly or visually impaired citizens to access public services entirely through spoken dialect, making public governance accessible to every single citizen regardless of tech literacy.

Built With

• agentic-web
• civic-tech
• css3
• digital-id
• government-tech
• html5
• human-in-the-loop
• javascript
• json-schema
• openai
• react
• tailwindcss
• thaid
• typescript
• vercel
• webmcp