How can i forward custom properties to my backend agent with angular?

[jcageman]

I'm doing a poc with ag-ui and copilotkit. With some effort i managed to get it up and running and slowly adding some features. Currently i'm trying to forward custom properties towards my backend agent, how can you do that? I did find HttpAgent uses RunHttpAgentConfig / RunAgentInput and has forwardedProps property, but i don't see how i can dynamically add those to HttpAgent run calls that are being made.

I'm using .NET agent framework on the backend side and have the following app.config.ts

import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { HttpAgent } from '@ag-ui/client';
import { provideCopilotChatLabels, provideCopilotKit } from '@copilotkitnext/angular';

import { routes } from './app.routes';

export const COPILOT_RUNTIME_URL = `https://localhost:7288/poet`;
export const COPILOT_AGENT_ID = 'poet';

const poetAgent = new HttpAgent({
  agentId: COPILOT_AGENT_ID,
  description: 'Microsoft Agent Framework (AG-UI) poet agent',
  url: COPILOT_RUNTIME_URL,
});

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideZonelessChangeDetection(),
    provideRouter(routes),
    provideCopilotKit({
      agents: {
        [COPILOT_AGENT_ID]: poetAgent
      },
    }),
    provideCopilotChatLabels({
      chatInputPlaceholder: 'Ask anything about your data...',
      chatDisclaimerText: 'Responses may include AI-generated content.'
    })
  ]
};

relevant app.html:

  <section class="app-shell__chat">
    <copilot-chat class="chat-panel" [agentId]="agentId"></copilot-chat>
  </section>