ngx-ai-devtools Angular LLM Debugger

Skill by ara.so — Devtools Skills collection.

Network-tab-style DevTools for debugging LLM API calls in Angular applications. Intercepts and displays prompts, responses, token counts, costs, and streaming data for OpenAI, Anthropic, Google Gemini, Mistral, Groq, and Cohere — all without leaving the browser.

What It Does

ngx-ai-devtools automatically intercepts all LLM API calls made from your Angular app (via fetch, HttpClient, or official SDKs) and displays them in a floating DevTools panel. It:

• Auto-detects provider (OpenAI, Anthropic, Gemini, etc.) and parses request/response
• Calculates cost per call using embedded pricing tables
• Handles Server-Sent Events (SSE) streaming with delta accumulation
• Shows tool/function calls with arguments
• Provides one-click replay functionality
• Tracks time-to-first-token and running session totals
• Persists history across reloads (optional)
• Works with any SDK or raw fetch calls