JodusNodus

JodusNodus / opencode-chrome-annotation

Public

Request changes in Chrome and send it to your OpenCode session

agentic-ai agentic-coding ai chrome llms
19
0
100% credibility
Found Apr 30, 2026 at 19 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

A Chrome extension paired with an OpenCode plugin that enables users to select UI elements on webpages, add instructions, capture screenshots, and send them directly to an active OpenCode session for rapid code changes.

How It Works

1
🖥️ Discover the annotation helper

While using OpenCode to build web projects, you hear about a simple Chrome tool that lets you point at page elements and tell OpenCode exactly what to change.

2
🛒 Add the browser companion

Head to the Chrome store, search for OpenCode Annotation, and click install to add it to your browser toolbar.

3
🔗 Connect to your OpenCode

In your OpenCode setup, enable the annotation feature so it can receive notes from your browser.

4
💬 Start your project chat

Open OpenCode in the folder for your website and begin a new conversation about improvements.

5
🔗 Link the live webpage

On the actual site you're viewing, click the new toolbar button, pick your OpenCode chat, and connect them with one tap.

6
🎯 Select and instruct

Hover to highlight any button or text on the page, click to lock it, type a quick note like 'make this brighter', feeling the power of visual feedback.

7
📤 Send with snapshot

Tap send, and a smart screenshot plus details zoom to your OpenCode chat instantly.

✅ Changes appear perfectly

OpenCode understands your exact vision from the picture and note, coding the update faster than ever, like having a designer and coder in sync.

Sign up to see the full architecture

6 more

Sign Up Free

Star Growth

See how this repo grew from 19 to 19 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is opencode-chrome-annotation?

This TypeScript Chrome extension and OpenCode plugin lets you hover over any UI element on a live webpage, add a quick comment requesting changes—like "make this button bigger"—and send the element's selector, metadata, text, and a screenshot directly to your local OpenCode session. It bridges browser inspection with AI-assisted coding, turning vague "fix this" notes into precise prompts, much like GitHub request changes or GitLab review annotations but for running sites. Install the extension from the Chrome Web Store, add the plugin to your OpenCode config, connect your tab, and annotate via a draggable pill overlay.

Why is it gaining traction?

It auto-discovers local OpenCode instances on specific ports, lists active sessions with keyboard navigation (Escape to close, arrows to pick), and handles claims to avoid conflicts across tabs. Developers dig the seamless flow: highlight, comment, send—no screenshots or copy-pasting selectors manually. Unlike GitHub Copilot requests or Bitbucket change requests, it captures viewport details and element roles for spot-on AI prompts, speeding up iteration without leaving the browser.

Who should use this?

Frontend devs prototyping UIs on staging sites, fullstack teams using OpenCode for rapid web app tweaks, or designers handing annotated screenshots to AI coders. Ideal for those mimicking GitHub request review workflows on live pages, especially if you're already in the OpenCode ecosystem and tired of static mockup tools.

Verdict

Early project with 19 stars and 1.0% credibility score signals low maturity—no tests visible, relies on your OpenCode setup—but README docs and Web Store presence make it dead simple to try. Grab it if OpenCode annotations fit your flow; otherwise, stick to established tools like GitHub request changes for code reviews.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.