Skip to main content

​
Install

​
Web component in React

import { useEffect, useRef } from "react";
import "@mcp-b/char/web-component";
import type { CharAgentElement } from "@mcp-b/char/web-component";

const PUBLISHABLE_KEY = "pk_live_...";

export function SupportAgent({ idToken }: { idToken?: string }) {
  const ref = useRef<CharAgentElement>(null);

  useEffect(() => {
    if (!idToken) return;
    ref.current?.connect({ publishableKey: PUBLISHABLE_KEY, idToken });
  }, [idToken]);

  return <char-agent ref={ref} publishable-key={PUBLISHABLE_KEY} />;
}

​
React wrapper (@mcp-b/char-react)

import { CharAgent } from "@mcp-b/char-react";

export function SupportAgent({ idToken }: { idToken?: string }) {
  return <CharAgent publishableKey="pk_live_..." idToken={idToken} />;
}
Use the same pattern in Next.js, Remix, and TanStack Start: render with publishableKey, pass idToken when available on the client.