feat: call OpenAI, Anthropic & any LLM API with streaming

README.md

@@ -1,29 +1,35 @@
 # Wingman
 
-Hosted single-page playground for testing a [Manifest](https://manifest.build) gateway. Impersonate any of the agents Manifest tracks — **OpenClaw**, **Hermes**, **OpenAI SDK**, **Vercel AI SDK**, **LangChain**, plain **cURL**, or a raw fetch — and inspect the exact request / response that lands on your backend.
+Hosted single-page playground for testing LLM APIs straight from the browser. Pick a **wire format** — OpenAI **Chat Completions**, OpenAI **Responses**, or **Anthropic Messages** — paste a base URL + key, and call any provider that speaks it (Manifest, OpenAI, Anthropic, Together, Fireworks, Groq, DeepSeek, Z.AI, MiniMax, …). Stream the reply token by token or fetch it whole, and inspect the exact request / response on the wire.
+
+It started as a [Manifest](https://manifest.build) gateway tester, so it also impersonates the agents Manifest tracks — **OpenClaw**, **Hermes**, **OpenAI SDK**, **Vercel AI SDK**, **LangChain**, plain **cURL**, or a raw fetch — to show how the proxy classifies each client.
 
 Live at **<https://wingman.manifest.build>**.
 
 ## What it's for
 
-- Verifying routing decisions (which tier did Manifest pick for this prompt?).
-- Inspecting how the proxy classifies different SDKs from their User-Agent / `X-Stainless-*` headers.
+- Calling any LLM provider by URL + key + format — no SDK install, no terminal.
+- Comparing the same prompt across formats (Chat Completions vs Responses) or across providers.
+- Watching a streamed response arrive token by token, with time-to-first-token.
+- Verifying Manifest routing decisions (which tier did it pick for this prompt?).
+- Inspecting how a proxy classifies different SDKs from their User-Agent / `X-Stainless-*` headers.
 - Reproducing a customer report end-to-end without touching the real CLI.
-- Onboarding contributors who want to see what an OpenClaw or Hermes request actually looks like.
 
 ## How it works (and what it doesn't do)
 
-Wingman is a **static SPA**. It has no backend of its own — every request goes straight from your browser to whatever Manifest gateway you configure in the connection bar. There is no telemetry, no server-side logging, no proxy in between.
+Wingman is a **static SPA**. It has no backend of its own — every request goes straight from your browser to whatever endpoint you configure in the connection bar. There is no telemetry, no server-side logging, no proxy in between. Streaming responses are read directly from the `fetch` body as Server-Sent Events.
 
 Your API key is held in `sessionStorage` (cleared when you close the tab). Everything else — base URL, model, history, system prompts — is in `localStorage` and never leaves the browser. The full source is in this repo if you want to audit it.
 
 ## Connecting to a gateway
 
-Open <https://wingman.manifest.build>, paste:
+Open <https://wingman.manifest.build>, then:
 
-- **Base URL** — e.g. `https://your-manifest.example.com` or `http://localhost:3001` (more on cross-origin below).
-- **API key** — your `mnfst_*` token.
+- **Format** — the wire protocol: OpenAI Chat Completions (`/v1/chat/completions`), OpenAI Responses (`/v1/responses`), or Anthropic Messages (`/v1/messages`). This sets the endpoint path, auth scheme, body shape, and how the response is parsed.
+- **Base URL** — e.g. `https://your-manifest.example.com`, `https://api.openai.com`, `https://api.anthropic.com`, or `http://localhost:3001` (more on cross-origin below). Wingman appends the format's path.
+- **API key** — `Authorization: Bearer` for OpenAI-style formats, `x-api-key` for Anthropic (attached automatically per format).
 - **Model** — `auto` or a specific model id.
+- **Stream** — toggle in the composer toolbar to read the reply as it's generated (Server-Sent Events).
 
 You can pre-fill via query string: `?baseUrl=https://your.gateway&apiKey=mnfst_...`. The Manifest dashboard's Wingman drawer does this automatically.
 
@@ -42,6 +48,8 @@ The `X-Stainless-*` headers matter: the OpenClaw, Hermes, and OpenAI SDK profile
 
 If the gateway is on a loopback address (`localhost` / `127.0.0.1`) and you load Wingman over HTTPS, Chrome's Private Network Access also wants `Access-Control-Allow-Private-Network: true` on the preflight.
 
+Calling **Anthropic** directly: its API blocks browser origins by default, so Wingman sends the `anthropic-dangerous-direct-browser-access: true` header (alongside `anthropic-version`) automatically when you pick the Anthropic Messages format.
+
 `Access-Control-Allow-Credentials` can stay **false** — Wingman uses bearer keys, never cookies.
 
 If you're behind a corporate firewall or running a fully air-gapped Manifest, clone this repo and `npm run dev` — Wingman runs entirely client-side.
@@ -69,9 +77,12 @@ Scripts:
 
 ## How it's wired
 
-- **`src/profiles.ts`** — catalog of every supported agent/SDK shape. Adding a new one means adding one entry: headers, system prompt, body builder, code snippet builder. The UI picks up the new tile automatically.
-- **`src/send.ts`** — single fetch wrapper that captures status, latency, request/response headers, and parses JSON when possible. Filters out forbidden headers (`User-Agent`, `Sec-*`, `Cookie`, etc.) that browsers refuse to set on fetch and surfaces them in the UI.
-- **`src/App.tsx`** — composes the layout: connection bar → profile tiles → form → header editor → SDK code preview → response panel.
+- **`src/formats/`** — one module per wire format (`openai-chat`, `openai-responses`, `anthropic-messages`). Each owns its endpoint path, auth scheme, body builder, response parsers, and streaming parser. Adding a provider format means adding one file and listing it in `index.ts`.
+- **`src/profiles.ts`** — catalog of agent/SDK fingerprints layered on a format: headers, system prompt, optional body extras, code snippet. Each profile declares which formats it's compatible with; the UI filters the list to the selected format.
+- **`src/snippets.ts`** — format-aware SDK / cURL code-snippet builders for the preview panel.
+- **`src/send.ts`** — fetch wrapper that captures status, latency, request/response headers, and parses JSON. `sendRequestStreaming` reads the SSE body and assembles the text via the format's stream parser. Filters out forbidden headers (`User-Agent`, `Sec-*`, `Cookie`, …) that browsers refuse to set on fetch and surfaces them in the UI.
+- **`src/services/sse.ts`** — generic Server-Sent Events reader (decodes the stream, splits events).
+- **`src/App.tsx`** — composes the layout: format + client pickers → connection bar → form → header editor → SDK code preview → response panel.
 
 ## Caveats
 

index.html

@@ -3,12 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Manifest Wingman — Gateway Tester</title>
+    <title>Manifest Wingman — LLM API Tester</title>
     <meta name="theme-color" content="#1a1d23" media="(prefers-color-scheme: dark)" />
     <meta name="theme-color" content="#faf8f5" />
     <meta
       name="description"
-      content="Send test messages to a Manifest gateway, impersonating OpenClaw, Hermes, OpenAI SDK, Vercel AI SDK, LangChain, or cURL."
+      content="Test any LLM API from the browser — OpenAI Chat Completions & Responses, Anthropic Messages, and every OpenAI-compatible provider. Streaming or buffered, with full request/response inspection."
     />
   </head>
   <body>