Vue

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

const props = defineProps<{ idToken: string; clientId: string }>();
const agentRef = ref<WebMCPAgentElement | null>(null);

const connectAgent = () => {
  agentRef.value?.connect({ idToken: props.idToken, clientId: props.clientId });
};

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

<template>
  <char-agent ref="agentRef" />
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useAuthStore } from '@/stores/auth';
import '@mcp-b/char/web-component';
import type { WebMCPAgentElement } from '@mcp-b/char/web-component';

const authStore = useAuthStore();
const { idToken } = storeToRefs(authStore);
const agentRef = ref<WebMCPAgentElement | null>(null);

const clientId = 'your-oidc-client-id';

const connectAgent = () => {
  if (idToken.value) {
    agentRef.value?.connect({ idToken: idToken.value, clientId });
  }
};

onMounted(connectAgent);
watch(idToken, connectAgent);
</script>

<template>
  <char-agent v-if="idToken" ref="agentRef" />
</template>

<!-- pages/dashboard.vue -->
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import type { WebMCPAgentElement, TicketAuth } from '@mcp-b/char/web-component';

// Fetch ticket server-side
const { data: ticketAuth } = await useFetch('/api/char/ticket', {
  method: 'POST',
});

const agentRef = ref<WebMCPAgentElement | null>(null);

onMounted(async () => {
  // Import client-side only
  await import('@mcp-b/char/web-component');
  if (ticketAuth.value) {
    agentRef.value?.connect({ ticketAuth: ticketAuth.value });
  }
});
</script>

<template>
  <ClientOnly>
    <char-agent ref="agentRef" />
  </ClientOnly>
</template>

// server/api/char/ticket.post.ts
export default defineEventHandler(async (event) => {
  const session = await getServerSession(event);
  if (!session?.idToken) {
    throw createError({ statusCode: 401 });
  }

  const response = await fetch('https://api.usechar.ai/api/auth/ticket', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${session.idToken}`,
    },
  });

  return response.json();
});

/// <reference types="@mcp-b/char/web-component" />