AI-Core Browser

A Chromium-based browser built with Electron and React that integrates with an AI Proxy server to provide in-browser AI assistance. Features include text selection summarization, page summarization, multi-provider AI support (OpenAI, Anthropic, Mistral), local SQLite caching, and a usage dashboard.

Features

• 🌐 Chromium Browser: Full-featured web browser with navigation controls
• 🤖 AI Integration: Connect to your AI Proxy server for chat and summarization
• 📝 Text Summarization: Right-click on selected text to summarize via context menu
• 📄 Page Summarization: One-click button to summarize the current page
• 🔄 Multi-Provider Support: Switch between OpenAI, Anthropic, and Mistral providers
• 💾 Local Caching: SQLite database caches the last 10 requests with cost and latency tracking
• 📊 Usage Dashboard: View total cost, request count, and average latency
• 🎨 Theme Toggle: Switch between light and dark themes
• 💬 Chat Interface: Sidebar chat panel for AI conversations

Prerequisites

• Node.js 20.x or higher
• pnpm (package manager)
• AI Proxy Server running on http://localhost:8080 (or configurable)
  • Use Proxy Server [https://github.com/natiassefa/AI-Proxy]

Installation

Clone the repository

git clone https://github.com/natiassefa/AICore-Browser.git
cd AICore-Browser

Install dependencies

pnpm install

This will automatically rebuild native modules for Electron via the postinstall script.

Development

Start the development server

pnpm dev

This command:

1. Starts the Vite dev server on http://localhost:5173
2. Waits for the server to be ready
3. Launches Electron with hot-reload

Build for production

# Build both Electron and React code
pnpm build

# Build and package the application
pnpm build:pack

Packaged applications will be available in dist-package/:

• macOS: DMG file (supports both x64 and arm64)
• Windows: NSIS installer
• Linux: AppImage

Project Structure

AICore-Browser/
├── electron/              # Electron main process
│   ├── main.ts           # Main process entry point
│   ├── preload.ts        # Preload script (IPC bridge)
│   ├── database/         # SQLite database service
│   │   └── db.ts
│   └── tsconfig.json     # TypeScript config for main process
├── src/                  # React renderer process
    ├── components/       # React components
    │   ├── BrowserView.tsx
    │   ├── ChatBox.tsx
    │   ├── NavigationBar.tsx
    │   ├── ProviderSelector.tsx
    │   ├── Sidebar.tsx
    │   ├── SummarizePageButton.tsx
    │   ├── ThemeToggle.tsx
    │   └── UsageDashboard.tsx
    ├── contexts/         # React contexts
    │   ├── ProviderContext.tsx
    │   └── ThemeContext.tsx
    ├── hooks/            # Custom React hooks
    │   └── useSummarize.ts
    ├── services/         # API clients
    │   └── aiProxyClient.ts
    ├── config/           # Configuration
    │   └── providers.ts
    ├── database/         # Database schema
    │   └── schema.ts
    ├── types/            # TypeScript type definitions
    │   └── electron.d.ts
    └── utils/            # Utility functions
        └── domExtractor.ts

Configuration

AI Proxy Server

The application connects to an AI Proxy server at http://localhost:8080 by default. To change this, modify the API_BASE_URL in src/services/aiProxyClient.ts.

Supported Providers and Models

Default providers and models are configured in src/config/providers.ts:

• OpenAI: gpt-4, gpt-3.5-turbo
• Anthropic: claude-3-5-sonnet-20241022, claude-3-opus-20240229
• Mistral: mistral-large-latest, mistral-medium-latest

Usage

Starting the Application

1. Ensure your AI Proxy server is running on http://localhost:8080
2. Run pnpm dev or launch the packaged application
3. The browser window will open with a sidebar on the left

Using AI Features

Chat with AI

1. Type a message in the chat input at the bottom of the sidebar
2. Select your AI provider and model from the dropdowns
3. Press Enter or click Send

Summarize Selected Text

1. Select text on any webpage
2. Right-click to open the context menu
3. Click "Summarize Selection"
4. The summary will appear in the chat sidebar

Summarize Current Page

1. Navigate to any webpage
2. Click the "Summarize Page" button in the sidebar
3. The page content will be extracted and summarized
4. The summary will appear in the chat sidebar

Usage Dashboard

The dashboard at the top of the sidebar shows:

• Total Cost: Cumulative cost of all AI requests
• Request Count: Total number of requests made
• Average Latency: Average response time in milliseconds

Theme Toggle

Click the moon/sun icon in the sidebar header to toggle between light and dark themes. Your preference is saved locally.

Database

The application uses SQLite to cache the last 10 AI requests. The database file is stored in:

• macOS: ~/Library/Application Support/ai-core-browser/ai-core-browser.db
• Windows: %APPDATA%/ai-core-browser/ai-core-browser.db
• Linux: ~/.config/ai-core-browser/ai-core-browser.db

Cached requests are automatically used when the same prompt is sent with the same provider and model.

Technology Stack

• Electron ^28.0.0 - Desktop application framework
• React ^18.2.0 - UI library
• TypeScript ^5.0.0 - Type safety
• Vite ^5.0.0 - Build tool and dev server
• Tailwind CSS ^3.4.0 - Styling
• better-sqlite3 ^9.0.0 - SQLite database
• electron-builder ^24.0.0 - Application packaging

Scripts

• pnpm dev - Start development server (Vite + Electron)
• pnpm build - Build for production
• pnpm build:pack - Build and package the application
• pnpm build:pack:dev - Build and package without code signing (development)

Troubleshooting

Database Errors

If you encounter "Cannot find module" errors related to better-sqlite3, bindings, or file-uri-to-path:

• Ensure these modules are listed in asarUnpack in package.json
• Run pnpm install to rebuild native modules
• For packaged apps, ensure native modules are properly unpacked

Preload Script Errors

If you see "Unable to load preload script" errors:

• Verify dist-electron/preload.js exists after building
• Check that the preload path in electron/main.ts is correct
• Ensure the preload script is compiled as CommonJS (see electron/tsconfig.preload.json)

Blank Window

If the application window is blank:

• Check the browser console (DevTools) for errors
• Verify dist/index.html exists after building
• Ensure Vite dev server is running on port 5173
• Check that the React app is mounting correctly

Building for Different Platforms

macOS

pnpm build:pack

Creates a DMG file supporting both Intel (x64) and Apple Silicon (arm64).

Windows

pnpm build:pack

Creates an NSIS installer. Ensure you're on a Windows machine or use a CI/CD pipeline.

Linux

pnpm build:pack

Creates an AppImage. Ensure you're on a Linux machine or use a CI/CD pipeline.

License

[Add your license here]

Contributing

[Add contribution guidelines here]

---

Note: This is an MVP (Minimum Viable Product) focused on core functionality. The codebase prioritizes working features over polish.