Quick start

Paste the ChatKit script, render the component, and your chat UI is ready. Toggle between React and vanilla JavaScript below to see the full snippet for each setup.

<!-- Add once to your root HTML -->
<script
  src="https://cdn.platform.openai.com/deployments/chatkit/chatkit.js"
  async
></script>

React
Vanilla JS

npm install @openai/chatkit-react

import { ChatKit, useChatKit } from '@openai/chatkit-react';

export function SupportChat() {
  const { control } = useChatKit({
    api: {
      url: 'http://localhost:8000/chatkit',
      domainKey: 'local-dev',
    },
  });

  return <ChatKit control={control} className="h-[600px] w-[360px]" />;
}

npm install @openai/chatkit

<div id="chat-root"></div>
<script type="module">
  import '@openai/chatkit';

  const chatkit = document.createElement('openai-chatkit');

  chatkit.setOptions({
    api: {
      url: 'http://localhost:8000/chatkit',
      domainKey: 'local-dev',
    },
  });

  document.getElementById('chat-root')?.append(chatkit);
</script>