プロジェクト用のカスタムインターフェースを作成する

Interfaces を使用すると、EKB プロジェクト用のカスタムでアプリライクなエクスペリエンスを作成できます。デフォルトのチャットインターフェースの代わりに、さまざまなページタイプ、カスタムレイアウト、特定のユースケースに合わせたカスタマイズ設定を備えたマルチページアプリケーションを構築できます。

Interfaces は以下を提供します：

• カスタムユーザー体験: 目的別に構築されたインターフェースでデフォルトのチャットモードを置き換えます
• マルチページアプリケーション: 異なる機能を提供する複数ページのインターフェースを作成します
• 柔軟なページタイプ: チャット、スマートテーブル、ナレッジベース、アクション、カスタムページから選択できます
• 公開と共有: インターフェースを公開し、プロジェクトのデフォルトとして設定します
• プロフェッショナルブランディング: 外部ユーザー向けのブランド化されたインターフェースを作成します

主要コンセプト

インターフェース

インターフェースは、合計で完全なユーザー体験を形成するページのコレクションです。各プロジェクトは複数のインターフェースを持つことができますが、デフォルトとして設定できるのは1つだけです。

インターフェースプロパティ：

• Name: インターフェースの表示名
• Description: インターフェースの目的の説明（オプション）
• Published: インターフェースが公開され、ユーザーが利用可能かどうか
• Default: プロジェクトのデフォルトインターフェースかどうか

ページ

ページは、インターフェース内の単一の画面です。ページは異なるタイプにすることができ、それぞれに固有の設定オプションがあります。

ページタイプ：

• Chat Page: エージェントとのインタラクティブチャットインターフェース
• Smart Table Page: フィルタリング、編集、ビュー機能を備えたデータテーブル
• Knowledge Base Page: ドキュメントの検索と閲覧
• Actions Page: ツールとワークフローの閲覧と実行
• Custom Page: カスタム要素を使用したドラッグ＆ドロップページビルダー

ページ設定

各ページタイプには、動作と外観を制御する固有の設定オプションがあります。

はじめに

最初のインターフェースを作成する

1. Interfaces に移動する

   • プロジェクトに移動
   • プロジェクトナビゲーションで Interfaces をクリック

2. 新しいインターフェースを作成する

   • + Create Interface をクリック
   • デフォルトのチャットページを含む新しいインターフェースが作成されます
   • Interface Builder にリダイレクトされます

3. インターフェースを設定する

   • Interface Builder を使用してページを追加し、設定を構成し、レイアウトをカスタマイズします
   • 詳細については Interface Builderセクションを参照してください

デフォルトインターフェースの設定

1. インターフェースリストから

   • Interfaces ページに移動
   • デフォルトに設定したいインターフェースを見つける
   • Set as Default をクリック

2. Interface Builder から

   • デフォルトに設定したいインターフェースを開く
   • インターフェース設定でデフォルトとしてマーク

注: 同時にデフォルトにできるのは1つのインターフェースだけです。新しいデフォルトを設定すると、以前のデフォルトは自動的に解除されます。

Interface Builder

Interface Builder は、インターフェースを作成および設定する場所です。以下を提供します：

• ページ管理: ページの追加、編集、削除、並べ替え
• ページ設定: 各ページの設定と動作の構成
• プレビュー: 公開前のインターフェースプレビュー
• 公開: インターフェースを公開して利用可能にする

Builder にアクセスする

1. Interfaces リストから、任意のインターフェースの Edit をクリック
2. または Open をクリックして公開されたインターフェースを表示

Interface Builder のレイアウト

Builder には3つの主要なエリアがあります：

1. サイドバー: ページリストと設定パネル
2. キャンバス: 現在のページのプレビュー
3. 設定パネル: 選択されたページの設定

ページタイプ

Chat Page

Chat Page は、ユーザーが AI エージェントと会話できるインタラクティブチャットインターフェースを提供します。

設定オプション：

• エージェント選択：

  • Default Agent: チャットのデフォルトエージェントを設定
  • Single Agent Mode: 1つのエージェクトのみ表示（エージェント選択を非表示）
  • Enabled Agents: 利用可能にするエージェント ID のホワイトリスト
  • Display Type: 'compact' または 'detailed' のチャットリスト表示から選択

• チャット設定：

  • Hide Footer: チャットフッターを非表示
  • Metadata: チャットセッションに渡すカスタムメタデータ

ユースケース：

• カスタマーサポートチャットボット
• インタラクティブな Q&A インターフェース
• エージェント固有のチャットインターフェース

Smart Table Page

Smart Table Page は、高度なフィルタリング、ソート、編集機能を備えたデータテーブルを表示します。

ビュータイプ：

1. Table View: 行と列を持つ標準データテーブル

   • Hide Toolbar: テーブルツールバーを非表示
   • Read Only: テーブルを読み取り専用に設定

