A system of bots that collects clips automatically via custom made filters, lets you easily browse these clips, and puts them together into a compilation video ready to be uploaded straight to any social media platform. Full VPS support is provided, along with an accounts system so multiple users can use the bot at once. This bot is split up into three separate programs. The server. The client. The video generator. These programs perform different functions that when combined creates a very powerful system for auto generating compilation videos.
FinMem: A Performance-Enhanced LLM Trading Agent with Layered Memory and Character Design.
Key parameters and specifications
Key parameters and specifications
Parameter
Value
Language
JavaScript
Category
Applications
Subcategory
Coding
Keywords
Claude Code, Design
Stars
969
Forks
81
Contributors
7
Created date
2025-07-08
Updated date
2026-10-13
Stars in 1 day
0
Stars in 7 days
0
Rank
12,318
Previous rank
12,241
Rank change
-77
7-day stars rank
13,362
Previous 7-day stars rank
13,372
7-day stars rank change
10
Total stars rank
11,414
Previous total stars rank
11,399
Total stars rank change
-15
Country
USA
README summary
Drawbridge Visual annotations for AI coding assistants. Drawbridge is a Chrome extension that lets you click on your running app, leave Figma-style comments, capture screenshots, and turn those notes into local task files your AI coding tools can act on. It is built for browser-to-code feedback loops with Cursor, Claude Code, Codex, and Windsurf. What It Does Annotate visible UI elements directly in the browser. Draw freeform rectangles for layout, spacing, and visual bugs that are not
tied to a single DOM node. Capture selector data, element context, bounding boxes, and screenshots with each note. Sync tasks into your project as readable markdown and structured JSON. Deploy the workflow for Claude Code, Codex, and Windsurf, plus Drawbridge workflow rules for AI agents. Recover cleanly after extension reloads: the toolbar icon can inject missing scripts into existing tabs and toggles the existing drawer instead of stacking duplicates. Pin Drawbridge from Chrome's Extensions menu. For local pages, open the
Drawbridge extension details in Chrome and enable Allow access to file URLs. Open the app or page you want to annotate. Select the local project root for that app. Drawbridge creates and maintains files in your project so your AI tool can read the work queue. Process The Queue After adding annotations, open your project in Cursor, Claude Code, Codex, or Windsurf and run or . Annotate Press , or use Tools -> Comment, then click an element and leave a note. Press
, or use Tools -> Rectangle, then drag over an area and leave a note. Click the Drawbridge toolbar icon to open or close the drawer. Tasks appear in the drawer and sync to your connected project. Drawer Layout Drawbridge can dock to the bottom, left, or right side of the viewport from the More menu. Use the chevron button to collapse or expand the drawer. When collapsed on the left or right side, Drawbridge becomes a slim rail with the project
button, tools button, and color-coded task counts for , , and . The chevron points in the direction the drawer will collapse or expand. Process Tasks In an AI coding tool, run: or: Supported modes: : process one task at a time with approval. : group related tasks and process them together. : process all pending tasks autonomously. Generated Files Drawbridge writes these into the connected project: : human-readable task list. : structured task data for AI processing. : screenshots captured with annotations. Drawbridge also updates for
generated local workflow folders. Development The build output is written to . Troubleshooting If the icon does nothing after reloading the extension, click it once on the page again. Drawbridge now injects missing scripts into existing tabs. If the drawer looks stale, close and reopen it with the toolbar icon. If project files are missing, reconnect the project from the drawer. If an AI tool cannot find tasks, confirm the project contains and . License This project uses a custom license. Free
to use, copy, and modify for lawful purposes. Redistribution, sublicensing, selling, or offering as a commercial service are not permitted
Frequently asked questions
How many stars and forks are recorded?
breschio/drawbridge has 969 stars and 81 forks.
What is the repository rank?
breschio/drawbridge is ranked 12,318.
What language and category are recorded?
breschio/drawbridge has 969 stars, uses JavaScript and belongs to Applications.
Which repository is closest in rank?
breschio/drawbridge is compared with kessler/gemma-gem, ranked 12,322 with 969 stars.
README
Drawbridge
Visual annotations for AI coding assistants.
Drawbridge is a Chrome extension that lets you click on your running app, leave Figma-style comments, capture screenshots, and turn those notes into local task files your AI coding tools can act on.
It is built for browser-to-code feedback loops with Cursor, Claude Code, Codex, and Windsurf.
What It Does
Annotate visible UI elements directly in the browser.
Draw freeform rectangles for layout, spacing, and visual bugs that are not tied to a single DOM node.
Capture selector data, element context, bounding boxes, and screenshots with each note.
Sync tasks into your project as readable markdown and structured JSON.
Track task status through to do, doing, and done.
Deploy the /bridge workflow for Claude Code, Codex, and Windsurf, plus Drawbridge workflow rules for AI agents.
Recover cleanly after extension reloads: the toolbar icon can inject missing scripts into existing tabs and toggles the existing drawer instead of stacking duplicates.
Setup
1. Install The Extension
Clone or download this repo.
Open Chrome and go to chrome://extensions.
Turn on Developer mode.
Click Load unpacked.
Select this folder: drawbridge/chrome-extension/.
Pin Drawbridge from Chrome's Extensions menu.
For local file:// pages, open the Drawbridge extension details in Chrome and enable Allow access to file URLs.
2. Connect Your Project
Open the app or page you want to annotate.
Click the Drawbridge toolbar icon.
Click Connect Project in the drawer.
Select the local project root for that app.
Approve Chrome's file access prompt.
Drawbridge creates and maintains files in your project so your AI tool can read the work queue.
3. Process The Queue
After adding annotations, open your project in Cursor, Claude Code, Codex, or Windsurf and run /bridge or bridge.
Annotate
Press C, or use Tools -> Comment, then click an element and leave a note.
Press R, or use Tools -> Rectangle, then drag over an area and leave a note.
Press Esc to exit an annotation mode.
Click the Drawbridge toolbar icon to open or close the drawer.
Tasks appear in the drawer and sync to your connected project.
Drawer Layout
Drawbridge can dock to the bottom, left, or right side of the viewport from the More menu. Use the chevron button to collapse or expand the drawer.
When collapsed on the left or right side, Drawbridge becomes a slim rail with the project button, tools button, and color-coded task counts for to do, doing, and done. The chevron points in the direction the drawer will collapse or expand.
Process Tasks
In an AI coding tool, run:
/bridge
or:
bridge
Supported modes:
step bridge: process one task at a time with approval.
batch bridge: group related tasks and process them together.
yolo bridge: process all pending tasks autonomously.
Generated Files
Drawbridge writes these into the connected project:
.moat/moat-tasks.md: human-readable task list.
.moat/moat-tasks-detail.json: structured task data for AI processing.
.moat/screenshots/: screenshots captured with annotations.
Free to use, copy, and modify for lawful purposes. Redistribution, sublicensing, selling, or offering as a commercial service are not permitted without a commercial license.
