NgAgentation

Introduction Video

Angular implementation of Agentation for visual DOM inspection and annotation. It provides an overlay-driven marker flow, component metadata extraction, and structured prompt output for page feedback.

Features

• Visual overlay to mark components or DOM nodes
• Marker list, intent editing, and clipboard export
• Angular component metadata extraction (inputs/outputs/properties)
• Prompt output detail levels (compact, standard, detailed, forensic)
• Nested element selection via breadcrumb navigation

Installation

npm install ng-agentation

Quick start

Import the module in your root module and place the agentation component once in your app.

// app.module.ts
import { NgAgentationModule } from 'ng-agentation';

@NgModule({
  imports: [
    NgAgentationModule.forRoot(),
  ],
})
export class AppModule {}

<!-- app.component.html -->
<ag-agentation></ag-agentation>

Exported API

Module

• NgAgentationModule

Components

• ag-agentation
• ag-overlay
• ag-toolbar
• ag-markers-panel
• ag-settings-panel
• ag-annotation-panel
• ag-inline-editor

Services

• ComponentWalkerService
• DataSanitizerService
• PromptGeneratorService
• McpService

Models

• ComponentNode, MarkerAnnotation, RecordingSession
• AgentationSettings, ToolbarState
• OutputDetail, MarkerColor, DEFAULT_SETTINGS, MARKER_COLORS

Build & test

ng build ng-agentation
ng test

Publishing

ng build ng-agentation
cd dist/ng-agentation
npm publish

Compatibility

Peer dependencies:

• @angular/core and @angular/common >=14 <20

License

MIT