Synapse

A living 3D spatial knowledge graph where humans and AI agents co-navigate, synthesize learning paths, and index documents via WebMCP.

Comment

💡 Inspiration

Modern knowledge management tools (like Obsidian or Notion) store thoughts as flat text or 2D lists. However, human memory and creative synthesis operate spatially and associationally. We created Synapse to explore the future of spatial computing on the open web—a living 3D spatial knowledge void where humans and AI agents can co-navigate, synthesize learning paths, and build complex ideas together in real-time using WebMCP.

🚀 What it does

Synapse transforms notes into reflective 3D metallic nodes suspended in a dynamic spatial void. Nodes are semantically positioned using vector similarity and force-directed layout physics.

Through WebMCP (document.modelContext), an AI Agent becomes an active 3D co-pilot:

  • Spatial Navigation: The agent smoothly flies the 3D camera to focus on relevant node clusters.
  • Learning Path Synthesis: Uses graph BFS algorithms to calculate and highlight the shortest conceptual bridge between 2 distant ideas.
  • Topological Cluster Analysis: Detects isolated thought islands and tag density to help users organize scattered notes.
  • Document Chunking & Indexing: Automatically breaks down dropped PDFs, Markdown, or web text into 3D nodes linked by semantic similarity.
  • Full CRUD & Persistence: Enables real-time editing, node merging, pruning, auto-saving to local storage, and JSON exports.

🛠️ How we built it

  • 3D Graphics & Physics: Built with Three.js using custom metallic shaders, organic bobbing motion, and glowing neural energy particle beads traveling along active connections.
  • WebMCP Standard (document.modelContext): Implemented 15 imperative tools using the official @mcp-b/webmcp-polyfill and native W3C WebMCP specification.
  • Shared State Architecture: Built around a central store (SynapseStore) that handles physics, layout math, and event broadcasts. Both manual user clicks and agent tool calls flow through the same store methods, guaranteeing seamless synchronization between human actions and agent navigation.
  • Zero API Dependencies: 100% standalone, client-side, zero backend API keys required, compatible with any WebMCP client (Chrome Native AI, Claude Extension, ChatGPT Extension, or local demo dock).

🧠 WebMCP Implementation (15 Registered Tools)

Synapse registers 15 WebMCP tools via document.modelContext.registerTool:

  1. search_nodes: Text & tag search with 3D camera cluster focusing.
  2. focus_node: Smooth 3D camera flight to select and inspect a node.
  3. get_similar_nodes: Vector similarity search returning nearest semantic neighbors.
  4. suggest_connections: AI-surfaced unlinked concept pairs rendered as 3D gold lines.
  5. get_graph_overview: Overview of node/edge metrics, top tags, and focus.
  6. create_node: Real-time creation and 3D positioning of new notes.
  7. import_document: Auto-chunking & 3D indexing of markdown/PDF text.
  8. synthesize_path: BFS shortest-path algorithm connecting distant 3D concepts.
  9. auto_cluster_analysis: Topological analysis detecting isolated thought islands.
  10. export_knowledge_graph: Full JSON graph serialization for backup.
  11. delete_node: Deletes a node and auto-prunes attached 3D edges.
  12. edit_node: Edits title, content, or tags of any node in real-time.
  13. merge_nodes: Merges two nodes into one, concatenating content & inheriting edges.
  14. add_connection: Manually connects two nodes with a 3D metallic beam.
  15. reset_graph: Clears all nodes & connections for a fresh 100% blank canvas.

🏋️ Challenges we faced

  • 3D Shared State Synchronization: Ensuring camera flights and node highlighting responded smoothly whether triggered by a human mouse click or an asynchronous WebMCP tool call.
  • WebMCP Spec Compatibility: Handling parameter passing formats across native Chrome flags and browser polyfill implementations.
  • Real-Time Physics & Performance: Rendering hundreds of ghost background connections and neural energy beads at 60 FPS in pure Vanilla JS.

🏆 Accomplishments that we're proud of

  • Delivering a complete, end-to-end product experience—not just a proof of concept.
  • Building a stateful 3D spatial brain with 15 non-trivial WebMCP tools that work 100% offline with zero external API key requirements.
  • Creating a visually stunning, glassmorphic UI with animated light pulses and dynamic 3D physics.

📚 What we learned

We gained deep insights into the power of the W3C WebMCP standard—how exposing imperative tools via document.modelContext fundamentally transforms web applications from passive static pages into active collaborative spaces for AI agents.

Built With

Share this project:

Updates

Submission history