Enables real-time capture and monitoring of server logs and stdout/stderr output from Django development servers for AI-assisted analysis.
Enables real-time capture and monitoring of server logs and stdout/stderr output from Express.js applications for AI-assisted analysis.
Enables real-time capture and monitoring of server logs and stdout/stderr output from FastAPI applications for AI-assisted analysis.
Enables real-time capture and monitoring of server logs and stdout/stderr output from Laravel applications for AI-assisted analysis.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Local LensShow me the latest browser console logs and backend errors."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Local Lens
A 100% local development monitoring tool that captures both browser and server logs for LLM analysis.
ā ļø Important: This tool is designed for local development use only. It runs entirely on your machine with no external connections or cloud services.
Features
š Browser Monitoring
Console Log Capture: All console.log, warn, error, and info messages from any website
Network Request Monitoring: HTTP requests with headers, request/response bodies, and timing data
Response Body Capture: Full response content for JSON, HTML, XML, and JavaScript requests
Domain Filtering: Capture logs only from specified domains
š„ļø Server Log Capture
Universal Backend Support: Works with Rails, Express, Django, FastAPI, Laravel, and any framework
Real-time Log Forwarding: Captures stdout/stderr from any server process
Zero Configuration: No code changes or framework-specific setup required
Process Management: Graceful start/stop with proper signal handling
š§ Development Integration
CLI Tool: Simple
local-lens capture "your-server-command"wrapperLLM-Optimized Output: Structured JSON logs designed for AI assistant analysis
Local HTTP Server: Express.js server with SQLite storage (runs on port 27497) - no external connections
MCP Integration: Access logs via Model Context Protocol tools in AI assistants (Claude, Cursor, etc.)
Real-time Streaming: Server-Sent Events for live log monitoring
Persistent Storage: Logs and requests saved to local SQLite database
Circular Buffer: Automatic cleanup keeps only the latest 10k entries
Batch Processing: Efficient batching with retry logic and page load optimization
Privacy First: All data stays on your machine, zero external connections
Prerequisites
Node.js: Version 18.0.0 or higher
Chrome Browser: For the browser monitoring extension
npm: Package manager (comes with Node.js)
Package Structure
Local Lens consists of two main npm packages:
local-lens(Server/MCP Package)Contains the HTTP server and MCP server
Binary:
local-lens(for MCP integration)Used for: MCP integration with Claude Code/Cursor
Install:
npm install -g local-lens(for MCP)
local-lens-cli(CLI Tool Package)Contains the CLI tool for server log capture
Binary:
local-lens(for CLI commands)Used for: Wrapping backend server commands
Install:
npm install -g local-lens-cli(for CLI)
Important: Both packages provide a local-lens binary but for different purposes. The server package is for MCP integration, while the CLI package is for capturing server logs.
Quick Start
1. Install Dependencies
2. Start the Server
The server will start on http://localhost:27497 (fixed port, not configurable)
3. Install Chrome Extension
Open Chrome and go to
chrome://extensions/Enable "Developer mode" (toggle in top right)
Click "Load unpacked"
Select the
extensiondirectory from this projectConfigure domains in the extension popup to start capturing (no domains are captured by default)
4. Test Browser Monitoring
Click the Local Lens extension icon and add a domain (e.g.,
localhost:3000)Visit that domain
Open browser console (F12)
Type:
console.log("Hello from Local Lens!")Check server logs, use MCP tools to see captured logs or hit the API endpoints to see the data
5. Test Server Log Capture
Install the CLI tool globally (
npm install -g local-lens-cli) or use with npxStart any server with log capture:
# Rails server local-lens capture "rails server" # or with npx npx local-lens-cli capture "rails server" # Express/Node.js local-lens capture "npm start" # or with npx npx local-lens-cli capture "npm start" # Django local-lens capture "python manage.py runserver" # or with npx npx local-lens-cli capture "python manage.py runserver" # FastAPI local-lens capture "uvicorn main:app --reload" # or with npx npx local-lens-cli capture "uvicorn main:app --reload"Note: The CLI binary is
local-lens(installed from thelocal-lens-clipackage)Your backend server logs will now appear in Local Lens with
source: "backend-console"
CLI Tool for Server Log Capture
The Local Lens CLI tool provides universal backend log capture that works with any framework without code modifications.
Installation
Install the CLI tool globally:
Or use with npx (no installation required):
Or build locally:
Basic Usage
Wrap any server command with local-lens capture (if installed globally) or npx local-lens-cli capture:
Package Distinction: The CLI binary is named local-lens but comes from the local-lens-cli npm package.
CLI Options
--name <name>: Custom process name for logs (default: command name)--server <url>: Local Lens server URL (default: http://localhost:27497)--silent: Suppress Local Lens output messages
Status Check
Check if Local Lens server is running:
Note: The local-lens binary is provided by the local-lens-cli package.
How It Works
Process Wrapping: CLI spawns your server process and captures stdout/stderr
Log Formatting: Formats logs with Local Lens schema and metadata
Real-time Forwarding: Sends logs to Local Lens server via HTTP API
Source Tagging: Tags all logs with
source: "backend-console"for filtering
Process Management
Graceful Shutdown: Ctrl+C properly terminates the wrapped process
Signal Forwarding: SIGTERM and SIGINT are forwarded to your server
Exit Codes: Preserves original process exit codes
Error Handling: Captures and reports process startup errors
HTTP API Endpoints
Console Logs
POST /logs- Submit log batches from extensionGET /logs- Query logs with filters (limit, offset, level, url, time range)DELETE /logs- Clear all stored logsGET /logs/stream- Real-time log stream via Server-Sent Events
Network Requests
POST /network-requests- Submit network request batches from extensionGET /network-requests- Query network requests with filters (limit, offset, method, url, status, time range)GET /network-requests/:id- Get specific network request by IDDELETE /network-requests- Clear all stored network requestsGET /network-requests/stream- Real-time network request stream via Server-Sent Events
System
GET /health- Server health checkGET /health-local-lens- Special health check for extension port detectionGET /config- Get server configuration for extensionPOST /mcp-config- Update MCP server configuration
Settings
GET /settings- Retrieve extension settingsPOST /settings- Update extension settingsDELETE /settings- Reset settings to defaultsGET /settings/:key- Get specific setting valuePUT /settings/:key- Update specific setting value
Network Configuration
GET /network-config- Get network capture configurationPOST /network-config- Update network capture configurationPOST /network-config/reset- Reset network config to defaults
API Examples
JSON Output Format
Local Lens outputs all logs and network requests in structured JSON format for easy programmatic analysis. This enables AI assistants and other tools to effectively parse and understand the captured data.
Console Logs JSON Structure
Network Requests JSON Structure
Smart Content Processing
Response Body Capture: Intercepts and captures response bodies for text-based content types
JSON Detection: Automatically parses and prettifies JSON content
Text Handling: Preserves plain text with truncation info for large content
Content Type Filtering: Only captures response bodies for JSON, HTML, XML, and JavaScript
Size Management: Limits response bodies to 50KB to prevent memory issues
Encoded Data: Detects base64/encoded content and provides metadata instead of raw data
Status Categorization: Maps HTTP status codes to semantic categories
MCP Integration
Package Distinction: MCP integration uses the local-lens package (server/MCP), NOT the local-lens-cli package (CLI tool).
First install the MCP server package globally, then add it to Claude Code:
Verify Installation:
You should see local-lens in the list of configured servers.
Remove Server:
Important: This uses the local-lens package (server with MCP support), not local-lens-cli.
First install the MCP server package globally, then add the following to your ~/.cursor/mcp.json file:
Important: This uses the local-lens package (server with MCP support), not local-lens-cli.
The MCP server allows you to access captured logs directly from Claude Code or Cursor for analysis and debugging. The MCP server is enabled by default when you start the Local Lens server and shares the same database as the main server.
Prerequisites:
Start the server:
npm run dev(builds everything automatically)Ensure the Chrome extension is capturing data
How to trigger the MCP server
Check the console logs in local-lens and fix the errors being triggered
Check the network requests in local-lens and fix the errors being triggered
Available MCP Tools
Once the MCP server is running, you can use these tools to analyze captured data:
get_console_logs
Retrieve console logs with optional filters.
get_network_requests
Retrieve network requests with optional filters.
search_logs
Search console logs by text content.
search_network_requests
Search network requests by URL, headers, or body content.
clear_console_logs / clear_network_requests
Clear all stored data.
Combined Browser & Server Monitoring
Local Lens provides comprehensive full-stack development monitoring by capturing both browser-side and server-side activity:
Complete Development Workflow
Start Local Lens Server:
npm run devConfigure Browser Monitoring:
Install the Chrome extension
Add your frontend domains (e.g.,
localhost:3000)Browser console logs and network requests will be captured
Start Backend with Log Capture:
# Build CLI tool first npm run build:all # Start your backend with log capture local-lens capture "rails server" --name "backend-api" # or with npx (no installation required) npx local-lens-cli capture "rails server" --name "backend-api"Note: The
local-lensbinary is provided by thelocal-lens-clipackage.Full-Stack Debugging with MCP Tools:
// Get all recent errors from both frontend and backend get_console_logs({ level: "error", limit: 20 }); // Search for API-related issues across both sides search_logs({ query: "api" }); search_network_requests({ query: "/api/" }); // Monitor specific backend process logs get_console_logs({ url: "process://backend-api" }); // Track frontend network requests to your API get_network_requests({ url: "localhost:3000" });
Data Source Identification
All captured data is tagged with source information for easy filtering:
Browser Logs:
pageUrlcontains the actual website URLServer Logs:
pageUrlcontainsprocess://[process-name]Network Requests: Captured only from browser (server HTTP calls would need separate tooling)
AI-Powered Analysis
Use the MCP tools with AI assistants to:
Correlate frontend errors with backend logs
Identify API call failures and their server-side causes
Debug full-stack workflows end-to-end
Monitor performance across both client and server
Development
Architecture
High-Level Structure
Chrome Extension: Manifest v3 extension with service worker and content scripts
Local Server: HTTP/MCP server running on fixed port 27497
SQLite Database: Local persistence with intelligent filtering and circular buffer (10k entries)
Monorepo: Root workspace managing server and extension subprojects
Project Structure
Key Components
cli/: Universal CLI tool for server log capture from any backend frameworkextension/: Chrome extension with background service worker, dual content scripts, and popup UIserver/: Node.js/Express server with MCP integration and SQLite storageserver/src/storage/: Database layer with LogStorage, NetworkStorage, and SettingsStorage classesserver/src/mcp/: MCP server implementation for AI assistant accessserver/src/routes/: HTTP API endpoints for logs, network requests, settings, and configurationserver/src/services/: Service layer for business logicserver/src/utils/: Utility functions for logging and colorizationextension/popup.*: Extension popup interface for configuration and data management
Development Commands
UI Configuration
All Local Lens settings are managed through the extension popup interface:
Domain Configuration
Specific Domains Only: Captures only from domains you explicitly specify in the extension popup
Add/Remove Domains: Use the extension popup to manage your domain list
Subdomain Support: Specified domains automatically include subdomains (e.g.,
github.comincludesgist.github.com)Default Behavior: No domains are captured by default - you must explicitly add domains to start capturing
Capture Controls
Console Logs: Toggle console log capture on/off
Network Requests: Toggle network request monitoring on/off
MCP Server: Enable/disable Model Context Protocol for AI assistants
Data Management
Clear Console Logs: Remove all stored console logs
Clear Network Requests: Remove all stored network requests
All settings are saved automatically and persist across browser sessions. No server restart required for configuration changes.
How It Works
Console Log Capture
Extension injects scripts that wrap
console.log,console.warn,console.error, andconsole.infoSmart Filtering automatically excludes Local Lens's own logs
Page Load Optimization buffers logs during page load, sends after completion
Structured Data includes timestamp, message, stack trace, page URL, and browser info
Network Request Monitoring
JavaScript Interception captures fetch() and XMLHttpRequest calls in the page's main context
Response Body Capture reads full response content for text-based requests (JSON, HTML, XML, JS)
Comprehensive Data records method, URL, headers, request/response bodies, status codes, and timing
Intelligent Filtering excludes images, fonts, analytics, tracking, and binary content
Memory Optimization limits response bodies to 50KB with truncation indicators
Request Correlation tracks full request lifecycle from start to completion
Data Processing
Batching efficiently collects 50 items or 5-second intervals
Local Storage saves everything to SQLite database (10k item circular buffer)
LLM-Optimized Output structures logs as JSON with intelligent content processing
Real-time Streaming provides live updates via Server-Sent Events
MCP Integration enables AI assistant access for analysis and debugging
Troubleshooting
Database Issues
SQLITE_READONLY or database creation errors
The server automatically creates the
/server/data/directory and database files on first runIf you encounter database errors, ensure the server has write permissions to the project directory
Check server logs for specific database initialization messages
The server creates two databases:
browserrelay.db(main) andbrowserrelay-settings.db(settings)
Database corruption or connection issues
Stop the server:
Ctrl+CRemove database files:
rm -rf server/data/Restart the server:
npm run devThe databases will be recreated automatically
Chrome Extension Issues
Extension not capturing logs
Check that the extension is enabled in
chrome://extensions/Reload the webpage after installing the extension
Check browser console for extension errors
Look for
[Local Lens]debug messages in the browser consoleCheck the extension popup to ensure console logs are enabled
Verify the current domain is included in your capture scope (check the popup "Capture Scope" section)
Debug logging not working
Open Chrome DevTools (F12) and go to the Console tab
You should see
[Local Lens] Initialized on domain.commessagesTry running
console.log("test")- you should see capture messagesCheck the Extensions page and click "service worker" next to Local Lens to see background script logs
Server connection errors
Ensure server is running on
http://localhost:27497Check for CORS errors in browser console
Verify no firewall is blocking the connection
Check server logs for incoming requests
Domain filtering issues
Open the Local Lens extension popup
Check your configured domains list to see your current configuration
Verify the current domain is in your explicitly configured domains list
Add domains using the input field in the popup
Subdomains are automatically included (e.g.,
github.comincludesgist.github.com)Note: The extension only captures from explicitly listed domains - no "All Domains" mode exists
MCP Server Issues
MCP tools not available
Check that the MCP server is enabled in the extension popup
Check that the server built successfully (
npm run build)Verify the path in Claude config is correct
Check that the server is running and accessible at
http://localhost:27497
Connection errors
Check that the server is running and accessible at
http://localhost:27497Check that the MCP server is enabled in the extension popup
Check server logs for MCP initialization messages
Ensure server is running when Claude Code starts
Restart Claude Code after configuration changes
Server Issues
Port already in use
The server runs on port 27497 and is not configurable
Stop any other service using port 27497
TypeScript errors
npm run buildDatabase issues
Server uses persistent SQLite database in
server/data/browserrelay.dbandserver/data/browserrelay-settings.db(both are ignored by git)Check server logs for database initialization errors
Use
DELETE /logsendpoint to clear logs without restarting
Testing
Jest: TypeScript testing with memory database for isolation
Integration Tests: Full server lifecycle testing
Unit Tests: Storage, routes, and MCP components
Test Setup: Automatic database cleanup and proper async handling
Privacy & Security
This tool is designed with privacy in mind:
100% Local: No external servers, APIs, or cloud services
No Authentication: Since it's local-only, no auth is needed
No Tracking: Zero telemetry or usage tracking
Your Data: All logs stored locally in
server/data/browserrelay.dbPort 27497: Runs only on localhost, not accessible externally
License
MIT License - see LICENSE file for details.