Merge pull request #337 from drivecore/docs/system-browser-detection

bhouston · web-flow · commit db62e48dc449 · 2025-03-21T15:23:56.000-04:00
docs: add system browser detection documentation
diff --git a/packages/docs/docs/getting-started/linux.md b/packages/docs/docs/getting-started/linux.md
@@ -136,7 +136,7 @@ npx mycoder "Your prompt here"
 
 MyCoder can use a browser for research. On Linux:
 
-1. **Chromium/Chrome/Firefox**: MyCoder works with these browsers automatically
+1. **System Browser Detection**: MyCoder automatically detects and uses your installed browsers (Chrome, Chromium, Firefox)
 2. **Dependencies**: You may need to install additional dependencies for browser automation:
    ```bash
    # Ubuntu/Debian
@@ -146,6 +146,18 @@ MyCoder can use a browser for research. On Linux:
        libgtk-3-0 libgbm1
    ```
 3. **Headless Mode**: By default, browser windows are hidden (use `--headless false` to show them)
+4. **Browser Preferences**: You can configure which browser MyCoder should use in your configuration file:
+   ```javascript
+   // mycoder.config.js
+   export default {
+     browser: {
+       useSystemBrowsers: true,
+       preferredType: 'chromium', // or 'firefox'
+     }
+   };
+   ```
+
+For more details on browser detection and configuration, see [System Browser Detection](../usage/browser-detection.md).
 
 ## Troubleshooting
 
diff --git a/packages/docs/docs/getting-started/macos.md b/packages/docs/docs/getting-started/macos.md
@@ -152,9 +152,21 @@ npx mycoder "Your prompt here"
 
 MyCoder can use a browser for research. On macOS:
 
-1. **Chrome/Safari**: MyCoder works with both browsers automatically
+1. **System Browser Detection**: MyCoder automatically detects and uses your installed browsers (Chrome, Chrome Canary, Edge, Firefox, Firefox Developer Edition, Firefox Nightly)
 2. **First Run**: You may see a browser window open briefly when MyCoder is first run
 3. **Headless Mode**: By default, browser windows are hidden (use `--headless false` to show them)
+4. **Browser Preferences**: You can configure which browser MyCoder should use in your configuration file:
+   ```javascript
+   // mycoder.config.js
+   export default {
+     browser: {
+       useSystemBrowsers: true,
+       preferredType: 'chromium', // or 'firefox'
+     }
+   };
+   ```
+
+For more details on browser detection and configuration, see [System Browser Detection](../usage/browser-detection.md).
 
 ## Troubleshooting
 
diff --git a/packages/docs/docs/getting-started/windows.md b/packages/docs/docs/getting-started/windows.md
@@ -129,9 +129,21 @@ npx mycoder "Your prompt here"
 
 MyCoder can use a browser for research. On Windows:
 
-1. **Chrome/Edge**: MyCoder works with both browsers automatically
+1. **System Browser Detection**: MyCoder automatically detects and uses your installed browsers (Chrome, Edge, Firefox)
 2. **First Run**: You may see a browser window open briefly when MyCoder is first run
 3. **Headless Mode**: By default, browser windows are hidden (use `--headless false` to show them)
+4. **Browser Preferences**: You can configure which browser MyCoder should use in your configuration file:
+   ```javascript
+   // mycoder.config.js
+   export default {
+     browser: {
+       useSystemBrowsers: true,
+       preferredType: 'chromium', // or 'firefox'
+     }
+   };
+   ```
+
+For more details on browser detection and configuration, see [System Browser Detection](../usage/browser-detection.md).
 
 ## Troubleshooting
 
