Vue

<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import "@mcp-b/char/web-component";
import type { CharAgentElement } from "@mcp-b/char/web-component";

const props = defineProps<{ idToken?: string }>();
const PUBLISHABLE_KEY = "pk_live_...";
const agentRef = ref<CharAgentElement | null>(null);

const syncAuth = () => {
  if (!props.idToken) return;
  agentRef.value?.connect({ publishableKey: PUBLISHABLE_KEY, idToken: props.idToken });
};

onMounted(syncAuth);
watch(() => props.idToken, syncAuth);
</script>

<template>
  <char-agent ref="agentRef" :publishable-key="PUBLISHABLE_KEY" />
</template>