Skip to main content
<script lang="ts">
  import { onMount } from "svelte";
  import "@mcp-b/char/web-component";
  import type { CharAgentElement } from "@mcp-b/char/web-component";

  export let idToken: string | undefined;
  const PUBLISHABLE_KEY = "pk_live_...";
  let agentEl: CharAgentElement;

  onMount(() => {
    if (!idToken) return;
    agentEl?.connect({ publishableKey: PUBLISHABLE_KEY, idToken });
  });

  $: if (agentEl && idToken) {
    agentEl.connect({ publishableKey: PUBLISHABLE_KEY, idToken });
  }
</script>

<char-agent bind:this={agentEl} publishable-key={PUBLISHABLE_KEY} />