Angular

import { Component, Input, ViewChild, ElementRef, AfterViewInit, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import "@mcp-b/char/web-component";
import type { CharAgentElement } from "@mcp-b/char/web-component";

@Component({
  selector: "app-char-agent",
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `<char-agent #agent publishable-key="pk_live_..."></char-agent>`,
})
export class CharAgentComponent implements AfterViewInit {
  @Input() idToken?: string;
  @ViewChild("agent") agentRef!: ElementRef<CharAgentElement>;

  ngAfterViewInit() {
    if (!this.idToken) return;
    this.agentRef.nativeElement.connect({
      publishableKey: "pk_live_...",
      idToken: this.idToken,
    });
  }
}