Tether

Visual editor for localhost - select components and send changes to your AI coding tools.

Tether bridges the gap between your browser and AI coding tools like Claude Code and Cursor.

With Tether, you can visually select UI elements on any web page and instantly send their detailed context including HTML structure, CSS styles, React component information, and more directly to your AI coding assistant.

Why Tether?

Perfect for developers working on web applications who want to:

• Quickly reference specific components while coding
• Share visual context with AI assistants without manual copy-pasting
• Analyze React component hierarchies and props
• Extract styling information from live pages
• Streamline their AI-assisted development workflow

How It Works

• Click the Tether extension icon while viewing any localhost web page
• Use the element picker to select components you want to reference
• Add instructions or context in the overlay prompt
• Send directly to Claude Code CLI or Cursor with one click

Features

• Visual element picker with hover highlighting
• Automatic React component detection and analysis
• Detailed CSS style extraction
• Draggable overlay interface that doesn't interfere with your page
• Support for multiple AI coding tools
• Works on localhost development servers

Supported Tools & Frameworks

AI Coding Tools:

• Claude Code
• Cursor

Frameworks:

• React

Requirements

Tether requires running the companion CLI tool for communication with your coding assistant.

GitHub repository coming soon.