Skip to main content

Examples

These examples are based on the current public package API and the reference Angular application in apps/io-assist.

Minimal Angular Setup​

Use this when you want the smallest possible integration.

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

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

@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' },
  });
}

Login-Aware Dynamic Config​

Use this pattern when the application only knows the active user after authentication.

import { Component, computed, inject } from '@angular/core';
import { IoAssist, IoAssistDynamicConfig } from '@interopio/io-assist-ng';
import { LoginSessionService } from './login-session.service';
import { authSecret } from './config';

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

  protected readonly dynamicConfig = computed<IoAssistDynamicConfig>(() => ({
    user: {
      id: this.loginSession.loggedInUsername(),
      name: this.loginSession.loggedInUsername() || undefined,
    },
    agentServer: {
      headers: {
        Authorization: `Bearer ${authSecret}`,
      },
    },
  }));
}

This is the recommended shape when auth is handled by the host application rather than by io.Assist NG itself.

Add a Prompt Library​

Use defaultPrompts to preload common prompt actions for users.

provideIoAssist({
  connectConfig: {
    browser: {
      factory: IOBrowser,
    },
  },
  aiWebConfig: {
    agentServer: {
      baseUrl: 'http://localhost:4111',
    },
  },
  defaultPrompts: [
    {
      category: 'General',
      prompts: [
        {
          name: 'Summarize',
          prompt: 'Please summarize the following content:',
        },
        {
          name: 'Explain',
          prompt: 'Please explain this in simple terms:',
        },
      ],
    },
    {
      category: 'Code',
      prompts: [
        {
          name: 'Review Code',
          prompt: 'Please review this code and suggest improvements:',
        },
      ],
    },
  ],
})

Enable Working Context​

Use Working Context when assistant responses should reflect the current workspace state.

import { IoIntelWorkingContextFactory } from '@interopio/working-context';

provideIoAssist({
  connectConfig: {
    browser: {
      factory: IOBrowser,
    },
  },
  aiWebConfig: {
    agentServer: {
      baseUrl: 'http://localhost:4111',
    },
  },
  workingContext: {
    factory: IoIntelWorkingContextFactory,
    config: {
      schema: {
        clientId: {
          type: 'string',
          source: {
            context: {
              location: { workspace: { target: 'my' } },
              path: 'clientId',
            },
          },
        },
        portfolioId: {
          type: 'string',
          source: {
            context: {
              location: { workspace: { target: 'my' } },
              path: 'portfolioId',
            },
          },
        },
      },
    },
  },
})

Enable MCP Apps and Remote MCP Servers​

Use this pattern when the assistant should surface interactive MCP App UIs and connect to more than one MCP server.

provideIoAssist({
  connectConfig: {
    browser: {
      factory: IOBrowser,
    },
  },
  aiWebConfig: {
    agentServer: {
      baseUrl: 'http://localhost:4111',
    },
    mcp: {
      clientsConfig: {
        enforceStrictCapabilities: false,
        capabilities: {
          extensions: {
            'io.modelcontextprotocol/ui': {
              mimeTypes: ['text/html;profile=mcp-app'],
            },
          },
        },
      },
      ioIntel: {
        remote: {
          streamableHttp: {
            url: 'http://localhost:8989/mcp',
            name: 'primary-remote-server',
          },
        },
        web: {
          hasPriority: true,
        },
      },
      remoteServers: [
        {
          streamableHttp: {
            url: 'http://localhost:8081/mcp',
            name: 'secondary-mcp-server',
          },
        },
      ],
      mcpApps: {
        sandboxProxyUrl: 'http://localhost:6565/index.html',
        displayMode: 'workspace',
      },
    },
  },
})

Use a Named Default Agent​

If your agent server exposes more than one agent, preselect one by name:

provideIoAssist({
  connectConfig: {
    browser: {
      factory: IOBrowser,
    },
  },
  aiWebConfig: {
    agentServer: {
      baseUrl: 'http://localhost:4111',
    },
  },
  defaultAgentName: 'research-agent',
})

If the named agent is not found, the package falls back to the first available agent.