2. Review View: データ検証用のレビューインターフェース

   • Preset Filters: レビュービュー用の事前設定フィルター
   • Hide Filters: フィルターコントロールを非表示
   • Default Edit Mode: 編集モードで開始

3. Dashboard View: チャートと指標を備えた分析ダッシュボード

   • Dashboard View ID: 表示するダッシュボードビューの ID
   • Hide Period Selector: 期間セレクターを非表示
   • Default Period: ダッシュボードのデフォルト期間

タブサポート：

Smart Table Page は複数のタブを持つことができ、各タブが異なるテーブルまたはビューを表示します：

• Table Tabs: 各タブが異なるスマートテーブルを表示可能
• View Tabs: 各タブが同じテーブルの異なるビュー（テーブル、レビュー、ダッシュボード）を表示可能
• Tab Configuration: 各タブを独立して設定可能

設定手順：

1. 表示するスマートテーブルを選択
2. ビュータイプ（テーブル、レビュー、またはダッシュボード）を選択
3. ビュー固有の設定を構成
4. 必要に応じてタブを追加（マルチテーブルまたはマルチビューページ向け）

ユースケース：

• データ管理インターフェース
• レビューと承認ワークフロー
• 分析ダッシュボード
• マルチテーブルデータビュー

Knowledge Base Page

Knowledge Base Page は、ドキュメントの検索と閲覧機能を提供します。

設定オプション：

• Search Enabled: 検索機能の有効/無効
• Categories Enabled: ドキュメントカテゴリの表示/非表示

ユースケース：

• ドキュメントライブラリインターフェース
• ナレッジリポジトリ
• ヘルプセンター

Actions Page

Actions Page は、ユーザーがツールとワークフローを閲覧および実行できるようにします。

表示モード：

1. Multi-Action Mode: グリッドまたはリストで複数のアクションを表示

   • Show Search: 検索機能を有効化
   • View Mode: 'grid' または 'list' の表示から選択
   • Hide Toolbar: アクションツールバーを非表示
   • Enable Filtering: アクションフィルタリングを有効化
   • Default Filter: 適用するデフォルトフィルター
   • Allowed Actions: 表示するアクション flow_id のホワイトリスト

2. Single-Action Mode: フォームとして1つのアクションを表示

   • Selected Action ID: 表示する特定のアクションの flow_id
   • Hide Form Header: アクションのタイトル/説明を非表示
   • Auto Execute: 必須フィールドにすべてデフォルト値がある場合、ページ読み込み時に自動実行

設定手順：

1. 表示モードを選択（マルチまたはシングル）
2. モード固有の設定を構成
3. 許可されたアクションを選択（ホワイトリストを使用する場合）

ユースケース：

• ワークフロー実行インターフェース
• ツールライブラリ
• シングルアクションフォーム
• プロセス自動化インターフェース

Custom Page

Custom Page は、ドラッグ＆ドロップ要素を使用してページをゼロから構築できるようにします。

利用可能な要素：

データ要素：

• Grid: データグリッド表示
• Chart: チャート可視化
• Number: 数値表示
• Filter: フィルターコントロール

UI 要素：

• Text: テキスト表示
• Button: インタラクティブボタン
• Divider: ビジュアル区切り線

インタラクティブ要素：

• Record Picker: レコード選択コンポーネント
• Field: フォームフィールド

カスタムページの構築：

1. 要素を追加: パレットから要素をキャンバスにドラッグ
2. 要素を配置: クリック＆ドラッグで要素を配置
3. 要素を設定: 要素を選択して設定を構成
4. 保存: 変更を保存

ユースケース：

• カスタムダッシュボード
• フォームインターフェース
• データ可視化ページ
• ブランド化ランディングページ

ページの管理

ページの追加

1. Interface Builder で + Add Page をクリック
2. ページテンプレートを選択：
   • Chat Page
   • Smart Table
   • Knowledge Base
   • Actions
   • Custom Page
3. ページ設定を構成
4. ページがインターフェースに追加されます

ページの編集

1. サイドバーからページを選択
2. 設定パネルでページ設定を構成
3. 変更は自動的に保存されます

ページの並べ替え

1. ページリストで、ページをクリック＆ドラッグして並べ替え
2. この順序は、公開されたインターフェースのナビゲーション順序を決定します

ページの削除

1. 削除したいページを選択
2. 削除ボタンをクリック
3. 削除を確認

注: インターフェースの最後のページは削除できません。少なくとも1つのページが必要です。

インターフェースの公開

インターフェースを公開する

1. Interface Builder から：

   • 公開したいインターフェースを開く
   • インターフェース設定で Publish をクリック
   • インターフェースが公開済みとしてマークされます

2. Interface リストから：

   • 公開したいインターフェースを見つける
   • 公開トグルまたはボタンを使用

公開されたインターフェースは：

• ユーザーがプロジェクトにアクセスしたときに利用可能
• "Published" バッジ付きでインターフェースリストに表示
• プロジェクトのアプリ URL 経由でアクセス可能

