syncfusion-blazor-ai-assistview

Syncfusion Blazor AI AssistView

Syncfusion Blazor AI AssistView コンポーネントを使って、対話型 AI インターフェイスを構築できます。このスキルでは、Blazor Server、WebAssembly、Web App プロジェクトで、インタラクティブなチャットアプリケーション、AI アシスタント UI、プロンプトと応答のシステムを作成するための包括的なガイダンスを提供します。

コンポーネントの概要

SfAIAssistView コンポーネントは、AI を活用したチャットアプリケーションを構築するための専用 UI コントロールです。プロンプトと応答による会話の表示と操作を管理し、次の機能を標準でサポートします。

• プロンプト管理： 入力テキスト、候補、プレースホルダーテキスト
• 応答処理： 非同期処理、Markdown のレンダリング、ストリーミングのサポート
• カスタマイズ： アバターアイコン、スタイル設定、テーマとの統合
• UX 機能： 最下部へのスクロールインジケーター、会話履歴
• イベント統合： AI サービスのコールバック用 PromptRequested イベント

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールと NuGet パッケージの設定
• 基本的なコンポーネント構造と初期化
• PromptRequested イベントハンドラーの実装
• 非同期応答を使った最小限の動作例

プロンプトの設定

📄 参照： references/prompt-configuration.md

• 初期プロンプトテキストの設定
• プロンプトのプレースホルダーテキストの設定
• プロンプトと応答のコレクションの管理
• プロンプトイベントの非同期処理

プロンプト候補

📄 参照： references/prompt-suggestions.md

• ユーザーをガイドする候補リストの追加
• 候補のヘッダーのカスタマイズ
• 候補と応答のマッピングの作成
• 候補を使ったユーザー操作のパターン

カスタマイズとアイコン

📄 参照： references/customization-styling.md

• PromptIconCss を使ったユーザーアバターのカスタマイズ
• ResponseIconCss を使った AI アバターのカスタマイズ
• テーマに応じたアイコンの適用
• CSS クラスとアイコンの統合

高度な機能

📄 参照： references/advanced-features.md

• AI 応答での Markdown のレンダリング
• 最下部へのスクロールナビゲーション（EnableScrollToBottom）
• Prompts コレクションを使った会話履歴の管理
• 一般的なパターンとユースケース

AI サービスとの統合

📄 参照： references/ai-service-integration.md

• OpenAI API との統合（非ストリーミングとストリーミング）
• Azure OpenAI のデプロイ
• ローカルでの Ollama LLM のホスティング
• カスタムバックエンドのパターン
• エラー処理とレート制限の戦略

添付ファイル

📄 参照： references/attachments.md

• ファイル添付の有効化
• 添付ファイルの設定（ファイル形式、サイズ制限）
• 添付ファイルのイベント処理（アップロード、クリック、削除）
• AttachmentRemoving イベント（ファイルの削除前に発生し、キャンセル可能）
• サーバー側のアップロード実装
• セキュリティと検証のベストプラクティス

複数ビューのサポート

📄 参照： references/multi-view-support.md

• 複数の専門的な AI ビューの作成
• アクティブなビューの管理と切り替え
• ビューごとの設定
• ビューごとに分けた会話履歴
• ロールベースおよびワークスペースベースのビュー

ツールバー

📄 参照： references/toolbars.md

• プロンプトツールバーのカスタマイズ
• 応答ツールバーのアクション（コピー、いいね、再生成）
• ナビゲーションと事前読み込みを使った応答の再生成
• フッターツールバーの設定
• フッターツールバー項目の配置（ItemAlign.Left / ItemAlign.Right）
• カスタムツールバー項目とテンプレート
• ツールバーイベントの処理

テンプレート

📄 参照: references/templates.md

• 初期状態／空の状態に使用する BannerTemplate
• カスタムプロンプトの表示に使用する PromptItemTemplate
• カスタムレスポンスの表示に使用する ResponseItemTemplate
• レスポンス生成中にカスタムローディングインジケーターを表示する ResponseAnimationTemplate
• カスタム候補に使用する PromptSuggestionItemTemplate
• FooterTemplate と ViewTemplate のカスタマイズ
• テンプレートのコンテキストと使用可能なプロパティ

音声認識と音声合成

📄 参照: references/speech.md

• Text-to-Speech（TTS）の設定と話者設定のための TextToSpeechSettings
• 音声入力を統合する Speech-to-Text（STT）
• マイクへのアクセスと音声入力の処理
• 音声合成のカスタマイズ（ピッチ、速度、音量、言語）
• エラー処理とブラウザーの互換性

ストリーミングレスポンス

📄 参照: references/streaming.md

• ストリーミングモードの有効化
• 段階的な更新のための UpdateResponseAsync
• レスポンスのリアルタイム表示
• OpenAI、Azure、Ollama のストリーミング API との統合
• 応答停止機能
• パフォーマンスの最適化

生成 UI

📄 参照: references/generative-ui.md

