One Vite plugin and one dynamic import. You get the Angular inspectors, the NgRx dock, the Analog dock and an MCP endpoint on the Vite dev server.

Set up Analog

This guide adds the devtools to an Analog app. Everything runs on the Vite dev server, so there is no separate server to start.

What you get

Components, injectors, signals, forms, router and pipes, reading the live page. File routes, server calls, render modes, content and lint. Signal stores and the change log, when your app uses NgRx. /__devframes/__mcp on the Vite dev server, with the Analog tools.

The flow

Add @santoshyadavdev/ng-devtools and devframe. Register it next to analog() in vite.config.ts. Import the overlay in src/main.ts, in development only. Start the dev server and click the floating button.

Step 1: Install

Step 2: Add the Vite plugin

Add the plugin after analog():

// vite.config.ts
import analog from '@analogjs/platform';
import ngDevtools from '@santoshyadavdev/ng-devtools/vite';
import {defineConfig} from 'vite';

export default defineConfig(() => ({
  plugins: [analog(), ngDevtools()],
}));

The plugin runs on the dev server only (apply: 'serve'). Production builds do not include it.

Plugin options

All four are optional.

Option	Default	What it does
base	/__devframes/	Where the hub is mounted.
apiPrefix	Read from your Analog config	The API prefix used to tell API calls from page calls.
allowedOrigins	none	Extra page origins accepted next to localhost.
auth	on if a non-loopback host or origin is allowed	Whether the devtools ask for the one-time code.

The plugin also takes the devtools options. See Vite and Analog and Configuration.

Custom hostnames

The devtools only answer requests from this machine. If you open the dev server through another hostname, add it to Vite's server.allowedHosts. See Security.

Step 3: Load the overlay

// src/main.ts
import {bootstrapApplication} from '@angular/platform-browser';
import {App} from './app/app';
import {appConfig} from './app/app.config';

bootstrapApplication(App, appConfig).then(() => {
  if (import.meta.env.DEV) void import('@santoshyadavdev/ng-devtools/overlay');
});

The import is dynamic and guarded by import.meta.env.DEV, so production bundles do not include it.

Step 4: Open the devtools

Start the dev server as usual. Then:

What	Where
Floating button	On every page of your app
Full viewer	/__devframes/ on the Vite dev server
MCP endpoint	/__devframes/__mcp on the Vite dev server

Open the Analog dock to see file routes, server calls, render modes, content and lint. See the Analog inspector for each view.

Point your MCP client at http://localhost:5173/__devframes/__mcp with an Origin header. See MCP server. The analog-server-calls and analog-call-api tools only work through the Vite plugin.

Catch hydration errors from the first load

The overlay loads after the first render, so it misses hydration errors (NG0500 to NG0506) logged during the first load. provideNgDevtoolsHttp() starts listening for them when the app starts. The Analog dock lists them under Hydration error in Lint, and the analog-current-page tool returns them.

Analog's own load() fetches and API calls show in the Analog dock without extra setup. withNgDevtools() also records HttpClient calls in the SSR & HTTP tab.

// src/app/app.config.ts
import {provideHttpClient, withFetch} from '@angular/common/http';
import {ApplicationConfig} from '@angular/core';
import {provideFileRouter} from '@analogjs/router';
import {provideNgDevtoolsHttp, withNgDevtools} from '@santoshyadavdev/ng-devtools/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFileRouter(),
    provideHttpClient(withFetch(), withNgDevtools()),
    provideNgDevtoolsHttp(),
  ],
};

provideNgDevtoolsHttp() and withNgDevtools() do nothing in production builds. See Set up SSR & HTTP for the interceptor order.

Try the demo

The repository has an Analog demo in examples/analog. It has file routes with route groups, .server.ts loads, API routes under src/server/routes/api/v1, markdown content, prerendered pages and a client-only /dashboard.

pnpm install
pnpm analog:dev

The script builds the devtools package first, then starts the Vite dev server.

The demo aliases @santoshyadavdev/ng-devtools/overlay to the built package in its vite.config.ts. Your app does not need that alias.

Where to next