Skip to content

README.md

Latest commit

 

History

History
164 lines (126 loc) · 5.81 KB

README.md

File metadata and controls

164 lines (126 loc) · 5.81 KB

WebAiBridge

Bridge your VS Code context directly to AI chat sites like ChatGPT, Claude, Gemini, AI Studio, and Microsoft 365 Copilot.

Overview

WebAiBridge consists of two parts that work together:

  • VS Code Extension (webaibridge-vscode/) — Runs a local WebSocket server, provides context from your workspace
  • Chrome Extension (web-extension/) — Connects to VS Code, injects context into AI chat sites

The extensions communicate via a local WebSocket connection (ports 64923-64932), so no cloud services are required.

Features

  • 📤 Send Code to AI — Send selected text, files, or entire folders
  • 🧩 Context Chips — Build up context from multiple sources before sending
  • 📥 @ Mentions — Type @ in AI chat to pull context directly from VS Code
  • 🔢 Token Estimation — ~95% accurate token counts with model-specific limits
  • ✂️ Smart Chunking — Auto-split large content into sendable parts
  • 🖱️ Right-Click Menus — Quick access from editor and file explorer
  • 🖥️ Multi-Instance — Support for multiple VS Code windows
  • 🌐 Multi-Site Support — Works with ChatGPT, Claude, Gemini, AI Studio, M365 Copilot

Quick Start

1. Install the VS Code Extension

Option A: From Release

# Download the .vsix from GitHub Releases, then:
code --install-extension webaibridge-0.6.0.vsix

Option B: Build from Source

cd webaibridge-vscode
npm install
npm run compile
npx vsce package
code --install-extension webaibridge-*.vsix

2. Install the Chrome Extension

  1. Open Chrome and go to chrome://extensions
  2. Enable "Developer mode" (top right)
  3. Click "Load unpacked"
  4. Select the web-extension folder

3. Start Using

  1. Open any AI chat site (ChatGPT, Claude, Gemini, etc.)
  2. Type @ in the chat input to see available context options
  3. Or in VS Code: select code → right-click → Add Selection to Context

Usage

@ Mentions (in AI Chat)

Type a trigger in any supported AI chat input. The trigger character is customizable in the popup (default: @).

Available context:

Trigger Description
@focused-file Currently open file in VS Code
@selection Selected text in the active editor
@visible-editors All visible editor contents
@open-tabs Content from all open files
@problems Errors and warnings from VS Code
@file-tree Workspace folder structure
@git-diff Uncommitted changes
@terminal Recent terminal output

Right-Click Menus (in VS Code)

  • In Editor: Right-click → Add Selection to Context
  • In Explorer: Right-click file → Add File to Context

Chrome Popup

  • View connection status
  • Switch between VS Code instances
  • Select AI model for token limits
  • Set per-message limits (warn/chunk/truncate)
  • Manage and insert context chips

Per-Message Limits

Set a custom token limit in the popup. Choose what happens when exceeded:

  • Warn — Confirmation dialog before inserting
  • Chunk — Auto-split into sequential parts with navigator UI
  • Truncate — Cut content to fit the limit

Configuration

VS Code settings (Ctrl+, → search "webaibridge"):

Setting Default Description
excludePatterns node_modules, .git, etc. Glob patterns to exclude
useGitignore true Respect .gitignore files
maxFileSize 100000 Max file size in bytes
maxFilesPerFolder 50 Max files when adding folder

Architecture

┌─────────────┐     WebSocket      ┌─────────────────┐
│   VS Code   │◄──────────────────►│ Chrome Extension│
│  Extension  │   localhost:64923  │  (content.js)   │
└─────────────┘                    └────────┬────────┘
       │                                    │
       │ Reads files, selections,           │ Injects into
       │ problems, git diff, etc.           │ AI chat input
       │                                    │
       ▼                                    ▼
┌─────────────┐                    ┌─────────────────┐
│  Your Code  │                    │   AI Chat Site  │
│  Workspace  │                    │ (ChatGPT, etc.) │
└─────────────┘                    └─────────────────┘

Project Structure

WebAiBridge/
├── webaibridge-vscode/     # VS Code extension (TypeScript)
│   ├── src/extension.ts    # Main extension code
│   └── package.json        # Extension manifest
├── web-extension/          # Chrome extension (Manifest V3)
│   ├── src/background.js   # WebSocket client & instance discovery
│   ├── src/content.js      # AI site integration & @ mentions
│   ├── src/popup.html/js   # Extension popup & settings
│   └── src/tokenizer.js    # Token estimation & chunking
├── .github/workflows/      # CI/CD (packages both extensions)
└── PLAN.md                 # Development roadmap

Development

# VS Code extension
cd webaibridge-vscode
npm install
npm run watch    # Auto-compile on changes

# Package for distribution
npx vsce package

Supported AI Sites

  • ✅ ChatGPT (chat.openai.com, chatgpt.com)
  • ✅ Claude (claude.ai)
  • ✅ Google Gemini (gemini.google.com)
  • ✅ Google AI Studio (aistudio.google.com)
  • ✅ Microsoft 365 Copilot (copilot.microsoft.com)

License

BSD-2-Clause — See LICENSE for details.

© 2025-2026 TechIdiots LLC

Contributing

See PLAN.md for the development roadmap and upcoming features.