ChatKit クイックスタートでチャットを埋め込んだら、テーマを変更してチャットをカスタマイズできます。ライトテーマとダークテーマを切り替えたり、アクセントカラー、情報密度、角の丸みを調整したりして、アプリのデザインに合わせます。
概要
テーマをカスタマイズするには、設定をまとめたオプションオブジェクトを渡します。ChatKit クイックスタートに沿ってフロントエンドに ChatKit を埋め込んだ場合は、以下の React の構文を使用します。
- React：
useChatKit({...})にオプションを渡します。 - 高度な統合：
chatkit.setOptions({...})でオプションを設定します。
どちらの方法でも、オプションオブジェクトの構造は同じです。
カスタマイズオプションの確認
ChatKit Studio では、実際に動作する ChatKit の実装例や、操作しながら設定を試せるビルダーを利用できます。手を動かしながら開発したい方は、以下のリソースから始めてください。
ChatKit UI の体験
デモを操作して ChatKit を試せます。
利用できるウィジェットを一覧で確認できます。
デモを操作しながら使い方を学べます。
動作する実装例
実際に動作する ChatKit のサンプルを、自分のアプリの参考にできます。
リポジトリをクローンすると、そのまま動作するテンプレートを使って開発を始められます。
テーマの変更
配色やタイポグラフィなどを指定して、チャットの外観をプロダクトのデザインに合わせます。以下の例では、ダークモードに切り替え、配色を変更し、角を丸め、情報密度を調整して、フォントを指定します。
設定できるすべてのテーマオプションについては、API リファレンスを参照してください。
const options = {
theme: {
colorScheme: "dark",
color: {
accent: {
primary: "#2D8CFF",
level: 2,
},
},
radius: "round",
density: "compact",
typography: { fontFamily: "'Inter', sans-serif" },
},
};開始画面のテキストのカスタマイズ
コンポーザーのプレースホルダーテキストを変更すると、どんな質問ができるか、最初に何を入力すればよいかをユーザーに示せます。
const options = {
composer: {
placeholder: "Ask anything about your data…",
},
startScreen: {
greeting: "Welcome to FeedbackBot!",
},
};新しいスレッドでのプロンプト候補の表示
会話の開始時にプロンプトの候補を表示すると、どのような質問や操作ができるかをユーザーに示せます。
const options = {
startScreen: {
greeting: "What can I help you build today?",
prompts: [
{
name: "Check on the status of a ticket",
prompt: "Can you help me check on the status of a ticket?",
icon: "search",
},
{
name: "Create Ticket",
prompt: "Can you help me create a new support ticket?",
icon: "write",
},
],
},
};ヘッダーへのカスタムボタンの追加
ヘッダーにカスタムボタンを追加すると、アプリに合わせたナビゲーションや関連情報、操作を提供できます。
const options = {
header: {
customButtonLeft: {
icon: "settings-cog",
onClick: () => openProfileSettings(),
},
customButtonRight: {
icon: "home",
onClick: () => openHomePage(),
},
},
};ファイル添付の有効化
ファイル添付はデフォルトで無効です。有効にするには、ファイル添付の設定を追加します。カスタムバックエンドを使用する場合を除き、アップロード方式には hosted を指定する必要があります。カスタムバックエンドで使用できるその他のアップロード方式については、Python SDK のドキュメントを参照してください。
ユーザーがメッセージに添付できるファイルの数、サイズ、種類も設定できます。
const options = {
composer: {
attachments: {
uploadStrategy: { type: "hosted" },
maxSize: 20 * 1024 * 1024, // 20 MB per file
maxCount: 3,
accept: { "application/pdf": [".pdf"], "image/*": [".png", ".jpg"] },
},
},
};エンティティタグを使ったコンポーザーでの @メンションの有効化
ユーザーは @メンションを使って、アプリ独自の「エンティティ」にタグを付けられます。これにより、会話に詳しいコンテキストを加え、ユーザーが会話の中でエンティティを操作できるようになります。
onTagSearchで、入力された検索条件に一致するエンティティの一覧を返します。onClickで、エンティティのクリックイベントを処理します。
const options = {
entities: {
async onTagSearch(query) {
void query;
return [
{
id: "user_123",
title: "Jane Doe",
group: "People",
interactive: true,
},
{
id: "document_123",
title: "Quarterly Plan",
group: "Documents",
interactive: true,
},
];
},
onClick: (entity) => {
navigateToEntity(entity.id);
},
},
};エンティティタグの表示のカスタマイズ
ウィジェットを使うと、エンティティタグにマウスポインターを合わせたときの表示をカスタマイズできます。たとえば、ユーザーがタグにポインターを合わせると、名刺やドキュメントの要約、画像などをプレビューとして表示できます。
利用できるウィジェットを一覧で確認できます。
const options = {
entities: {
async onTagSearch() {
return [];
},
onRequestPreview: async (entity) => ({
preview: {
type: "Card",
children: [
{ type: "Text", value: `Profile: ${entity.title}` },
{ type: "Text", value: "Role: Developer" },
],
},
}),
},
};コンポーザーへのカスタムツールの追加
コンポーザーからアプリ固有の操作を実行できるようにすると、ユーザーの作業効率が向上します。ユーザーが選んだツールは、優先して使用するツールとしてモデルに送信されます。
const options = {
composer: {
tools: [
{
id: "add-note",
label: "Add Note",
icon: "write",
pinned: true,
},
],
},
};UI 領域と機能の有効化・無効化
ヘッダーで設定できる範囲を超えてカスタマイズし、独自の実装を使いたい場合は、主な UI 領域や機能を無効にできます。たとえばサポート用チャットボットのように、スレッドや履歴という考え方が用途に合わない場合は、履歴を無効にすると便利です。
const options = {
history: { enabled: false },
header: { enabled: false },
};ロケールの上書き
アプリ全体で言語を設定している場合は、その設定に合わせてデフォルトのロケールを上書きできます。デフォルトでは、ブラウザのロケールが使用されます。
const options = {
locale: "de-DE",
};