HTTP Inspector Tool

Universal HTTP Inspector with dynamic multi-proxy support and MCP server integration for AI-assisted debugging.

Features

• 🔄 Multi-Proxy Support: Run multiple proxy instances simultaneously, each forwarding to different targets
• 🎯 Dynamic Configuration: Configure everything via Web UI - no restart needed
• 💾 Flexible Storage: Choose between in-memory or SQLite storage
• 🤖 MCP Integration: AI-powered debugging with Model Context Protocol
• 🎨 Modern UI: Beautiful React-based dashboard
• 📊 Real-time Monitoring: Live request/response inspection
• 🔍 Advanced Filtering: Filter by proxy, method, status, and more

Quick Start

Run with npx (Easiest!)

No installation required:

npx @glncy/http-inspect-tool

Open http://localhost:8200 and you're ready to go!

Global Installation

npm install -g @glncy/http-inspect-tool
http-inspector

Development (From Source)

# Install dependencies
pnpm install

# Build everything
pnpm run build:all

# Start the inspector
pnpm start

Configuration

Create a .env file (see .env.example):

INSPECTOR_PORT=8200
STORAGE_TYPE=memory
SQLITE_DB_PATH=./data/inspector.db

All other settings are configurable via the Web UI at http://localhost:8200

Usage

1. Open the Inspector UI

Navigate to http://localhost:8200

2. Configure Your First Proxy

On first launch, you'll be prompted to add a proxy target:

• Proxy Port: 8100 (the port your app will connect to)
• Target Host: localhost
• Target Port: 4000 (your actual API port)

3. Update Your App

Point your mobile app or client to the proxy:

// Before
const API_URL = 'http://localhost:4000';

// After
const API_URL = 'http://localhost:8100';

4. Monitor Traffic

All requests will flow through the proxy and be captured in the inspector UI.

Multi-Proxy Examples

Example 1: Local + Remote APIs

Proxy 1: localhost:8100 → localhost:4000 (Local NestJS API)
Proxy 2: localhost:8101 → dev-api.example.com (Remote Dev API)

Example 2: Multiple Environments

Proxy 1: localhost:8100 → staging-api.example.com
Proxy 2: localhost:8101 → production-api.example.com

Compare requests between environments in the same UI!

MCP Server Integration

The inspector includes an MCP server for AI integration with Claude and other AI tools.

Available MCP Tools

• get_all_requests: Retrieve all captured HTTP requests
• get_last_request: Get the most recent request
• search_requests: Search requests by method, path, status
• get_recent_requests: Get last N requests

Claude Desktop Configuration

Add to your Claude Desktop config:

{
  "mcpServers": {
    "http-inspector": {
      "command": "node",
      "args": ["/path/to/http-inspect-tool/dist/mcp/index.js"]
    }
  }
}

Architecture

┌─────────────┐
│ Mobile App  │
└──────┬──────┘
       │
       ↓ localhost:8100
┌─────────────────────┐
│  Proxy Instance 1   │ ──→ localhost:4000 (API)
└─────────┬───────────┘
          │
          ↓ Capture
┌─────────────────────┐
│  Storage Layer      │ (Memory or SQLite)
└─────────┬───────────┘
          │
          ↓ Query
┌─────────────────────┐
│  Inspector UI       │ (localhost:8200)
│  + API Server       │
└─────────────────────┘
          │
          ↓ AI Query
┌─────────────────────┐
│  MCP Server         │
└─────────────────────┘

Development

Project Structure

http-inspect-tool/
├── src/
│   ├── index.ts              # Main entry point
│   ├── config/               # Configuration management
│   ├── storage/              # Storage layer (memory & SQLite)
│   ├── proxy/                # HTTP proxy manager
│   ├── api/                  # Fastify API server
│   └── mcp/                  # MCP server implementation
├── ui/                       # React UI
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   └── App.tsx
│   └── vite.config.ts
└── package.json

Scripts

• npm run dev - Start inspector in development mode
• npm run build - Build TypeScript
• npm run ui:dev - Start React UI dev server
• npm run ui:build - Build React UI for production
• npm run lint - Lint TypeScript code
• npm run format - Format code with Prettier

License

MIT