Deployment Checklist

Before deploying your Char-enabled app to production, review this checklist.

1. Authentication Setup

Remove dev-mode attribute
Implement connect({ idToken }) or connect({ ticketAuth })
Set up your identity provider (Auth0, Clerk, etc.)
Configure Char dashboard with your IDP settings

2. WebMCP Tools

Test all tools thoroughly
Handle all error cases gracefully
Return clear messages for the agent
Sanitize any user input

3. Styling

Match CSS variables to your brand
Test light and dark modes
Verify responsiveness on mobile

4. CORS Headers (if self-hosting)

If hosting on Cloudflare Workers or similar:

Cross-Origin-Embedder-Policy: credentialless
Cross-Origin-Opener-Policy: same-origin

5. Performance

Lazy-load the agent if not immediately needed
Register tools only after agent is connected
Clean up event listeners when appropriate

Example: Lazy Loading

// Only load the agent when needed
async function loadAgent() {
  await import('@mcp-b/char/web-component');

  const agent = document.createElement('char-agent');
  document.body.appendChild(agent);

  // Connect after adding to DOM
  await agent.connect({ idToken });
}

// Trigger on user action
document.querySelector('#chat-btn')?.addEventListener('click', loadAgent);

Congratulations!

You’ve completed the Vanilla track of the Char tutorial. You now know how to:

Embed the <char-agent> custom element
Control it with JavaScript
Customize styling with CSS variables
Create tools with navigator.modelContext.registerTool()
Set up production authentication

Next Steps

Powered by WebContainers