Deployment Checklist

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

1. Authentication Setup

• Remove devMode prop
• Implement ticketAuth prop with server-generated tickets
• 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
• Use tools only in components that need them
• Consider code splitting for tool hooks

Example: Lazy Loading

import { lazy, Suspense } from 'react';

const CharAgent = lazy(() => import('./CharAgent'));

export function App() {
  return (
    <Suspense fallback={null}>
      <CharAgent />
    </Suspense>
  );
}

Congratulations!

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

• Embed the <Char /> component
• Control it with React state
• Customize styling with CSS variables
• Create type-safe tools with useWebMCP and Zod
• Set up production authentication

Next Steps

• Full Documentation
• WebMCP API Reference
• Example Apps