openai-chatkit-frontend-embed

Embed ChatKit UI by creating a chatkit-widget element in your page and configuring it with either a workflowId plus client token (for hosted workflows) or an api.url plus fetch handler (for custom backends). Mount the widget to enable browser-based chat powered by OpenAI agents.

Hosted workflow mode uses a domain key and client token obtained from your backend token endpoint for OpenAI Agent Builder workflows. Custom backend mode connects directly via api.url and fetch, giving you full control over authentication and data handling in your own backend.

Configure domain allowlisting by passing the domainKey parameter during ChatKit client initialization. For file uploads, set your uploadStrategy in the client configuration to handle direct upload handling securely with proper header injection.

ChatKit embedding works in vanilla JavaScript, React, and Next.js frontends. Create a chatkit-widget element, configure your connection method (hosted or custom backend), and mount it—no framework dependency required.

Blank or malfunctioning widgets typically result from incorrect api.url configuration, missing or invalid client tokens, improper domain allowlisting, or misconfigured fetch handlers. Verify your backend connection method, token validity, and domainKey settings during initialization.

ChatKit embedding supports both approaches: use OpenAI Agent Builder hosted workflows with a domain key and client token for quick setup, or build a custom backend with api.url and fetch for complete control over authentication and backend logic.