Customize ChatKit

ChatKit is fully configurable through the options object you pass in React (useChatKit) or on the web component (chatkit.setOptions). Check the ChatKitOptions reference for every available field, and use the ChatKit Playground to experiment with settings and copy a ready-to-use configuration.

React

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

const { control } = useChatKit({
  theme: {
    colorScheme: 'dark',
    radius: 'round',
    color: {
      accent: { primary: '#8B5CF6', level: 2 },
    },
  },
  header: {
    enabled: true,
    rightAction: {
      icon: 'light-mode',
      onClick: () => console.log('Toggle theme'),
    },
  },
  history: {
    enabled: true,
    showDelete: true,
    showRename: true,
  },
  startScreen: {
    greeting: 'How can we help?',
    prompts: [
      {
        label: 'Troubleshoot an issue',
        prompt: 'Help me fix an issue',
        icon: 'lifesaver',
      },
      {
        label: 'Request a feature',
        prompt: 'I have an idea',
        icon: 'lightbulb',
      },
    ],
  },
  composer: {
    placeholder: 'Ask the assistant…',
  },
  threadItemActions: {
    feedback: true,
    retry: true,
  },
});

Web component

chatkit.setOptions({
  theme: {
    colorScheme: 'dark',
    radius: 'round',
    color: {
      accent: { primary: '#8B5CF6', level: 2 },
    },
  },
  header: {
    enabled: true,
    rightAction: {
      icon: 'light-mode',
      onClick: () => console.log('Toggle theme'),
    },
  },
  history: {
    enabled: true,
    showDelete: true,
    showRename: true,
  },
  startScreen: {
    greeting: 'How can we help?',
    prompts: [
      {
        label: 'Troubleshoot an issue',
        prompt: 'Help me fix an issue',
        icon: 'lifesaver',
      },
      {
        label: 'Request a feature',
        prompt: 'I have an idea',
        icon: 'lightbulb',
      },
    ],
  },
  composer: {
    placeholder: 'Ask the assistant…',
  },
  threadItemActions: {
    feedback: true,
    retry: true,
  },
});

Key areas to configure

• Theme — Tune the appearance with the theme options reference.
• Header & history — Manage layout and browsing with the header options reference and history options reference.
• Start screen — Greet users and highlight actions via the startScreen options reference.
• Composer — Configure inputs, tools, model picker, and mentions through the composer options reference.
• Thread item actions — Control feedback and retry behavior with the threadItemActions options reference.