skills.rest
reason-machines
reason-machinesOFFICIAL
Explore all skills by this author →
Website𝕏@reasonmachinesGitHub

ngx-ai-devtools-angular-llm-debugger

Intercepts and displays LLM API calls in Angular apps with cost tracking and streaming support.

4|Updated May 16, 2026
Search Tags:#angular#OpenAI#streaming#devtools#cost tracking#llm debugging#api interception
One-click install
npx skills add https://github.com/reason-machines/devtools-skills --skill ngx-ai-devtools-angular-llm-debugger-reason-machines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ngx-ai-devtools-angular-llm-debugger
Source: https://github.com/reason-machines/devtools-skills/tree/main/skills/ngx-ai-devtools-angular-llm-debugger
Command: npx skills add https://github.com/reason-machines/devtools-skills --skill ngx-ai-devtools-angular-llm-debugger-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires ngx-ai-devtools.

What problem does it solve? Debugging LLM API calls in Angular applications normally requires external proxies or manual network inspection, making it hard to see prompts, responses, token usage, and costs in one place during development. ## Core Features & Use Cases - Automatic Interception: Captures LLM calls made via fetch, Angular HttpClient, or official SDKs for OpenAI, Anthropic, Gemini, Mistral, Groq, and Cohere, displaying them in a floating DevTools panel. - Cost & Token Tracking: Calculates per-call cost from embedded pricing tables, tracks time-to-first-token, and maintains running session totals with signal-based reactive state. - Streaming & Replay: Accumulates SSE streaming deltas in real time, parses tool/function calls, and supports one-click replay of recorded requests. - Use Case: While building an Angular chatbot, watch every OpenAI request appear in the panel, verify the prompt and model, monitor session spend against a budget, and replay a failing call to test a prompt variation. ## Quick Start Add provideAiDevtools to my Angular app config so all LLM API calls appear in a floating debug panel during development.

Frequently Asked Questions about ngx-ai-devtools-angular-llm-debugger

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I debug OpenAI API calls in an Angular app?▼

Install ngx-ai-devtools and add provideAiDevtools() to your application config. It automatically intercepts calls from the OpenAI SDK, fetch, or HttpClient and shows prompts, responses, tokens, and costs in a floating panel.

How to track LLM API costs during Angular development?▼

ngx-ai-devtools calculates cost per call using embedded pricing tables and exposes session totals through the AiDevtoolsService stats signal. You can read totalCost, totalTokens, and avgLatency programmatically to build budget alerts.

Does ngx-ai-devtools support streaming responses?▼

Yes, it handles Server-Sent Events streaming with delta accumulation for OpenAI, Anthropic, Mistral, and Groq. Gemini streaming is partially supported, while Cohere streaming is not supported.

What Angular version is required for ngx-ai-devtools?▼

The library requires Angular 18.1 or higher because it uses signals, standalone components, and the @let template syntax. Check that @angular/core is at version ^18.1.0 in package.json.

Why are my LLM calls not appearing in the devtools panel?▼

Calls behind a proxy or custom gateway are not detected by default. Add their URL patterns via the additionalEndpoints option in provideAiDevtools, and ensure provideHttpClient() is registered if you use Angular HttpClient.

Can I use ngx-ai-devtools in production builds?▼

It is intended for development only. Set enabled: false in production, typically by binding the option to environment.production, which removes all patching and UI overhead.

Related Skills

Explore More Software Engineering Skills→
jayho-kjayho-k
1

mem0-vercel-ai-sdk

Integrates persistent memory into Vercel AI SDK applications using the @mem0/vercel-ai-provider package.

Community
Intermediate
kk20300113-pngkk20300113-png

cost-aware-llm-pipeline

Routes LLM API tasks by complexity with budget tracking and retry limits.

Community
Advanced
athal7athal7
6

observability

Correlate logs, traces, and errors to triage production incidents.

Community
Intermediate
ProfPowellProfPowell
4

observability

Implement client-side and server-side observability with JavaScript and Node.js middleware.

Community
Advanced