Claude Bridge

5.0(

1 rating

)

Extension Developer Tools179 users

Item media 2 (screenshot) for Claude Bridge

Item media 1 (screenshot) for Claude Bridge

Overview

Inspect React elements and send component context to Claude Code via MCP

Claude Bridge adds a panel to Chrome DevTools that lets you inspect any element on a web page and send its full context to Claude Code. HOW IT WORKS 1. Open DevTools and go to the "Claude Bridge" panel 2. Click "Inspect" to enter inspection mode 3. Hover over elements to see component names highlighted 4. Click an element to capture it (inspect mode stops automatically) 5. The element data is instantly available in your Claude Code session WHAT GETS CAPTURED - React component name and source file path - Component props (sanitized, functions and large objects excluded) - Component ancestry chain (up to 3 levels) - CSS selector and outer HTML - Computed styles (layout, typography, colors, spacing) - Bounding box and page URL SETUP 1. Install the extension 2. Run: claude mcp add claude-bridge -- npx claude-bridge-mcp 3. Open DevTools on any page — look for the "Claude Bridge" tab Works on any website. React component info is available on React sites; DOM and style capture works everywhere. PRIVACY Everything runs locally. Captured data is sent only to a local MCP server on your machine (localhost:18925). No data is collected or transmitted to external servers.

5 out of 5
1 rating
Learn more about results and reviews.

Details

Version
1.0.3
Updated
March 4, 2026
Flag concern
Offered by
Omeganes
Size
24.07KiB
Languages
English
Developer
Email
raymond.youssef.97@gmail.com
Non-trader
This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization

Claude Bridge has disclosed the following information regarding the collection and usage of your data. More detailed information can be found in the developer's privacy policy.

Claude Bridge handles the following:

Personally identifiable information

Financial and payment information

Personal communications

This developer declares that your data is

Not being sold to third parties, outside of the approved use cases
Not being used or transferred for purposes that are unrelated to the item's core functionality
Not being used or transferred to determine creditworthiness or for lending purposes

Support

Exportal — Bridge between Claude.ai/ChatGPT and Claude Code

0.0

Bridge between Claude.ai/ChatGPT and Claude Code. Export any chat to your VS Code workspace as Markdown, and continue it.

ClickSay - AI Feedback for Vibe Coders

5.0

Click any element, say your fix in 20 languages, paste AI-ready context into any coding tool. Three seconds from thought to code.

Yolo Chrome MCP for Claude

5.0

No blocked sites, no filters, no approval pop-ups. Yolo lets Claude work on every website on your real Chrome — free.

Super claude

0.0

All-in-one toolbox to enhance Claude with super powers!

Claude Code Browser

5.0

Point at page elements and let Claude Code fix them. Visual debugging with picker, DOM tree, streaming chat. By Fineguide.AI.

Claude AI Search

5.0

Upgrade your default search engine to Claude AI.

AI Code Explainer

0.0

Hover over AI-generated code to instantly understand the algorithm, complexity, and alternatives

Claude Browser Inspector

0.0

Select any element on a webpage, then ask Claude about it. Requires Claude for Chrome extension.

Doc to Claude

0.0

Add a document to Claude without downloading it and uploading it

Tweaklify

5.0

Click any element to inspect and tweak styles, HTML, and layout live.

Claude Code Enhancer

4.5

Export Claude Code chats to Markdown, jump between your prompts, save prompt templates, and review plans in ChatGPT or Gemini.

Claude Code Context Capturer

0.0

Convert any web page into Claude Code-friendly Markdown context with one click.