| # Agent Bridge | |
| A TypeScript framework for bridging a web application to the Google Antigravity CLI. Single-page interface with MCP-like tool system and real-time agent communication. | |
| ## Architecture | |
| ``` | |
| Browser (Single Page) <--WebSocket--> Node/Express Server <--child_process--> Antigravity CLI | |
| | | |
| Tool Registry | |
| (MCP-like system) | |
| ``` | |
| ## Quick Start | |
| ```bash | |
| cd c:\Users\User\Desktop\debugrem\agent-bridge | |
| npm install | |
| npm start | |
| # Open http://localhost:3777 | |
| ``` | |
| ## Project Structure | |
| ``` | |
| agent-bridge/ | |
| server/ | |
| index.ts Entry point (Express + Socket.IO) | |
| bridge.ts Unified WebSocket event hub | |
| toolRegistry.ts Typed MCP-like tool system | |
| cliDetector.ts Real multi-strategy CLI auto-detection | |
| tools/ | |
| transcript.ts YouTube URL to transcript (yt-dlp + API fallback) | |
| client/ | |
| index.html Single-page app | |
| src/ | |
| style.css Light theme, dot-grid canvas, Google aesthetic | |
| main.js WebSocket, chat UI, tool rail, suggestion chips | |
| output/ Generated files | |
| tsconfig.json | |
| package.json | |
| ``` | |
| ## CLI Auto-Detection | |
| The server automatically searches for the Antigravity CLI using 5 strategies: | |
| | Priority | Method | Location | | |
| |---|---|---| | |
| | 1 | Environment variable | `ANTIGRAVITY_CLI_PATH` | | |
| | 2 | System PATH | `where antigravity` / `which antigravity` | | |
| | 3 | Common install paths | AppData, Program Files, ~/.local/bin | | |
| | 4 | npm globals | `npm root -g` parent directory | | |
| | 5 | Bare execution | Direct `antigravity --version` probe | | |
| No mock status. The detection result is **real** -- if it says "not detected", the CLI is genuinely not found. | |
| ## Configuration | |
| | Variable | Default | Description | | |
| |---|---|---| | |
| | `PORT` | `3777` | Server port | | |
| | `ANTIGRAVITY_CLI_PATH` | `antigravity` | Override CLI binary path | | |
| ## Tool System | |
| Drop a `.ts` file in `server/tools/` with a `register(registry)` export. The server auto-loads it on startup. | |
| ```typescript | |
| import type { ToolRegistry } from '../toolRegistry'; | |
| export function register(registry: ToolRegistry): void { | |
| registry.register({ | |
| name: 'my_tool', | |
| description: 'Does something useful', | |
| syntax: 'use <my_tool> <param>', | |
| pattern: /use\s+<my_tool>\s+(?<param>.+)/i, | |
| mock: false, | |
| async execute(params, emitProgress) { | |
| emitProgress('Working...'); | |
| return { message: 'Done' }; | |
| }, | |
| }); | |
| } | |
| ``` | |
| ## WebSocket Events | |
| | Event | Direction | Description | | |
| |---|---|---| | |
| | `bridge:init` | Server -> Client | Initial state (tools, CLI status) | | |
| | `prompt:send` | Client -> Server | User sends a message | | |
| | `tool:started/progress/completed/error` | Server -> All | Tool lifecycle | | |
| | `tool:list` | Client -> Server | Query tools (callback) | | |
| | `tool:invoke` | Client -> Server | Invoke a tool (callback) | | |
| | `agent:message` | Bidirectional | Agent communication | | |
| | `cli:stdout/stderr/done` | Server -> All | CLI output streaming | | |
| ## Usage Example | |
| Type in the chatbox: | |
| ``` | |
| use <transcript_tool> https://www.youtube.com/watch?v=y8KofLWrkeU | |
| ``` | |
| The tool extracts subtitles and provides a downloadable transcript. | |
| ## License | |
| MIT -- Rembrant Oyangoren Albeos, 2026 | |