Production Authentication

Replace dev-mode with proper authentication for production.

Why dev-mode is localhost only

dev-mode embeds your API key in the HTML—visible to users. It’s blocked on non-localhost origins.

Using connect({ idToken })

For production, use the imperative connect() method:

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

const agent = document.querySelector<WebMCPAgentElement>('char-agent')!;

// Connect with the user's ID token from your auth provider
agent.connect({ idToken: userIdToken });

Using connect({ ticketAuth })

For server-rendered apps, exchange the IDP token for a ticket:

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

// Client: Connect with ticket
agent.connect({ ticketAuth });

Complete Example

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

async function initializeAgent(idToken: string) {
  const app = document.querySelector<HTMLDivElement>('#app')!;

  app.innerHTML = `
    <char-agent></char-agent>
  `;

  const agent = document.querySelector<WebMCPAgentElement>('char-agent')!;

  // Connect with the user's ID token
  await agent.connect({ idToken });
}

Supported Identity Providers

Auth0
Okta
Azure AD
Google
Firebase
Clerk
WorkOS
Custom OIDC

See Identity Providers for setup guides.

Key Takeaways

Never expose API keys in production
Use connect() with tokens from your auth provider
SSR apps should exchange tokens server-side
All major IDPs are supported via OIDC

Multi-Step Actions

Deployment Checklist