インターフェースを非公開にする

1. 公開されたインターフェースを開く
2. インターフェース設定で Unpublish をクリック
3. インターフェースはユーザーに利用できなくなります

ベストプラクティス

インターフェース設計

1. 計画から始めましょう: 構築前にインターフェース構造を計画します

   • 必要なページを特定
   • ページタイプを決定
   • ナビゲーションフローを計画

2. わかりやすい名前を使用: インターフェースとページに明確で説明的な名前を使用します

   • ユーザーが目的を理解しやすくなります
   • 管理が容易になります

3. ページを論理的に整理: ページを論理的な順序で配置します

   • 最も重要なページを最初に
   • 関連ページをグループ化

ページ設定

1. Chat Page を慎重に設定:

   • 適切なデフォルトエージェントを設定
   • 1つのエージェントだけで十分な場合はシングルエージェントモードを使用
   • より良い制御のためにエージェントをホワイトリスト化

2. Smart Table Page を最適化:

   • ユースケースに適したビュータイプを選択
   • マルチテーブルビューにはタブを使用
   • フィルターと設定を適切に構成

3. Actions Page をテスト:

   • マルチとシングルの両方のモードでアクションをテスト
   • アクションホワイトリストが正しく機能することを確認
   • 自動実行機能をテスト

パフォーマンス

1. ページ数を制限: ページ数を合理的に保ちます

   • ページが多すぎるとインターフェースが遅くなる可能性があります
   • 代わりにページ内のタブの使用を検討

2. Custom Page を最適化:

   • 多くの要素でカスタムページを過負荷にしない
   • 効率的な要素設定を使用

3. 公開前にテスト: 公開前に常にプレビューとテストを行います

   • すべてのページ設定を確認
   • ナビゲーションフローをテスト
   • すべての機能が動作することを確認

ユースケース

カスタマーサポートインターフェース

構成：

• Page 1: Chat - サポートエージェントとのメインサポートチャット
• Page 2: Knowledge Base - ヘルプ記事とドキュメント
• Page 3: Actions - チケット送信またはリクエストアクション

設定：

• Chat Page: サポートエージェントのシングルエージェントモード
• Knowledge Base: 検索とカテゴリを有効化
• Actions: サポートワークフローのマルチアクションモード

データ管理インターフェース

構成：

• Page 1: Dashboard - Smart Table ダッシュボードビュー
• Page 2: Data Entry - レビュービュー付き Smart Table
• Page 3: Reports - 複数タブ付き Smart Table

設定：

• Dashboard: デフォルト期間設定、期間セレクター表示
• Data Entry: プリセットフィルター、編集モード有効化
• Reports: 異なるテーブルビューの複数タブ

ワークフロー自動化インターフェース

構成：

• Page 1: Actions - ワークフローの閲覧と実行
• Page 2: Status - ワークフローステータスを表示する Smart Table
• Page 3: Custom Dashboard - チャートと指標を含むカスタムページ

設定：

• Actions: グリッドビュー、検索有効化、カテゴリでフィルタリング
• Status: テーブルビュー、読み取り専用、自動更新
• Dashboard: 主要指標を表示するカスタム要素

トラブルシューティング

インターフェースが表示されない

問題: インターフェースがリストに表示されない、またはアクセスできない。

解決策：

• インターフェースが公開されているか確認
• 正しいプロジェクトを表示しているか確認
• 適切な権限があるか確認

ページが読み込まれない

問題: ページが読み込まれない、またはエラーが表示される。

解決策：

• ページ設定を確認
• すべての必要なリソース（テーブル、エージェント、アクション）が存在することを確認
• ページ設定の設定エラーを確認

デフォルトインターフェースが機能しない

問題: デフォルトインターフェースが使用されていない。

解決策：

• インターフェースがデフォルトとして設定されているか確認
• 別のインターフェースもデフォルトとして設定されていないか確認
• ページをリフレッシュまたはキャッシュをクリア

Smart Table Page の問題

問題: Smart Table Page がデータを表示しない、またはエラーがある。

解決策：

• テーブルが存在し、アクセス可能であることを確認
• ビュータイプ設定を確認
• テーブルの権限が正しいことを確認
• タブを使用している場合はタブ設定を確認

Actions Page の問題

問題: アクションが表示されない、または実行できない。

解決策：

• アクションホワイトリスト設定を確認
• アクションが存在し、公開されていることを確認
• アクションの権限を確認
• 表示モード設定を確認

API 統合

Interfaces は EKB API を通じてプログラムからアクセスできます。詳細については API Reference を参照してください：

• インターフェースの作成と管理
• ページの設定
• インターフェースの公開
• インターフェースデータへのアクセス

次のステップ

• Agents について学び、Chat Page を設定しましょう
• Smart Tables を探索してデータ管理を行いましょう
• Workflows を確認して Actions Page に活用しましょう
• Knowledge Base を確認してドキュメント管理を行いましょう