Grid — Spreadsheets with your agent

Inspiration

Most “AI for spreadsheets” still lives in a chat sidebar or a separate Sheets API. You describe a budget; you get a table pasted back into the thread — not co-editing the grid you’re staring at.

Google Sheets has Gemini-style help and backend MCP connectors, but the live sheets.google.com page is not exposing WebMCP tools on the open workbook. That gap is the point of the challenge: shared client state.

Grid was inspired by that white space — and by Flavio’s note that spreadsheets are strong WebMCP cases because the open page holds state a remote API may not. What if ChatGPT and a human shared one workbook, with the agent writing cells, formulas, sorts, charts, and highlights you watch appear live?

What it does

Grid is an agent-native shared spreadsheet:

Co-edit a seeded “Move budget — London” workbook toward a £4k total
Read and write ranges, set formulas (=SUM, arithmetic), sort and filter rows
Highlight cells, add/remove a simple chart, insert rows/cols, export CSV
Full human UI (formula bar, selection, editable cells) that works with WebMCP idle
17 WebMCP site tools on the same Zustand store as your clicks
Agent tools panel + activity feed; ?demo=1 (optional delay / delayMs) for judges and screencasts

You steer in plain English in ChatGPT; Grid’s tools update the open grid in real time. Side effects like export_csv, clear_highlights, and remove_chart are annotated so confirmation policies can apply.

How we built it

Vite + React 19 + TypeScript SPA (base: '/grid-webmcp/')
Zustand as the single source of truth for the React UI and every WebMCP execute handler
WebMCP via document.modelContext.registerTool (with navigator.modelContext fallback), feature-detected on the top-level page
Lightweight formula evaluation, SVG chart panel, filter/highlight overlays
MIT-licensed, client-only, no backend or secrets — GitHub Pages
Built with Codex

Core tools: get_workbook_state, get_range, set_cells, set_formula, clear_range, select_range, sort_range, filter_rows, clear_filter, highlight_cells, clear_highlights, add_chart, remove_chart, insert_rows, insert_cols, export_csv, list_activity.

Challenges we ran into

Same-state collaboration — agent tools and keyboard edits must never drift. Both paths go through one store.
Formulas without a full engine — enough SUM + arithmetic for a credible budget demo, without shipping Excel.
Read vs write vs side effect — inspection tools stay read-only; clears, chart removal, and CSV export are explicit side effects.
Demo without a live agent — ?demo=1 replays the happy path for screencasts while real tools still register for ChatGPT’s in-app browser.
Staying distinct — orthogonal to Nest (flats), Frame (canvas), Brief (evidence), and Redline (propose ≠ commit).

Accomplishments that we're proud of

A complete co-edit loop on one grid: fill → formula → sort → chart → highlight → export
Non-trivial WebMCP surface (17 tools), not a single toy cell writer
Human-first UI that stays usable if WebMCP is missing
A fifth submission that targets a category often confused with “Sheets already does AI” — and shows the difference is tools on the open page

What we learned

WebMCP’s superpower is co-presence. Spreadsheets prove it cleanly: when set_formula runs, you watch the contingency cell resolve; when add_chart runs, the bar appears beside the sheet. That shared visual ground is harder to fake with a headless Sheets API MCP — and it’s exactly what Grid is for.