gpt_chrome_autodrafter_v3/PLUSVIBE_SETUP.md

Plusvibe/Pipl.ai Integration Setup Guide

Overview

Your Auto-Draft extension now supports Plusvibe/Pipl.ai's Unibox! The extension automatically detects when you're on Pipl.ai and provides the same auto-draft functionality as Gmail and Instantly.

Key Features

• Automatic Platform Detection: Extension recognizes when you're on app.pipl.ai
• Smart DOM Extraction: Works without API key by extracting messages from the page
• API Support (Optional): Enhanced extraction with Plusvibe API key if available
• Familiar UI: Same green/gold interface as Gmail and Instantly

Installation & Setup

1. Basic Setup (No API Key Required)

1. Reload the Extension

   • Go to chrome://extensions/
   • Find your Auto-Draft extension
   • Click the refresh icon

2. Navigate to Plusvibe

   • Go to https://app.pipl.ai/v2/unibox/inbox/
   • Open any conversation

3. Use the Extension

   • Click on the reply/compose area
   • The Auto-Draft UI should appear in the bottom-right corner
   • Or click the extension icon to toggle the UI

2. Enhanced Setup with API Key (Optional)

If you have a Plusvibe API key:

1. Open Extension Options

   • Right-click the extension icon
   • Select "Options"

2. Configure API Settings

   • Scroll to "Plusvibe/Pipl.ai API Configuration"
   • Enter your API key
   • Optionally adjust the API base URL
   • Click "Save Settings"

3. Benefits of API Access

   • More accurate thread extraction
   • Faster message retrieval
   • Better handling of complex threads

How It Works

Message Extraction Methods

1. DOM Extraction (Default)

The extension searches for messages using multiple selectors:

• .message, .email-message, .thread-message
• .conversation-message, [data-message]
• .pipl-message, .plusvibe-message, .unibox-message

2. API Extraction (With API Key)

If configured, the extension will:

• Use your API key to fetch thread messages
• Fall back to DOM extraction if API fails
• Provide more structured data

Reply Box Detection

The extension looks for:

• div[contenteditable="true"]
• textarea elements
• .reply-box, .compose-box, .message-input
• [role="textbox"]

Troubleshooting

UI Doesn't Appear

1. Check Console for Errors

   • Open DevTools (F12)
   • Look for "Plusvibe platform detected" message
   • Check for any red errors

2. Verify URL

   • Ensure you're on app.pipl.ai
   • The path should include /unibox or /inbox

3. Manual Toggle

   • Click the extension icon to manually show/hide UI

Messages Not Extracted

1. Inspect Page Structure

   • Right-click on a message
   • Select "Inspect"
   • Note the class names and structure
   • Report if different from expected selectors

2. Check API Configuration

   • If using API key, verify it's correct
   • Check network tab for API errors

Draft Not Inserting

1. Find Reply Box

   • Console should show "Found Plusvibe reply box"
   • If not, the reply box selector may need updating

2. Check for Errors

   • Look for "Failed to insert draft" errors
   • May need to trigger additional events for some frameworks

API Configuration

Setting Up API Access

// In plusvibe_extractor.js
apiConfig: {
  apiKey: null, // Set from storage
  baseUrl: 'https://app.pipl.ai/api/v2',
  endpoints: {
    threads: '/threads',
    messages: '/messages',
    conversations: '/conversations'
  }
}

API Response Format

The extension expects API responses in this format:

{
  "messages": [
    {
      "from": "sender@email.com",
      "sender_name": "Sender Name",
      "timestamp": "2024-01-01T12:00:00Z",
      "content": "Message content",
      "subject": "Email subject"
    }
  ]
}

Development & Debugging

Enable Verbose Logging

Open console and run:

window.PLUSVIBE_DEBUG = true;

Test Extraction

// Test thread extraction
PlusvibeExtractor.extractThreadMessages().then(console.log);

// Test reply box detection
console.log(PlusvibeExtractor.findReplyBox());

Report Issues

If the extension doesn't work properly:

1. Note the exact URL
2. Take a screenshot of the page structure
3. Copy any console errors
4. Check which selectors failed

Privacy & Security

• API keys are stored locally in Chrome storage
• No data is sent to external servers (except OpenAI for drafts)
• DOM extraction happens entirely in your browser

Next Steps

• Test the extension on Plusvibe
• Configure API key if available
• Report any selector mismatches for updates