RelayGrid

Inspiration

Enterprise teams spend too much time constructing nested filters, checking why records were selected, and safely applying repetitive actions across dense operational tables. Natural-language filtering alone does not solve the risky part: understanding the interpretation, reviewing the impact, and reversing a mistake.

What it does

RelayGrid turns a natural-language goal into a visible, deterministic query tree over 7,500 synthetic radiology records. It shows the matching records and explains why each one matched. Stage-aware actions are processed in visible batches of at most 50 records: Preview separates permitted and protected records, explicit confirmation executes the saved plan, every action is audited, and the latest batch can be undone. Unsupported or out-of-order requests are rejected without changing data.

Why WebMCP is essential

RelayGrid exposes six high-level tools directly from the active page instead of asking an agent to scrape the DOM or guess which controls to click. WebMCP publishes the grid's real fields, supported operators, input schemas, and live context. ChatGPT constructs a schema-grounded Query AST; WebMCP invokes the requested tool; RelayGrid validates and evaluates it deterministically. The tools and the human interface share the same active query, Preview plan, workflow stage, status colors, and audit history, so every agent action is immediately visible and reviewable.

The tools are:

• describe_grid
• apply_query
• explain_record
• preview_batch_action
• execute_batch_action
• undo_last_batch

How we built it

The page registers imperative tools with document.modelContext.registerTool(). A canonical JSON AST supports nested AND, OR, and NOT groups, comparisons, dates, Boolean values, enums, and sorting. A deterministic query engine validates and evaluates the AST against the full dataset. A shared transition engine powers both non-mutating Preview and confirmed Execute, while a workflow state machine exposes only context-valid operations and returns precise errors for invalid stages.

The interface is built with React, TypeScript, Next.js, and Tailwind CSS. The public app is hosted with OpenAI Sites, and the complete MIT-licensed source is available on GitHub.

Challenges we ran into

The hardest part was making natural-language intent safe without hiding the interpretation. We separated the agent's structured intent from the application's deterministic matching logic, then added stale-preview protection so execution can only use the exact reviewed plan. We also had to keep filtering global while limiting mutations to the current visible batch, preserve the active query as the next eligible batch loads, and make every scenario reset to a reproducible state.

Accomplishments

• Non-trivial nested filtering over a realistic enterprise dataset
• Shared state between WebMCP tools and the visible grid
• Record-level explainability
• Preview, policy exceptions, confirmation, audit, and undo
• Safe 50-record batch progression
• Stage-aware command gating and a visible invalid-input test
• Four guided judge scenarios with exact prompts and expected outcomes
• Native Chrome WebMCP verification of all six tools against the published site

What we learned

WebMCP is most valuable when a page exposes domain capabilities and safety contracts, not low-level UI gestures. A strong tool result should update the same state the human sees and leave enough evidence to verify, approve, or reverse the operation.

How to test

Open the live app and follow the sticky Judge Demo Guide. The Main scenario covers Filter, Verify, Preview, Confirm, Next batch, and Undo. Additional tabs demonstrate Review to Approve, Cancel to Undo, and invalid-input rejection. The repository includes exact judge instructions and verified QA results.

All records are synthetic. No GitHub account, deploy key, access token, or project credential is required.

What's next

The same schema and action engine can support insurance claims, inventory exceptions, CRM worklists, and ERP approvals without building a separate copilot for every application.

Built With

• openai
• tailwind
• webmcp