Skip to main content

Component API

This page covers the main Angular APIs exposed by @interopio/io-assist-ng.

IoAssist Component​

IoAssist is the standalone Angular component that renders the assistant UI.

Selector​

<io-assist [config]="dynamicConfig()" />

Class​

export class IoAssist implements AfterViewInit, OnInit

Public Input​

InputTypeRequiredDescription
configIoAssistDynamicConfigYesRuntime configuration for the current user and optional per-user agent headers

Notes​

  • The component requires a dynamic config value at runtime
  • IoAssistDynamicConfig is validated in ngOnInit
  • the component syncs the current dynamic config into the internal signal used by root-level services
  • consumer assets are loaded after view init so styles and supporting assets are available once the DOM exists

Minimal Example​

import { Component, signal } from '@angular/core';
import { IoAssist, IoAssistDynamicConfig } from '@interopio/io-assist-ng';

@Component({
  selector: 'app-root',
  imports: [IoAssist],
  template: `<io-assist [config]="dynamicConfig()" />`,
})
export class AppComponent {
  readonly dynamicConfig = signal<IoAssistDynamicConfig>({
    user: {
      id: 'user-42',
      name: 'Jane Doe',
    },
  });
}

provideIoAssist​

provideIoAssist(config) registers the providers needed for io.Assist NG at Angular application bootstrap.

Signature​

function provideIoAssist(config: IoAssistStaticConfig): EnvironmentProviders

Parameters​

ParameterTypeRequiredDescription
configIoAssistStaticConfigYesStatic application configuration for io.Connect, AI Web, prompts, and Working Context

Returns​

EnvironmentProviders

What It Registers​

The provider setup includes:

  • validated static config through IO_ASSIST_CONFIG
  • the writable dynamic config signal through IO_ASSIST_DYNAMIC_CONFIG
  • Angular browser error listeners and zoneless change detection
  • NgRx store, effects, and store devtools
  • io.Connect integration through provideIoConnect(config.connectConfig)

Validation Behavior​

provideIoAssist(...) validates the static config with Zod before returning the providers. Invalid bootstrap config throws immediately.

Example​

import { ApplicationConfig } from '@angular/core';
import IOBrowser from '@interopio/browser';
import { provideIoAssist } from '@interopio/io-assist-ng';

export const appConfig: ApplicationConfig = {
  providers: [
    provideIoAssist({
      connectConfig: {
        browser: {
          factory: IOBrowser,
        },
      },
      aiWebConfig: {
        agentServer: {
          baseUrl: 'http://localhost:4111',
        },
      },
    }),
  ],
};

Putting Them Together​

A complete integration uses both APIs:

import { ApplicationConfig, Component, computed, inject } from '@angular/core';
import IOBrowser from '@interopio/browser';
import { IoAssist, IoAssistDynamicConfig, provideIoAssist } from '@interopio/io-assist-ng';
import { AuthService } from './auth.service';

export const appConfig: ApplicationConfig = {
  providers: [
    provideIoAssist({
      connectConfig: {
        browser: {
          factory: IOBrowser,
        },
      },
      aiWebConfig: {
        agentServer: {
          baseUrl: 'http://localhost:4111',
        },
      },
    }),
  ],
};

@Component({
  selector: 'app-assistant-shell',
  imports: [IoAssist],
  template: `<io-assist [config]="dynamicConfig()" />`,
})
export class AssistantShellComponent {
  private readonly auth = inject(AuthService);

  protected readonly dynamicConfig = computed<IoAssistDynamicConfig>(() => ({
    user: {
      id: this.auth.userId(),
      name: this.auth.displayName(),
    },
    agentServer: {
      headers: {
        Authorization: `Bearer ${this.auth.accessToken()}`,
      },
    },
  }));
}

The main related types are:

  • IoAssistStaticConfig
  • IoAssistDynamicConfig
  • IoAssistPrompt
  • IoAssistPromptCategory

See io.Assist NG Configuration for the detailed type breakdown.