• ToolUIBlock タグディレクティブを使ったカスタムツールの登録
• TextBlock と ToolBlock（IResponseBlock）を使った構造化レスポンスの作成
• Props 辞書を使ったツールへのパラメーターの受け渡し
• 1 つのレスポンス内でのテキストブロックとツールブロックの組み合わせ
• blocks JSON 配列を返す AI サービスの設定
• Prompts コレクションを使った生成 UI の会話の事前読み込み

思考の連鎖

📄 参照: references/chain-of-thoughts.md

• ThinkingBlock と BlockType.Thinking を使った推論ブロックの表示
• ThinkingStage、ThinkingStageStatus、インラインの ThinkingContextItem チップを使った構造化された Stages の追加
• 複数ステップのストリーミングパターン（モデルの推論に合わせて新しい思考ブロックを追加）
• ThinkingStageTemplate タグを使ったステージ表示のカスタマイズ
• 1 つのレスポンス内での思考ブロック、テキストブロック、ツールブロックの組み合わせ

メソッドとプログラマティック API

📄 参照: references/methods-api.md

• 自動プロンプトのための ExecutePromptAsync
• ストリーミング更新のための UpdateResponseAsync
• UI を手動で更新するための RefreshUIAsync
• スクロールを制御するための ScrollToBottomAsync
• 自動化されたワークフローとバッチ処理

クイックスタート

@using Syncfusion.Blazor.InteractiveChat

<div style="height: 400px; width: 600px;">
    <SfAIAssistView 
        Prompt="What is Blazor?" 
        PromptRequested="@OnPromptRequested">
    </SfAIAssistView>
</div>

@code {
    private async Task OnPromptRequested(AssistViewPromptRequestedEventArgs args)
    {
        // Add delay to simulate AI processing
        await Task.Delay(1000);
        
        // Connect to your AI service here (OpenAI, Azure, etc.)
        var response = await GetAIResponse(args.Prompt);
        args.Response = response;
    }
    
    private async Task<string> GetAIResponse(string prompt)
    {
        // Call your AI service API
        // For testing: return a simple response
        return $"<div>Processing your prompt: {prompt}</div>";
    }
}

よく使われるパターン

パターン 1：初期化済みの会話

既存の会話履歴を読み込んでコンポーネントを表示します。

<SfAIAssistView 
    Prompts="@conversationHistory" 
    PromptRequested="@OnPromptRequested">
</SfAIAssistView>

@code {
    private List<AssistViewPrompt> conversationHistory = new()
    {
        new AssistViewPrompt { 
            Prompt = "What is C#?", 
            Response = "<div>C# is a modern object-oriented programming language...</div>" 
        }
    };
}

パターン 2：ガイド付きの候補

候補を使って、ユーザーがプロンプトを改善できるようにします。

<SfAIAssistView 
    PromptSuggestions="@suggestions"
    PromptSuggestionsHeader="Try asking about:"
    PromptRequested="@OnPromptRequested">
</SfAIAssistView>

@code {
    private List<string> suggestions = new()
    {
        "How does dependency injection work?",
        "Explain async/await patterns",
        "What are Blazor components?"
    };
}

パターン 3：カスタムアバター

カスタムアイコンでユーザーと AI のアイデンティティをパーソナライズします。

<SfAIAssistView 
    PromptIconCss="e-icons e-user"
    ResponseIconCss="e-icons e-bullet-2"
    PromptRequested="@OnPromptRequested">
</SfAIAssistView>

主要なプロパティ

プロパティ	型	目的
Prompt	string	表示する初期プロンプトテキスト
PromptPlaceholder	string	入力フィールドのプレースホルダーテキスト（デフォルト："Type prompt for assistance..."）
PromptSuggestions	List<string>	ユーザーを案内するためのプロンプト候補のリスト
PromptSuggestionsHeader	string	候補の上に表示する見出しテキスト
Prompts	List<AssistViewPrompt>	プロンプトと応答のペアのコレクション（会話履歴）
PromptIconCss	string	ユーザーアバターアイコンの CSS クラス
ResponseIconCss	string	AI アバターアイコンの CSS クラス（デフォルト："e-assistview-icon"）
EnableScrollToBottom	bool	最下部へのスクロールインジケーターを表示します（デフォルト：true）
EnableStreaming	bool	応答を段階的に表示するストリーミングモードを有効にします
ActiveView	int	現在アクティブなビューのインデックス（複数ビューの場合）
ShowHeader	bool	コンポーネントのヘッダーを表示／非表示にします（デフォルト：true）
Width	string	コンポーネントの幅（デフォルト："100%"）
Height	string	コンポーネントの高さ（デフォルト："100%"）
CssClass	string	スタイル設定用のカスタム CSS クラス
EnableRtl	bool	右から左へのレイアウトを有効にします（デフォルト：false）
ID	string	コンポーネントの id 属性を設定します

よくある使用例

1. カスタマーサポートチャットボット - ナレッジベースと組み合わせて、よくある質問に回答します
2. コーディングアシスタント - リアルタイムのコード提案と説明を提供します
3. コンテンツ生成 - 対話形式の文章作成・編集アシスタントです
4. 学習インターフェース - 教育コンテンツ向けの Q&A システムです
5. API ドキュメント - サンプル付きの対話型 API ヘルパーです