@memberjunction/ng-ai-test-harness

A comprehensive Angular component for testing AI agents, prompts, and actions in MemberJunction applications. Supports embedded, dialog, and floating window presentation modes with real-time streaming, execution monitoring, and window management.

Overview

The AI Test Harness provides a multi-mode testing interface for MemberJunction's AI capabilities. It supports three testing modes (Agent, Prompt, Action), multiple presentation contexts (embedded component, dialog, floating window), and includes specialized components for monitoring agent execution trees and viewing JSON results.

graph TD
    A[AITestHarnessModule] --> B[Core Components]
    A --> C[Window Components]
    A --> D[Services]

    B --> B1[AITestHarnessComponent]
    B --> B2[AITestHarnessDialogComponent]
    B --> B3[AgentExecutionMonitorComponent]
    B --> B4[AgentExecutionNodeComponent]
    B --> B5[JsonViewerWindowComponent]

    C --> C1[AITestHarnessWindowComponent]
    C --> C2[TestHarnessCustomWindowComponent]

    D --> D1[AITestHarnessDialogService]
    D --> D2[TestHarnessWindowService]
    D --> D3[TestHarnessWindowManagerService]
    D --> D4[WindowDockService]

    B1 --> E["Testing Modes:
    Agent | Prompt | Action"]

    style A fill:#2d6a9f,stroke:#1a4971,color:#fff
    style B fill:#7c5295,stroke:#563a6b,color:#fff
    style C fill:#2d8659,stroke:#1a5c3a,color:#fff
    style D fill:#b8762f,stroke:#8a5722,color:#fff

Installation

npm install @memberjunction/ng-ai-test-harness

Usage

Module Import

import { AITestHarnessModule } from '@memberjunction/ng-ai-test-harness';

@NgModule({
  imports: [AITestHarnessModule]
})
export class YourModule { }

Embedded Mode

<mj-ai-test-harness
  [config]="testConfig"
  [embedded]="true"
  (executionComplete)="onTestComplete($event)"
  (modeChanged)="onModeChanged($event)">
</mj-ai-test-harness>

testConfig: TestHarnessConfig = {
  mode: 'agent',
  entityId: 'agent-id-here',
  showHistory: true,
  showAdvancedOptions: false,
  theme: 'light',
  maxHistoryItems: 10
};

Dialog Mode

import { AITestHarnessDialogService } from '@memberjunction/ng-ai-test-harness';

constructor(private testHarness: AITestHarnessDialogService) {}

// Test an agent
testAgent() {
  this.testHarness.openForAgent('agent-id').subscribe(result => {
    if (result.success) {
      console.log('Agent test successful:', result);
    }
  });
}

// Test a prompt
testPrompt() {
  this.testHarness.openForPrompt('prompt-id').subscribe(result => {
    console.log('Prompt test result:', result);
  });
}

// Test an action
testAction() {
  this.testHarness.openForAction('action-id').subscribe(result => {
    console.log('Action test result:', result);
  });
}

Floating Window Mode

import { TestHarnessWindowService } from '@memberjunction/ng-ai-test-harness';

constructor(private windowService: TestHarnessWindowService) {}

openInWindow() {
  this.windowService.open({
    mode: 'agent',
    entityId: 'agent-id'
  });
}

Agent Execution Monitor

Visualize agent execution as a tree of steps:

<mj-agent-execution-monitor
  [agentRunId]="runId"
  [autoRefresh]="true">
</mj-agent-execution-monitor>

JSON Viewer Window

Display JSON data in a formatted, scrollable window:

<mj-json-viewer-window
  [data]="jsonData"
  [title]="'Execution Result'">
</mj-json-viewer-window>

Configuration

TestHarnessConfig

| Property | Type | Default | Description | |----------|------|---------|-------------| | mode | 'agent' \| 'prompt' \| 'action' | 'agent' | Testing mode | | entityId | string | - | Pre-selected entity ID | | showHistory | boolean | true | Show execution history | | showAdvancedOptions | boolean | false | Show advanced settings | | theme | 'light' \| 'dark' | 'light' | Visual theme | | maxHistoryItems | number | 10 | Max history items to display |

Advanced Features

Streaming Responses

The test harness supports real-time streaming for compatible AI models:

this.testHarness.open({
  mode: 'prompt',
  streamResponse: true,
  temperature: 0.7,
  maxTokens: 2000
});

Window Management

The TestHarnessWindowManagerService coordinates multiple floating test windows with docking support via WindowDockService.

CSS Customization

:root {
  --harness-primary: #007bff;
  --harness-success: #28a745;
  --harness-error: #dc3545;
  --harness-background: #f8f9fa;
  --harness-text: #212529;
}

Dependencies

| Package | Description | |---------|-------------| | @memberjunction/ai | AI abstraction layer | | @memberjunction/ai-core-plus | AI core plus functionality | | @memberjunction/ai-engine-base | AI engine base classes | | @memberjunction/core | Core framework | | @memberjunction/core-entities | Entity type definitions | | @memberjunction/global | Global utilities | | @memberjunction/graphql-dataprovider | GraphQL data access | | @memberjunction/ng-code-editor | Code editor component | | @memberjunction/ng-container-directives | Layout directives | | @memberjunction/ng-notifications | Notification system | | @memberjunction/ng-shared | Shared Angular utilities | | @memberjunction/ng-shared-generic | Shared generic components | | @progress/kendo-angular-* | Kendo UI components |

Peer Dependencies

• @angular/common ^21.x
• @angular/core ^21.x
• @angular/forms ^21.x
• @angular/animations ^21.x

Build

cd packages/Angular/Generic/ai-test-harness
npm run build

License

ISC