syncfusion-maui-ai-assistview について
Syncfusion SfAIAssistViewでカスタマイズ可能な会話画面を構築する.NET MAUI開発者向けガイドです。多様なメッセージ形式、会話履歴、提案、複数のAIエージェントに対応します。
主な機能
- 01テキスト、画像、リンク、カード、添付ファイルの表示
- 02チャットデータのバインドと会話履歴の管理
- 03複数のAIエージェントと提案の設定
- 04メッセージテンプレート、エディター、ツールバーのカスタマイズ
- 05音声入力と応答音声の再生
- 06プロンプトライブラリと通知の追加
活用シーン
- 01.NET MAUIアプリにAIチャット画面を構築
- 02履歴付きのQ&Aやカスタマーサポートアプリを作成
- 03専門分野ごとに複数のAIエージェントを設定
- 04メッセージ入力に添付ファイルと音声機能を追加
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ syncfusion/ maui-ui-components-skills --skill syncfusion-maui-ai-assistviewインストール後、Claude Code で/syncfusion-maui-ai-assistviewを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/advanced-topics.mdagents.mdautocomplete-suggestions.mdcustomization.mddisclaimer-message.mdeditor-and-attachments.mdevents.mdgetting-started.mdheader.mdhistory.mditems-and-data-binding.mdprompt-composition.mdprompt-library.mdscrolling.mdstyling.mdsuggestions.mdtemplates-and-content.mdtime-break-separators.mdtoast-notifications.mdtoolbar.mdvoice-support.md詳細
.NET MAUI での AI AssistView の実装
Syncfusion .NET MAUI AI AssistView(SfAIAssistView)は、.NET MAUI アプリケーションに AI サービスを統合するための包括的なコントロールです。リクエスト、レスポンス、提案、会話履歴、複数のエージェント、トースト通知への組み込みサポートと、豊富なカスタマイズオプションを備えた、使いやすい会話型インターフェイスを提供します。
このスキルを使用する場面
次のような場合に、このスキルを使用してください。
- .NET MAUI アプリケーションに AI チャットインターフェイスを統合する
- ユーザーのリクエストと AI のレスポンスを含む会話型 UI を表示する
- 提案プロンプトを使った AI 搭載アシスタントを実装する
- 会話履歴を含むチャットベースのインタラクションを作成する
- AI サービスと連携するインテリジェントなアプリケーションを構築する
- テンプレート、テーマ、スタイルを使用してチャットの外観をカスタマイズする
- イベント、コマンド、データバインディングを通じてユーザー操作を処理する
- ヘッダー、ツールバー、空の状態を使って会話フローを管理する
- 多言語対応の AI チャットアプリケーション向けにローカライズを実装する
- 複数の AI エージェントを使用して、特化したアシスタントエクスペリエンスを実現する
- ブロックしないフィードバックとして、状況に応じたトースト通知を表示する
- .NET MAUI のクロスプラットフォーム対応を活用して、レスポンシブな AI インターフェイスを設計する
一般的なシナリオ:
- カスタマーサポートチャットボット、AI アシスタント、ヘルプデスクインターフェイス
- 会話型 AI アプリケーション、仮想エージェント、インタラクティブなアシスタント
- チャットベースのコンテンツ生成、Q&A アプリケーション、ナレッジベース
- 個人の生産性を高めるアシスタント、AI を活用したメモ作成、文章作成支援ツール
- AI チューターを備えた教育プラットフォーム、インタラクティブな学習インターフェイス
- AI 搭載のレスポンスを提供する、あらゆるリアルタイムの会話型 UI
コンポーネントの概要
SfAIAssistView は、機能が豊富な包括的な会話型コントロールで、次の機能を備えています。
- ユーザーのリクエストと AI のレスポンスを含む、AI 搭載のチャットインターフェイスを表示します
- 複数のコンテンツタイプ(テキスト、画像、ハイパーリンク、カード、添付ファイル)をサポートします
- オブザーバブルコレクションと MVVM パターンを使った柔軟なデータバインディングを提供します
- テンプレートとセレクターを使用して、リクエストとレスポンスの表示をカスタマイズできます
- 選択したエージェントのカスタマイズを含む、複数の AI エージェントをサポートします
- 成功、警告、エラーのフィードバックに対応するトースト通知をサポートします
- スマートな提案システム(ヘッダー、レスポンス固有、フッターのプロンプト)を備えています
- 一時的なセッションに対応したツールバーとチャットモードの管理機能を提供します
- タイムスタンプとインタラクションの追跡機能を備えた会話履歴を保持します
- リッチなユーザー操作(タップ、長押し、コンテキストメニュー)を処理します
- ファイル添付とアクションに対応した、カスタマイズ可能なメッセージ入力エディターを提供します
- 構造化されたプロンプトの作成、免責事項メッセージ、時間区切り線をサポートします
- 自動スクロール、最下部へのスクロールボタン、音声入力、音声再生を備えています
- 包括的なスタイル設定、テーマ設定、プラットフォーム固有のエフェクトをサポートします
ドキュメントとナビゲーションガイド
はじめに
📄 参照: references/getting-started.md
- NuGet パッケージのインストールとセットアップ
- MauiProgram.cs でのハンドラー登録
- XAML 名前空間のインポートとコントロールの初期化
- オブザーバブルコレクションを使った ViewModel のセットアップ
- 最初のリクエスト/レスポンスサイクルの実装
- よくあるセットアップの問題とトラブルシューティング
エージェント
📄 参照: references/agents.md
- 1 つのチャットエクスペリエンス内での複数の AI エージェント
- エージェントコレクション、選択、エディターの
@検索 - 選択したエージェントの表示設定とテンプレートのカスタマイズ
アイテムとデータバインディング
📄 参照: references/items-and-data-binding.md
- アイテムのプロパティ(テキスト、プロフィール、タイムスタンプ、エラーメッセージ)
- アイテムの種類(テキスト、ハイパーリンク、画像、カード、添付ファイル)
- アイテムのインタラクションイベントとコマンド
- エラーレスポンスの表示と処理
- カスタムアイテムビューのテンプレート
- カスタムモデルのバインディングとコンバーター
- リクエストとレスポンスのコンテキストメニュー
提案
📄 参照: references/suggestions.md
- ヘッダーレベルの提案プロンプト
- 応答ごとの提案
- エディターの上に表示されるフッターの提案
- 提案の選択イベントとコマンド
- キャンセルと送信の動作
ヘッダー
📄 参照: references/header.md
- ヘッダーの表示とカスタマイズ
- ヘッダーテキストとテンプレートの設定
- ヘッダーへの提案の表示
ツールバー
📄 参照: references/toolbar.md
- ツールバーの表示とタイトルのカスタマイズ
- 新しいチャットボタンの実装
- 一時チャットモードのサポート
- チャットモード切り替えイベント
履歴
📄 参照: references/history.md
- 会話履歴の有効化
- 会話項目の構造(タイトル、タイムスタンプ、メッセージ、ピン留め状態)
- 会話のフィルタリング、ピン留め、名前の変更、削除
- 履歴の操作処理と復元の動作
イベントとコマンド
📄 参照: references/events.md
- 項目のタップイベントと長押しイベント
- リクエストイベントとコマンド処理
- フッターのアクションコマンド(コピー、再試行、評価)
エディターと添付ファイル
📄 参照: references/editor-and-attachments.md
- カスタムエディターレイアウトとテンプレート
- 長いプロンプト向けの展開可能なリクエストエディター
- 以前のリクエストの編集
- ファイル添付のサポート、制限、画像プレビュー
- 添付ボタンのモードとアクションボタンの設定
- 送信ボタンのカスタマイズ
テンプレートとコンテンツタイプ
📄 参照: references/templates-and-content.md
- リクエスト項目と応答項目のテンプレート
- 動的テンプレート向けのテンプレートセレクター
- フルコントロールテンプレートのカスタマイズ
- カスタムチャットのレンダリング実装
スクロール
📄 参照: references/scrolling.md
- 最新メッセージへの自動スクロール
- 最新のリクエストまたは応答への自動スクロール動作
- 最下部へのスクロールボタンの機能
- ボタンの外観のカスタマイズ
プロンプトの構成
📄 参照: references/prompt-composition.md
- システム、コンテキスト、パートベースのプロンプト構成
- 決定論的な構成順序とフィルタリング
- プロンプト構成イベントの検査
プロンプトライブラリ
📄 参照: references/prompt-library.md
- 定義済みプロンプトのカタログの閲覧、検索、選択
SfPromptLibrary.ItemsSourceとPromptItemモデルPromptSelectedイベントまたはPromptSelectedCommandによる選択処理
免責事項メッセージ
📄 参照: references/disclaimer-message.md
- エディターの下に表示する免責事項テキスト
- 表示とフッターの間隔の動作
時間区切りセパレーター
📄 参照: references/time-break-separators.md
- 日付に基づくメッセージのグループ化
- 今日/昨日/曜日を示すスマートラベル
- カスタム時間区切りテンプレートとスタイル設定
音声サポート
📄 参照: references/voice-support.md
- マイクボタンによる音声入力
- 音声認識とエディターへのテキスト入力
- 応答音声の再生コントロール
- プラットフォームの権限とフォールバック動作
トースト通知
📄 参照: references/toast-notifications.md
- 処理を妨げない成功、警告、エラーのフィードバック
高度なトピック
📄 参照: references/advanced-topics.md
- テキスト選択のサポート
- 応答の停止機能
- パフォーマンスの最適化
オートコンプリートの提案
📄 参照: references/autocomplete-suggestions.md
- 入力中のオートコンプリート提案
- プレフィックスとタイミングの設定
- 提案データのバインディング
- 選択処理と動作
- カスタム提案テンプレート
- 状態の監視とサーバー統合
スタイリング
📄 参照: references/styling.md
- テーマキーの適用
- すべての UI 要素のスタイルキー
- リクエスト/レスポンスの表示のカスタマイズ
- プラットフォーム固有のスタイル効果
カスタマイズ
📄 参照: references/customization.md
- 空の状態のビュー
- ローカライズ(RESX)
- 右から左への(RTL)サポート
AllowImagePreviewによる画像プレビューの無効化(デフォルトはtrue)- プラットフォーム固有の効果(iOS のリキッドグラス)