chatkit-svelte

Unofficial Svelte 5 binding for OpenAI's ChatKit Web Component.

Installation

npm install chatkit-svelte @openai/chatkit
# or
pnpm add chatkit-svelte @openai/chatkit

Render

<script lang="ts">
  import Chatkit from 'chatkit-svelte';
  import type { OpenAIChatKit } from '@openai/chatkit';

  let chatkitRef: OpenAIChatKit;
</script>

<Chatkit
    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 | | 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: