openai · OpenAI Platform Docs
Theming and customization in ChatKit
Teaches how to customize the ChatKit UI by passing an options object to configure themes, colors, density, corner radius, start screen text, starter prompts, header buttons, and file attachment settings.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
Theming and customization in ChatKit
Teaches how to customize the ChatKit UI by passing an options object to configure themes, colors, density, corner radius, start screen text, starter prompts, header buttons, and file attachment settings.
When To Use
Use when you need to match a ChatKit embed to a specific application aesthetic or add custom functional elements like header buttons and file attachments.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/theming-and-customization-in-chatkit-workflow-guide.md | A guide detailing how to customize ChatKit UI elements including light and dark themes, accent colors, density, and corner radius. | Questions about a guide detailing how to customize ChatKit UI elements including light and dark themes, accent colors, density, and c... |
examples/theming-and-customization-in-chatkit-chatkit-theming-customization.jsx | A JSX code example demonstrating how to configure ChatKitOptions including color schemes, accent colors, and typography settings. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating how to configure ChatKitOptions including color schemes, accent colors, and typograp... |
examples/theming-and-customization-in-chatkit-chatkit-theming-customization-jsx-o.jsx | A JSX code example demonstrating how to configure ChatKit options including composer placeholders and start screen greetings. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating how to configure ChatKit options including composer placeholders and start screen gr... |
examples/theming-and-customization-in-chatkit-chatkit-theming-customization-optio.js | A JavaScript object demonstrating how to configure ChatKit options including start screen greetings and prompt configurations. | Exact payloads, commands, or snippets shown in A JavaScript object demonstrating how to configure ChatKit options including start screen greetings and prompt config... |
examples/theming-and-customization-in-chatkit-chatkit-theming-customization-jsx-o-2.jsx | A JSX code example demonstrating how to configure the ChatKitOptions object to customize header buttons and UI elements. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating how to configure the ChatKitOptions object to customize header buttons and UI elements. |
examples/theming-and-customization-in-chatkit-chatkit-theming-customization-optio.jsx | A JSX code example demonstrating how to configure ChatKitOptions including composer settings, attachment upload strategies, and file constraints. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating how to configure ChatKitOptions including composer settings, attachment upload strat... |
examples/theming-and-customization-in-chatkit-chatkit-theming-customization-jsx-o-3.jsx | A JSX code example demonstrating how to configure the ChatKitOptions object for custom theming and entity interaction. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating how to configure the ChatKitOptions object for custom theming and entity interaction. |
examples/theming-and-customization-in-chatkit-chatkit-theming-customization-jsx-o-4.jsx | A JSX code example demonstrating how to configure ChatKitOptions for custom entity previews and tag search behavior. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating how to configure ChatKitOptions for custom entity previews and tag search behavior. |
examples/theming-and-customization-in-chatkit-chatkit-theming-customization-jsx-o-5.jsx | A JSX code example demonstrating how to configure the ChatKitOptions object to customize the composer tools and interface appearance. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating how to configure the ChatKitOptions object to customize the composer tools and inter... |
examples/theming-and-customization-in-chatkit-chatkit-theming-customization-jsx-o-6.jsx | A JSX code example demonstrating how to configure the ChatKitOptions object to customize UI elements like history and header settings. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating how to configure the ChatKitOptions object to customize UI elements like history and... |
examples/theming-and-customization-in-chatkit-chatkit-theming-customization-jsx-o-7.jsx | A JSX code example demonstrating how to configure the ChatKitOptions object for theming and localization. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating how to configure the ChatKitOptions object for theming and localization. |
What This Skill Covers
- After following the ChatKit quickstart, learn how to change themes and add customization to your chat embed. Match your app’s aesthetic with light and dark t...
- Main sections:
Overview,Explore customization options,Explore ChatKit UI,See working examples,Change the theme.
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://developers.openai.com/api/docs/guides/chatkit-themes.md