Skip to main content
Integrate the Char agent into your SolidJS application using refs and onMount.

​
Installation

​
Basic Usage

import { onMount } from 'solid-js';
import '@mcp-b/char/web-component';
import type { WebMCPAgentElement } from '@mcp-b/char/web-component';

function ChatWidget(props: { idToken: string; clientId: string }) {
  let agentRef: WebMCPAgentElement | undefined;

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

  return <char-agent ref={agentRef} />;
}

export default ChatWidget;

​
With Reactive Props

Handle token changes with createEffect: 
import { onMount, createEffect } from 'solid-js';
import '@mcp-b/char/web-component';
import type { WebMCPAgentElement } from '@mcp-b/char/web-component';

function ChatWidget(props: { idToken: string; clientId: string }) {
  let agentRef: WebMCPAgentElement | undefined;

  createEffect(() => {
    if (agentRef && props.idToken && props.clientId) {
      agentRef.connect({ idToken: props.idToken, clientId: props.clientId });
    }
  });

  return <char-agent ref={agentRef} />;
}

export default ChatWidget;

​
With Solid Store

If using Solid’s store for state: 
import { createEffect, Show } from 'solid-js';
import { useAuth } from './auth-context';
import '@mcp-b/char/web-component';
import type { WebMCPAgentElement } from '@mcp-b/char/web-component';

function ChatWidget() {
  const [auth] = useAuth();
  let agentRef: WebMCPAgentElement | undefined;
  const clientId = 'your-oidc-client-id';

  createEffect(() => {
    if (agentRef && auth.idToken) {
      agentRef.connect({ idToken: auth.idToken, clientId });
    }
  });

  return (
    <Show when={auth.idToken}>
      <char-agent ref={agentRef} />
    </Show>
  );
}

export default ChatWidget;

​
SolidStart (SSR)

For SolidStart with server-side rendering: 
// src/routes/dashboard.tsx
import { createEffect, onMount } from 'solid-js';
import { createServerData$ } from 'solid-start/server';
import { getSession } from './session';
import type { WebMCPAgentElement, TicketAuth } from '@mcp-b/char/web-component';

export function routeData() {
  return createServerData$(async (_, { request }) => {
    const session = await getSession(request);
    if (!session?.idToken) {
      throw redirect('/login');
    }

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

    return response.json() as Promise<TicketAuth>;
  });
}

export default function Dashboard() {
  const ticketAuth = useRouteData<typeof routeData>();
  let agentRef: WebMCPAgentElement | undefined;

  onMount(async () => {
    await import('@mcp-b/char/web-component');
  });

  createEffect(() => {
    const data = ticketAuth();
    if (agentRef && data) {
      agentRef.connect({ ticketAuth: data });
    }
  });

  return <char-agent ref={agentRef} />;
}

​
See Also