chatkit-svelte

!Svelte

Unofficial Svelte 5 binding for OpenAI's ChatKit Web Component. Updated to Chatkit 1.5.0.

Installation

``bash
npm install chatkit-svelte @openai/chatkit


or


pnpm add chatkit-svelte @openai/chatkit
`

Render

`js


bind:ref={chatkitRef}
options={{
api: { getClientSecret: async (existing) => "your_client_token" },
startScreen: {
greeting: "Welcome to KB!"
}
}},
class="h-[800px] w-[500px]",
onError={(e) => console.error("Chatkit Error:", e)}
onResponseStart={() => console.log("Response Began")}
onResponseEnd={() => console.log("Response Ended")}
onThreadChange={(e) => console.log("Thread Changed:", e)}
onThreadLoadStart={(e) => console.log("Thread Load Started:", e.threadId)}
onLog={(e) => console.log("Chatkit Log:", e)}
onReady={() => console.log("Chatkit is ready")}
onEffect={(e) => console.log("Chatkit Fire-n-Forget:", e)}
onChatkitScriptError={() => console.error("Chatkit script failed to load")}
/>
`

To learn more about the Web Component, please refer the official sources:

- OpenAI ChatKit JS Guide
- ChatKit JS GitHub Repository

Component Properties

| Name | Type | Comment |
|------|------|---------|
| options | ChatkitOptions | Configuration options for Chatkit. See ChatkitOptions for details. |
| class | string | CSS classes to apply to the Chatkit component. |
| ref | OpenAIChatKit | Reference to the underlying Chatkit Web Component instance. |
| onLog | (e) => void | Event handler |
| onError | (e) => void | Event handler |
| onResponseStart | () => void | Event handler |
| onResponseEnd | () => void | Event handler |
| onThreadChange | (e) => void | Event handler |
| onThreadLoadStart | (e) => void | Event handler |
| onThreadLoadEnd | (e) => void | Event handler |
| onReady | () => void | Event handler |
| onEffect | (e) => void | Event handler |
| onToolChange | (e) => void | Event handler for composer tool changes. |
| onChatkitScriptError | () => void | Event handler called when chatkit JS script could not be loaded. Use this to manage error state. |




> About Events, see here.

> About Methods, see here. They are accessible using component instance ref`.
>

> Valid HTMLAttributes can also be passed to the component.

Samples

Chatkit with a widget: