Mapify

Mapify is a Chrome extension designed to enhance your experience with Large Language Model (LLM) chat interfaces. It adds a visual sidebar to your chat window, generating a dynamic mind map or tree view of your conversation structure, making it easier to navigate and understand long discussions.

Features

• Visual Outline: Automatically generates a Mind Map or Linear Tree view of your chat history.
• Multi-Platform Support: Seamlessly integrates with popular LLM platforms:
  • ChatGPT
  • Claude
  • Gemini
  • DeepSeek
  • Doubao
  • Kimi
  • Tongyi / Qwen
• Export Capabilities: Export your conversation structure as Markdown, JSON, or Image (PNG).
• Privacy & Security: Uses a local backend proxy to securely manage API keys, keeping your credentials safe.

Tech Stack

• Frontend: React (Preact), Vite, TypeScript, Tailwind CSS
• Visualization: React Flow, Dagre
• Backend: Node.js (Proxy Server)

Prerequisites

• Node.js (v16 or higher recommended)
• npm, yarn, or pnpm
• Google Chrome (or Chromium-based browser)

Getting Started

1. Clone the Repository

git clone https://github.com/your-username/Mapify.git
cd Mapify

2. Install Dependencies

npm install
# or
yarn install
# or
pnpm install

3. Backend Setup (Proxy Server)

The backend proxy is required to handle API requests securely.

1. Set up your environment variables. You can export them directly in your terminal or create a .env file (if supported by your setup, or manually modify the script).

   Linux/macOS:

   export OPENAI_API_KEY="your-api-key"
   # Optional:
   export OPENAI_BASE_URL="https://api.openai.com" # or your custom endpoint
   export PORT=8787

   Windows (PowerShell):

   $env:OPENAI_API_KEY="your-api-key"

2. Run the proxy server:

   node server/proxy.mjs

   The server will start at http://localhost:8787 by default.

4. Frontend Setup (Extension)

1. Start the development build process:

   npm run dev

   This command will compile the code and watch for changes. It generates a dist folder in the project root.

5. Load the Extension in Chrome

1. Open Chrome and navigate to chrome://extensions/.
2. Enable Developer mode in the top right corner.
3. Click Load unpacked.
4. Select the dist directory created in the previous step.

Usage

1. Ensure the backend proxy is running (node server/proxy.mjs).
2. Open a supported LLM website (e.g., chatgpt.com).
3. The Mapify sidebar should appear on the right side of the screen.
4. As you chat, the sidebar will update with a visual representation of your conversation.

Configuration

If you need to change the backend proxy URL (e.g., if you deploy the proxy to a remote server), update the DEFAULT_PROXY_BASE_URL in src/services/LLMService.ts:

const DEFAULT_PROXY_BASE_URL = 'http://localhost:8787' // Update this URL

Then rebuild the extension (npm run build or npm run dev).

License

MIT