GPT Chat Nav Pro Chrome Web Store

Updates:

• I have not been maintaining this tool since its inception.
• Since building this tool, ChatGPT has introduced its own branching feature. While this reduces the tool’s practical necessity, it was validating to see a concept I independently developed reflected in a mainstream product.

High-Level Overview of the Project:

The project is a Google Chrome extension designed to enhance the way users organize and interact with ChatGPT conversations by using a graphical node-based interface. The tool allows users to visualize conversations as nodes in a flow diagram, manage them through a side panel, and interact with them contextually via right-click menus. It leverages React for the frontend interface and Chrome APIs for background operations, storage, and messaging. The primary focus of the project is to improve productivity by allowing users to structure complex conversations, create branches from discussions, and easily navigate between chats in a visually intuitive manner.

Chrome Aspect of the Project:

• The chrome portion operates as a bridge between the user’s browser activity (primarily in ChatGPT) and a background script in the Chrome extension, maintaining the state of nodes and their associated data across different browser tabs. Using context menus, mutation observers, and Chrome's messaging API, it reacts dynamically to changes in the browser's DOM to perform various actions, such as capturing selected text or opening new chats.

React Aspect of the Project:

• The React portion of this project represents the user interface (UI) component of the browser extension, allowing users to interact with a graphical interface that organizes, displays, and manages nodes and conversations retrieved from ChatGPT. The extension’s React frontend allows users to navigate between different "node spaces" (essentially different workspaces or threads), visualize the relationships between nodes, and manage these nodes through actions like renaming, deleting, or creating new branches.
• The core functionality is built around React and React Flow, a library that facilitates building and managing node-based diagrams. The React app interacts closely with the Chrome Extension background script via message passing, and it uses various hooks, state management patterns, and event listeners to provide a responsive and dynamic user experience.

More information on the software aspect of the project can be found here.

Personal Goals

• Learn New Technologies: A primary focus was learning and applying React
• Software Skills Development: To gain experience in managing the full software development lifecycle, including frontend and backend development, debugging, and deployment.
• Challenge: Challenge myself to articulate, conceptualize, plan, and execute a project from start to finish within a reasonable timeframe, all of my own design.

More information on how the project was managed and my thoughts throughout it can be found here.

Tool Purpose: