Skip to content

Web UI overview

The yorishiro-proxy Web UI provides a browser-based interface for inspecting captured traffic, managing proxy settings, and running security testing tools. It is served automatically when you enable the Streamable HTTP transport.

Enabling the Web UI

The Web UI is embedded in the yorishiro-proxy binary and served automatically when the HTTP MCP transport is active. By default, HTTP MCP starts on a random loopback port. To use a fixed address:

yorishiro-proxy server -mcp-http-addr 127.0.0.1:9090

Once started, open the URL shown in the startup log in your browser. The Web UI and the MCP Streamable HTTP endpoint share the same address.

To auto-open the browser on startup:

yorishiro-proxy server -mcp-http-addr 127.0.0.1:9090 -open-browser

Token authentication

The HTTP MCP transport uses Bearer token authentication (auto-generated by default). To set a fixed token:

yorishiro-proxy server -mcp-http-addr 127.0.0.1:9090 -mcp-http-token my-secret-token

The browser will prompt you for the token on first visit. The token is stored in the browser's local storage for subsequent visits.

How it works

The Web UI is a React single-page application that communicates with the proxy backend through MCP tool calls over Streamable HTTP. Every action you perform in the UI -- querying flows, starting the proxy, modifying intercept rules -- is executed as an MCP tool invocation under the hood. This means the Web UI has the same capabilities as any MCP client.

The architecture looks like this:

Browser (React SPA)
  → Streamable HTTP transport
    → MCP Server
      → MCP Tools (query, configure, resend, fuzz, etc.)

Pages

The Web UI consists of the following pages:

Page Description
Flows Browse and filter captured HTTP, WebSocket, gRPC, and TCP flows
Dashboard Proxy status overview, traffic statistics, and live widgets
Intercept Review and modify intercepted requests before forwarding
Resender Edit and resend captured requests with response comparison
Fuzzer Create and manage fuzz testing campaigns
Macros Define and execute multi-step request sequences
Security Manage target scope, rate limits, budgets, and safety filters
Settings Configure proxy listeners, TLS, protocols, and plugins