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

$3

No installation required:

``bash
npx @glncy/http-inspect-tool
`

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

$3

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

$3

`bash


Install dependencies

pnpm install

Build everything

pnpm run build:all

Start the inspector

pnpm start
`

Configuration

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

`env
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

$3

Navigate to http://localhost:8200

$3

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

Point your mobile app or client to the proxy:

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

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

$3

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

Multi-Proxy Examples

$3

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

$3

`
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.

$3

- 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

$3

Add to your Claude Desktop config:

`json
{
"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

$3

`
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
`

$3

- 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