SynapTable

Inspiration

SynapTable began with a problem my girlfriend encountered as a medical student. She regularly creates concept maps to understand how ideas relate and tables to compare dense information, but her workflow required constantly moving between ChatGPT and Google Docs—copying responses, rebuilding tables, and manually turning explanations into visual structures.

One day, she complained that the generated table and concept-map experience did not match what she actually needed. The AI could suggest an organization, but it could not work directly inside the editable workspace where she was studying. That conversation gave me the idea for SynapTable: a visual canvas where people can think freely, organize concepts into tables, and move between both formats without leaving the workspace.

WebMCP made the next step possible. Instead of building another isolated chatbot, I could introduce an AI copilot that operates through bounded, transparent tools inside the same canvas. The person remains in control while the agent helps transform ideas into useful, editable structure.

What it does

SynapTable is a local-first visual thinking canvas with connected concepts, rich notes, images, semantic tables, multi-project persistence, undo/redo, and exports.

Its WebMCP integration exposes six bounded tools:

Get a privacy-minimized workspace summary. Find visible layers by name and kind. Create a concept. Create a structured table. Organize explicit canvas layers into table rows. Create canvas concepts from explicit table rows.

Agent changes appear directly on the same canvas used by the person. They remain visible, editable, reversible, and persisted in IndexedDB.

Why WebMCP

The useful context already lives in the web interface: spatial layout, connected concepts, and structured tables. WebMCP lets an agent collaborate through precise product actions instead of scraping the DOM or returning instructions the user must perform manually.

A person can brainstorm freely, ask an agent to structure visible ideas, inspect and edit the result, undo it as one operation, and continue using normal canvas controls.

How we built it

The human UI and WebMCP adapter share a typed editor-command facade. Every mutation validates the active project and expected revision, creates one undo entry, persists before returning success, and rolls back on failure or cancellation.

The six tools use closed JSON Schemas with generated CSP-safe validators, typed errors, a 1,500-byte output budget, cancellation handling, remount protection, and untrusted-content annotations. Hidden and locked layers cannot be mutated through WebMCP. Table discovery exposes dimensions and header status without exposing cell contents.

The integration is progressive enhancement: the normal editor works when document.modelContext is unavailable. The approved Cloudflare preview enables WebMCP on the same origin and returns Permissions-Policy: tools=(self) with restrictive CSP and cross-origin headers.

What we added during the challenge

SynapTable existed before the challenge. During the submission period we added the WebMCP command facade, six tools, schemas and generated validators, lifecycle and cancellation controls, project/revision guards, content budgets, persistence-before-success, same-origin policy headers, native browser validation, and public index-based table-row conversion. We also expanded regression, security, accessibility, and cross-browser coverage.

Validation

The audit passed 173 unit/integration tests and 234 applicable production-browser tests across Chromium, Firefox, and WebKit. The native Codex in-app browser completed all six tools on the public Cloudflare origin. It created a concept, found it, organized it into a table, created a second table, converted two rows into concepts, and preserved the resulting eight-layer workspace after reload.

No account is required. Open the live URL in ChatGPT's in-app browser or Chrome with WebMCP enabled. Ask the agent to summarize the workspace, create concepts, find them, organize them into a table, create another table, and convert data rows back into canvas nodes.

Challenges and learning

The hardest parts were maintaining one consistent mutation boundary for humans and agents, handling stale revisions without partial writes, making strict schemas work under CSP, and validating the experimental native API rather than relying only on mocks.

We learned that agent-facing product design works best when tools describe user-visible capabilities instead of mirroring internal data structures. Small schemas, explicit revisions, reversible commands, and minimized outputs make human-agent collaboration easier to understand and safer to debug.

What's next

The next phase is a purpose-built study copilot—not a generic chat sidebar. Students could attach their own lecture notes, slides, PDFs, and approved references, then ask SynapTable to propose concept maps, comparison tables, study guides, and missing connections. Every generated claim should remain traceable to its source. Agent changes would follow a propose → preview → approve flow and continue through SynapTable's bounded WebMCP commands, so the result is visible, editable, reversible, and never silently written to the canvas.

Near term: the Study Copilot

I plan to explore Google Agent Development Kit (ADK) to orchestrate focused study workflows: a structure assistant that turns material into maps and tables, an evidence assistant that preserves citations and flags unsupported claims, and a review coach that finds knowledge gaps and suggests what to revisit. AG-UI could stream progress, tool activity, state changes, approvals, and cancellation between that agent backend and SynapTable. A2UI could provide safe, declarative controls for tasks such as choosing comparison criteria, resolving ambiguous concepts, confirming a table schema, or configuring a quiz—without executing arbitrary agent-generated UI code.

Next: structured study knowledge

SynapTable could add previewable actions such as “organize these concepts,” “cluster by body system,” “compare these conditions,” and “summarize this branch.” Tables could gradually gain typed study properties, tags, filters, and reusable views—for example topic, source, confidence, exam date, and review status—without turning the free-form canvas into a spreadsheet.

An optional user-controlled database could add authenticated cross-device sync, version history, source provenance, reusable course workspaces, and study-group collaboration while preserving a local-first/offline mode. Shared maps could support comments and instructor or peer review, with clear ownership and permissions for every project.

Later: move from organizing to remembering

Students could turn selected concept nodes or table rows into editable flashcards that stay linked to the original map and source. SynapTable could then build review queues, surface weak areas visually, and let a learner jump from a missed card back to the surrounding concept map. Cloze cards and image-occlusion review would be especially useful for anatomy and other visually dense subjects.

The longer-term goal is a learning workspace where trusted source material, visual understanding, structured comparison, and active recall reinforce one another. These capabilities would support education and study; SynapTable would not present them as clinical diagnosis, patient-care guidance, or medical advice.

Built With

• cloudflare-workers
• indexeddb
• playwright
• react
• react-flow
• tiptap
• typescript
• vinext
• vitest
• webmcp