Angular devtools for you and your agent

Inspect components, signals, dependency injection, routes, forms and NgRx stores in your running app. In the browser, Chrome DevTools, the CLI, or your coding agent over MCP.

Get started Connect your agent View on GitHub

.mcp.json

{
  "mcpServers": {
    "pangular": {
      "type": "http",
      "url": "http://localhost:4000/__devframes/__mcp",
      "headers": {
        "Authorization": "Bearer ${PANGULAR_MCP_TOKEN}",
        "Origin": "http://localhost:4000"
      }
    }
  }
}

WORKS WITH

Why Pangular

One inspector for all of Angular

The same live view of your app, wherever it runs and whoever is asking: you in the browser or your agent over MCP.

Live, not snapshots
Reads your running app through Angular's own debug APIs, as it changes.
Your agent sees it too
The same data over MCP, so coding agents can inspect the app and act on it.
Wherever Angular runs
Browser apps with SSR and NgRx, Analog, NativeScript and Angular Native, with Capacitor coming soon.
Built for signals
The live signal graph with its effects and value history, plus NgRx Signal Store state.
Mount it anywhere
Express, Vite, the Chrome extension, the CLI or a static report.
Private by default
Local-only access, a one-time code, and secret-looking values redacted.

Ways to run

Use it the way you work

The same inspectors run in your app, in Chrome DevTools, from the CLI, as a static report or in your coding agent. Read the installation guide.

src/server.ts

import {initPangularHub} from '@pangular-inspector/devtools/hub';const devtools = initPangularHub({ws: false});app.use(devtools.nodeMiddleware);// src/main.tsif (typeof ngDevMode === 'undefined' || ngDevMode) {  import('@pangular-inspector/devtools/overlay');}