SkillFoxx

Pangular Inspector MCP

An MCP server and panel for Angular developers: the agent sees routes, forms, signals and dependencies of a running app.

  • 88 ★ on the repository
  • Last commit
  • MIT
MCP server

Extended access

Why this level

  • Reads the running app state and forwards it to a local server, with secrets hidden only by known rules
  • Can open pages and navigate the app at the agent's request
All reasons and checks

pangular-inspector/devtoolsAuthor:pangular-inspector

Install

Manual install

npm install -D @pangular-inspector/devtools

MCP connects with `npx @pangular-inspector/devtools mcp`, and `--print-config` prints the ready configuration.

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • Reads the running app state and forwards it to a local server, with secrets hidden only by known rules
  • Can open pages and navigate the app at the agent's request

This is third-party code. Review the repository files before installing.

What it does

Pangular Inspector brings Angular developer tools together: component trees, signals, dependency injection, routes, forms, pipes and NgRx stores. It runs at dev time, build time or through an agent, and is built on Devframe, so the same tool runs as an embedded panel, a standalone CLI, a static report, an MCP server and a Chrome DevTools extension. It gives a coding agent the view a developer has. The agent lists routes, reads the live component tree, explains why a form is invalid and navigates the app. There are two connection kinds: stdio (`pangular mcp`) scans project source, and HTTP at `/__devframes/__mcp` also shows the live page open in a browser.

Who it is for. Angular developers who ask an agent to make sense of the components, dependencies and forms of a running app.

Good fit when

  • An agent needs the project's route list and their components without hunting through files.
  • A form fails validation, and the field that broke it must be found.
  • You need to learn where a component dependency came from and what a signal holds.
  • NgRx store state is examined together with the agent on a running page.

Not a fit when

  • The app is not written in Angular: the tool is built around its structures.
  • The dev server must be exposed beyond localhost: the documentation warns against it.
  • Production diagnostics are needed: the hub is off in production builds.

Example request

Show all app routes and explain why the sign-up form is invalid on the open page.

MCP

Transport
stdio, http
Authentication
API key

Environment variables

PANGULAR_MCP_TOKEN

Limitations

The `@pangular-inspector/devtools` package installs as a dev dependency, and for Angular SSR as a regular server dependency. The hub is off with `NODE_ENV=production` and in a production Angular build. The dev server must not be exposed beyond localhost: values no rule recognizes as secret are sent as they are. The stdio mode sees only source, and live page data is available only over HTTP with the app open in a browser. The HTTP connection needs a token from `PANGULAR_MCP_TOKEN`, and on a non-localhost address without `--https` the token travels in clear text.

How to disable. Remove the package with `npm uninstall @pangular-inspector/devtools`, take its plugin out of the build configuration and delete the `pangular` entry from the MCP client settings.

FAQ

How do I connect it to Claude Code?

`npx @pangular-inspector/devtools mcp --print-config` prints a ready `claude mcp add` line for both modes, plus settings for Cursor and VS Code.

How do stdio and HTTP differ?

Stdio scans only project source, while HTTP at `/__devframes/__mcp` also shows the live page. The stdio server is named `pangular` and the HTTP one `pangular-live`.

What data is redacted?

Secrets recognized by rules are redacted before sending. Values without a rule go as they are, so the server is not exposed beyond localhost.

Does it work in production?

No. The hub is off with `NODE_ENV=production` and in a production Angular build, as this is a development tool.

Can I stop the agent from changing the app?

The `--read-only` flag is added to the stdio command. Which tools it restricts is in the MCP server section of the documentation.

Discussion

No questions or reviews yet.

MCP servers
Official

Connects an agent to a running Next.js 16+ dev server: errors, routes, logs and docs for your installed version

MCP serverExtended access836

Console, network, screenshots and Lighthouse audits from your open Chrome session to the agent via a DevTools extension

MCP serverBroad access7.3K

A skill and MCP server for the spartan/ui Angular library: the agent installs components and blocks from current docs.

SkillExtended access3K
Official

SAP's MCP server gives an agent a catalog of 1,000 Fundamental NGX components with API data, examples, comparisons and setup guides

MCP serverMinimal access297

An MCP server shows agent steps on screen: a mechanical spider catches words and branches split work into code, model and you.

MCP serverMinimal access114

Angular’s official CLI creates application workspaces, starts development servers and supports ongoing project maintenance.

CLIExtended access27K

README in short

Covers package installation, run options, documentation links, the agent tools and security sections, and information about maintainers.

README badge

Report a problem