diff --git a/packages/docs/docs/usage/browser-detection.md b/packages/docs/docs/usage/browser-detection.md
@@ -0,0 +1,132 @@
+---
+sidebar_position: 7
+---
+
+# System Browser Detection
+
+MyCoder includes a system browser detection feature that allows it to use your existing installed browsers instead of requiring Playwright's bundled browsers. This is especially useful when MyCoder is installed globally via npm.
+
+## How It Works
+
+When you start a browser session in MyCoder, the system will:
+
+1. Detect available browsers on your system (Chrome, Edge, Firefox, etc.)
+2. Select the most appropriate browser based on your configuration preferences
+3. Launch the browser using Playwright's `executablePath` option
+4. Fall back to Playwright's bundled browsers if no system browser is found
+
+This process happens automatically and is designed to be seamless for the user.
+
+## Supported Browsers
+
+MyCoder can detect and use the following browsers:
+
+### Windows
+- Google Chrome
+- Microsoft Edge
+- Mozilla Firefox
+
+### macOS
+- Google Chrome
+- Google Chrome Canary
+- Microsoft Edge
+- Mozilla Firefox
+- Firefox Developer Edition
+- Firefox Nightly
+
+### Linux
+- Google Chrome
+- Chromium
+- Mozilla Firefox
+
+## Configuration Options
+
+You can customize the browser detection behavior in your `mycoder.config.js` file:
+
+```javascript
+// mycoder.config.js
+export default {
+  // Other settings...
+  
+  // System browser detection settings
+  browser: {
+    // Whether to use system browsers or Playwright's bundled browsers
+    useSystemBrowsers: true,
+
+    // Preferred browser type (chromium, firefox, webkit)
+    preferredType: 'chromium',
+
+    // Custom browser executable path (overrides automatic detection)
+    // executablePath: null, // e.g., '/path/to/chrome'
+  },
+};
+```
+
+### Configuration Options Explained
+
+| Option | Description | Default |
+|--------|-------------|---------|
+| `useSystemBrowsers` | Whether to use system-installed browsers if available | `true` |
+| `preferredType` | Preferred browser engine type (`chromium`, `firefox`, `webkit`) | `chromium` |
+| `executablePath` | Custom browser executable path (overrides automatic detection) | `null` |
+
+## Browser Selection Priority
+
+When selecting a browser, MyCoder follows this priority order:
+
+1. Custom executable path specified in `browser.executablePath` (if provided)
+2. System browser matching the preferred type specified in `browser.preferredType`
+3. Any available system browser
+4. Playwright's bundled browsers (fallback)
+
+## Troubleshooting
+
+If you encounter issues with browser detection:
+
+1. **Browser Not Found**: Ensure you have at least one supported browser installed on your system.
+
+2. **Browser Compatibility Issues**: Some websites may work better with specific browser types. Try changing the `preferredType` setting if you encounter compatibility issues.
+
+3. **Manual Override**: If automatic detection fails, you can manually specify the path to your browser using the `executablePath` option.
+
+4. **Fallback to Bundled Browsers**: If you prefer to use Playwright's bundled browsers, set `useSystemBrowsers` to `false`.
+
+## Examples
+
+### Using Chrome as the Preferred Browser
+
+```javascript
+// mycoder.config.js
+export default {
+  browser: {
+    useSystemBrowsers: true,
+    preferredType: 'chromium',
+  },
+};
+```
+
+### Using Firefox as the Preferred Browser
+
+```javascript
+// mycoder.config.js
+export default {
+  browser: {
+    useSystemBrowsers: true,
+    preferredType: 'firefox',
+  },
+};
+```
+
+### Specifying a Custom Browser Path
+
+```javascript
+// mycoder.config.js
+export default {
+  browser: {
+    useSystemBrowsers: true,
+    executablePath: 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe', // Windows example
+    // executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome', // macOS example
+    // executablePath: '/usr/bin/google-chrome', // Linux example
+  },
+};
+```
diff --git a/packages/docs/docs/usage/configuration.md b/packages/docs/docs/usage/configuration.md
@@ -87,6 +87,16 @@ export default {
 | `userSession` | Use existing browser session      | `true`, `false`                 | `false`  |
 | `pageFilter`  | Method to process webpage content | `simple`, `none`, `readability` | `simple` |
 
+#### System Browser Detection
+
+MyCoder can detect and use your system-installed browsers instead of requiring Playwright's bundled browsers. This is especially useful when MyCoder is installed globally via npm.
+
+| Option                    | Description                                      | Possible Values                | Default    |
+| ------------------------- | ------------------------------------------------ | ------------------------------ | ---------- |
+| `browser.useSystemBrowsers` | Use system-installed browsers if available       | `true`, `false`                | `true`     |
+| `browser.preferredType`     | Preferred browser engine type                    | `chromium`, `firefox`, `webkit` | `chromium` |
+| `browser.executablePath`    | Custom browser executable path (optional)        | String path to browser executable | `null`     |
+
 Example:
 
 ```javascript
@@ -95,6 +105,14 @@ export default {
   // Show browser windows and use readability for better web content parsing
   headless: false,
   pageFilter: 'readability',
+  
+  // System browser detection settings
+  browser: {
+    useSystemBrowsers: true,
+    preferredType: 'firefox',
+    // Optionally specify a custom browser path
+    // executablePath: '/path/to/chrome',
+  },
 };
 ```
 
@@ -174,6 +192,13 @@ export default {
   headless: false,
   userSession: true,
   pageFilter: 'readability',
+  
+  // System browser detection settings
+  browser: {
+    useSystemBrowsers: true,
+    preferredType: 'chromium',
+    // executablePath: '/path/to/custom/browser',
+  },
 
   // GitHub integration
   githubMode: true,
