Synapse

Synapse - Give your web a brain boost.

Inspiration

Have you ever felt like you're drowning in a sea of open tabs? Whether you're planning a trip, researching a new gadget, or studying for an exam, you're constantly jumping between websites, articles, and reviews. It's easy to save links, but connecting all those scattered pieces of information into something truly useful is tough.

We noticed that most tools out there are either too simple—like basic bookmarking—or they're cloud-based services that make you worry about your privacy and often come with a monthly fee.

When Google introduced powerful AI that could run directly inside the Chrome browser, we saw a golden opportunity. We were inspired to create a "second brain" that does more than just save things. We wanted a tool that actively helps you connect the dots between what you read, creating a personal web of knowledge. Our goal was to build a smart, completely private, and easy-to-use system that works right where you are: your browser.

What it does

Synapse is a Chrome Extension that transforms web browsing into a knowledge-building experience. At its core, it allows users to:

Capture & Analyze: Instantly capture any web page. Synapse uses on-device AI to automatically generate a concise summary and extract structured key-value data from the content.
Refine Through Conversation: Engage in an iterative chat with the AI to refine summaries, adjust structured data, and extract additional insights—all through natural conversation.
Build a Knowledge Graph: Every captured page becomes a node in a personal knowledge graph. Synapse automatically creates links between nodes that share common entities (e.g., the same author, product spec, or topic).
Visualize Connections: The graph is rendered using a dynamic, force-directed layout, offering multiple perspectives to explore the data:
- Note View: A classic view of notes and their direct relationships.
- Value View: A powerful mode that pivots the graph around shared data points (e.g., "16GB RAM"), instantly revealing all notes that contain that value.
- AI Cluster View: An AI-powered view that automatically groups related nodes (like research papers) into thematic clusters, helping to identify trends and research fronts.
Process Information Privately: All AI processing, from summarization to translation, happens entirely on-device via the Chrome Built-in AI APIs. This ensures absolute user privacy, offline functionality, and zero server costs.

How we built it

Synapse is built as a Manifest V3 Chrome Extension with a modern web stack.

Architecture: The extension consists of a side panel UI, a content script for page extraction, and a background service worker.
Frontend & UI: The side panel is built with React and TypeScript, bundled with Vite. We used Tailwind CSS for rapid, utility-first styling.
AI Core: We heavily utilized the Chrome Built-in AI APIs:
- The Prompt API (window.ai.languageModel) is the workhorse for summarization and structured data extraction. We engineered specific prompts to guide Gemini Nano in parsing different types of content. Critically, we leveraged its multimodal capabilities to process images alongside text, allowing the AI to gain visual context from page screenshots and product images, significantly enhancing understanding of visually-rich content like e-commerce pages or academic papers with diagrams.
- The Translator API (window.ai.translator) enables the system to process and understand content from non-English web pages, broadening its utility.
- The Language Detector API (window.ai.languageDetector) helps our application understand the page content and provide the Translator API with proper metadata.
Data Persistence: All user data (nodes, links, metadata) is stored locally in the browser using IndexedDB, managed via the Dexie.js library. This ensures data persistence and fast, offline access.
Graph Visualization: The knowledge graph is powered by D3.js. To ensure high performance even with hundreds of nodes, we render the graph on an HTML <canvas> element instead of SVG. The physics simulation (d3-force) and rendering loop are managed within custom React hooks for clean integration.

Challenges we ran into

Performant Graph Rendering: Our initial SVG-based graph suffered from performance degradation as the number of nodes grew. Migrating the entire rendering logic to the HTML Canvas API was a significant challenge. This involved manually handling node/link drawing, hit detection for clicks, and scaling the canvas for high-DPI (Retina) displays to maintain crisp visuals.
Processing Extremely Long Web Pages: A critical challenge emerged when handling lengthy content like academic papers or long-form articles. The Chrome Built-in AI has token limits that can't process an entire page in one shot. We solved this by developing an incremental chunking and processing pipeline in our CondenseService. The system intelligently splits content into chunks of approximately 6,000 characters, processes each chunk iteratively while maintaining context across chunks, and builds up a condensed summary incrementally. This "walking through" approach allows us to handle content of any size without hitting token limits, while preserving all essential information through a structured summary that evolves with each chunk.
Multimodal Image Processing: Integrating visual context into the AI pipeline presented unique challenges. We had to carefully manage image extraction, format validation (PNG/JPEG only), and optimal placement within the session lifecycle. Images are appended to the AI session after content condensing but before summarization, ensuring the model has both textual and visual context. We also implemented a 5-image limit per page to balance comprehensive visual understanding with token efficiency, and developed robust error handling for various image URL schemes (data URLs, HTTP/HTTPS, blob URLs).
State Management between UI and D3: Synchronizing the state between the React UI and the D3 simulation, which operates outside the React lifecycle, was complex. We developed a system of custom hooks and callbacks to ensure that data updates from the database or user interactions were correctly reflected in the D3 simulation without causing race conditions or unnecessary re-renders.
Asynchronous AI & UI Feedback: The AI APIs are asynchronous. A key challenge was providing immediate and meaningful feedback to the user during processing (e.g., the "AI analyzing..." progress bar). We implemented a state machine to manage the capture lifecycle and used requestAnimationFrame to create smooth, simulated progress animations when real progress data wasn't available, enhancing perceived performance.

Accomplishments that we're proud of

A Truly Private "Second Brain": We successfully realized our vision of a useful AI tool that requires zero network requests for its core functionality. Proving that powerful, privacy-preserving AI is not just a concept but a practical reality is our biggest accomplishment.
Multimodal AI Processing On-Device: We successfully implemented end-to-end multimodal AI processing that combines text and images entirely on the user's device. By extracting page images, validating formats, and feeding them to Gemini Nano alongside text content, we enable the AI to "see" product photos, diagrams, and screenshots—all without sending any data to external servers. This represents one of the first practical applications of Chrome's multimodal Prompt API in a real-world extension.
The Multi-View Graph: We are particularly proud of the different graph perspectives. The "Value View" is a unique feature that provides genuine utility for comparison tasks, and the "AI Cluster View" successfully demonstrates the power of on-device AI for unsupervised content analysis.
High-Performance Canvas Rendering: Successfully implementing a smooth, interactive, and high-resolution D3 graph on a canvas that can handle a large volume of nodes is a significant technical accomplishment.

What we learned

This project was a deep dive into the capabilities and nuances of client-side AI. We learned how to effectively prompt Gemini Nano to achieve consistent, structured output for different domains (e.g., e-commerce vs. academic papers). We also gained significant experience in performance optimization for data visualization. This included learning the trade-offs between SVG and Canvas firsthand. Finally, building a complex, stateful application as a Chrome Extension reinforced our understanding of browser architecture and data persistence strategies.

What's next for Synapse

The current version of Synapse lays a strong foundation. We see several exciting paths forward:

Enhanced Multimodal Capabilities: Expand image processing to support more formats (WebP, GIF), increase the image limit for visually-dense pages, and implement intelligent image selection algorithms to prioritize the most informative visuals (e.g., diagrams over decorative elements).
Advanced Querying: Implement a natural language search/query interface that allows users to ask complex questions about their entire knowledge graph (e.g., "Show me all papers by author X related to diffusion models").
Inter-note Chat: Allow the AI to reason across multiple selected nodes, enabling users to synthesize information from different sources in a conversational manner.
Collaboration & Sharing: Explore privacy-preserving ways for users to share or export parts of their knowledge graphs with others.