npm package: @glncy/http-inspect-tool
Description: Universal HTTP Inspector with proxy capabilities and MCP server integration for AI-assisted debugging
Author: glncy
Latest version: 1.3.8

# HTTP Inspector Tool

[![npm version](https://img.shields.io/npm/v/@glncy/http-inspect-tool)](https://www.npmjs.com/package/@glncy/http-inspect-tool)
[![npm downloads](https://img.shields.io/npm/dm/@glncy/http-inspect-tool)](https://www.npmjs.com/package/@glncy/http-inspect-tool)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Node.js Version](https://img.shields.io/node/v/@glncy/http-inspect-tool)](https://nodejs.org)

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:

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

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

### Global Installation

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

### Development (From Source)

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

### 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:

```javascript
// 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:

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

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