syncfusion-blazor-inline-ai-assist

Blazor Inline AI Assist コンポーネントのスキル

Inline AI Assist コンポーネントを使用すると、開発者は Blazor アプリケーションで AI を活用したテキスト編集機能を構築できます。プロンプト入力用の柔軟な UI、設定可能な AI プロバイダーとの連携、エンタープライズアプリケーション向けの包括的なカスタマイズオプションを提供します。

コンポーネントの概要

SfInlineAIAssist コンポーネントを使用すると、ユーザーは AI サービスにプロンプトを送信し、柔軟な表示モードや豊富なカスタマイズオプションを利用して、インターフェイス内で直接、インテリジェントな応答を受け取ることができます。

• 2 種類の応答モード： AI の応答をカーソル位置にインラインで表示するか、ポップアップオーバーレイに表示するかを選択でき、柔軟に UI に統合できます。
• コマンドアクション： CommandMenu を使用して、カスタマイズ可能なグループ化とアイコンを備えたメンションスタイルのポップアップに、定義済みコマンドとクイックアクションの候補を表示します。
• 応答アクション： ResponseActions を使用して、AI が生成したコンテンツを管理するための、Accept、Discard、カスタム項目などのアクションを設定できます。
• アクションツールバー： プロンプト入力領域に、送信ボタンとカスタムアクションを備えたツールバーを表示します。
• Markdown： Markdown 形式の応答を自動的に HTML に変換し、リッチコンテンツをレンダリングします。
• ストリーミング応答： 単語単位またはチャンク単位のストリーミングに対応し、リアルタイムの視覚的フィードバックと停止コントロールを提供します。
• インジケーター： インラインインジケーターとポップアップモードのスケルトンローディングを使用して、処理状態を表示します。
• 音声テキスト変換： Web Speech API を利用した音声入力機能を内蔵しており、ハンズフリーでプロンプトを入力できます。言語選択、中間結果、ライフサイクルイベントは、子タグ InlineAIAssistSpeechToText を通じて利用できます。
• カスタマイズ： テンプレート、外観、応答のレンダリングをカスタマイズできます。

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• WebAssembly アプリのセットアップ（Visual Studio、VS Code、.NET CLI）
• 対話型レンダーモードを使用した Web アプリのセットアップ
• NuGet パッケージのインストール（Syncfusion.Blazor.InteractiveChat）
• 名前空間のインポートとコンポーネントの初期レンダリング
• セットアップを確認するための最小限の動作例

イベントとメソッド

📄 参照： references/events-and-methods.md

• イベント：Created、PromptRequested、Opened、Closed
• メソッド：AddResponse、RefreshContent、ShowPopupAsync、HidePopupAsync
• イベント処理のパターンとエラー管理
• 応答のライフサイクルと管理
• 実際のイベント使用例

コマンドとツールバー

📄 参照： references/commands-and-toolbar.md

• ラベル、プロンプト、アイコン、グループ化を使用したコマンドの設定
• CommandMenu タグヘルパーとコマンドポップアップのサイズ設定
• カスタムアクションボタンを備えたインラインツールバー
• コマンドの ItemSelect イベントとツールバーの ItemClick イベント
• 実際のコマンド例（要約、書き換え、翻訳）

AI プロバイダーとの連携

📄 参照： references/ai-integration.md

• Microsoft.Extensions.AI フレームワークのセットアップ
• Azure OpenAI との連携手順
• OpenAI との直接連携
• Ollama のローカル LLM との連携
• Gemini API との連携
• LiteLLM プロキシのセットアップと設定
• プロバイダーの比較と選択のガイド

カスタマイズと応答の設定

📄 参照： references/customization-and-response.md

• ResponseMode プロパティ（Inline と Popup の表示モード、動的な切り替え）
• PopupWidth、PopupHeight、ZIndex の設定
• Placeholder、RelateTo、Target、EnableStreaming プロパティ
• 応答の設定（ストリーミング、書式設定、テンプレート）
• カスタム応答項目の設定
• CSSClass による外観のカスタマイズ
• EditorTemplate と ResponseTemplate の使用
• レスポンシブデザインのパターン

音声テキスト変換

📄 参照： references/speech-to-text.md

• InlineAIAssistSpeechToText 子タグを使用した音声入力の有効化
• 認識言語と中間結果の設定
• ライフサイクルイベント：RecognitionStart、RecognitionStop、TranscriptChanged、RecognitionError
• カスタムの InlineToolbar への音声テキスト変換項目の追加
• エラー処理のパターンとブラウザーの互換性
• 音声入力とコンテンツ要約を組み合わせた実例

アクセシビリティとグローバル化

📄 参照： references/accessibility-and-globalization.md

• WCAG 2.2 AA 準拠機能
• キーボードナビゲーションのサポート（Tab、矢印キー、Enter）
• ARIA 属性とスクリーンリーダーのサポート
• グローバル化と RTL（右から左へ）のサポート
• ローカライズ設定
• モバイルデバイスのアクセシビリティ

クイックスタートの例

セットアップを確認するための、最小限の動作例を以下に示します。

@using Syncfusion.Blazor.InteractiveChat
@using Syncfusion.Blazor.Buttons

<div style="height: 350px; width: 650px;">
    <SfButton id="aiButton" IsPrimary="true" @onclick="OnButtonClick">
        Ask AI
    </SfButton>
    <div id="editableText" contenteditable="true" style="border: 1px solid #ddd; padding: 10px; margin-top: 10px;">
        <p>Enter your text here for AI processing...</p>
    </div>
    <SfInlineAIAssist @ref="inlineAssist" 
                      RelateTo="#aiButton" 
                      PromptRequested="OnPromptRequested">
        <ResponseActions ItemSelect="OnResponseItemSelect"></ResponseActions>
    </SfInlineAIAssist>
</div>

@code {
    private SfInlineAIAssist inlineAssist = new();

    private async Task OnButtonClick()
    {
        await inlineAssist.ShowPopupAsync();
    }

    private async Task OnPromptRequested(PromptRequestedEventArgs args)
    {
        // Connect to your AI provider here (Azure OpenAI, OpenAI, etc.)
        // For this example, return a simple response
        string response = $"Processing your request: {args.Prompt}";
        await inlineAssist.UpdateResponseAsync(response, true);
    }

    private async Task OnResponseItemSelect(ResponseItemSelectEventArgs args)
    {
        if (args.Item.Label == "Accept")
        {
            await inlineAssist.HidePopupAsync();
        }
        else if (args.Item.Label == "Discard")
        {
            await inlineAssist.HidePopupAsync();
        }
    }
}

よくあるパターン

パターン 1：コンテンツの要約

<SfButton id="summarizeButton" @onclick="OnSummarizeClick">
    Summarize
</SfButton>

<SfInlineAIAssist @ref="inlineAssist" 
                  RelateTo="#summarizeButton"
                  PromptRequested="OnSummarizeRequest">
</SfInlineAIAssist>

@code {
    private async Task OnSummarizeClick()
    {
        await inlineAssist.ShowPopupAsync();
    }

    private async Task OnSummarizeRequest(PromptRequestedEventArgs args)
    {
        // Send to AI provider with system prompt:
        // "Summarize the following text in 2-3 sentences: " + selectedText
        await inlineAssist.UpdateResponseAsync(summaryResult, true);
    }
}

パターン 2：カスタムコマンド

<SfInlineAIAssist @ref="inlineAssist" PromptRequested="OnPromptRequested">
    <CommandMenu Commands="commandItems"></CommandMenu>
</SfInlineAIAssist>

@code {
    private List<CommandItem> commandItems = new List<CommandItem>
    {
        new CommandItem { Label = "Summarize", Prompt = "Summarize this text", IconCss = "e-icons e-collapse-2" },
        new CommandItem { Label = "Translate", Prompt = "Translate to Spanish", IconCss = "e-icons e-translate" },
        new CommandItem { Label = "Rewrite", Prompt = "Rewrite in professional tone", IconCss = "e-icons e-edit" }
    };
}

パターン 3：応答の管理

<SfInlineAIAssist @ref="inlineAssist" PromptRequested="OnPromptRequested">
    <ResponseActions Items="customResponseItems" ItemSelect="OnResponseAction">
    </ResponseActions>
</SfInlineAIAssist>

@code {
    private List<ResponseItem> customResponseItems = new()
    {
        new ResponseItem { Label = "Regenerate", IconCss = "e-icons e-refresh", Tooltip = "Generate new response" },
        new ResponseItem { Label = "Copy", IconCss = "e-icons e-copy", Tooltip = "Copy to clipboard" },
        new ResponseItem { Label = "Insert", IconCss = "e-icons e-insert", Tooltip = "Insert into document" }
    };
}

主要なプロパティ

プロパティ	型	目的
RelateTo	string	ポップアップの位置を決めるアンカー要素セレクター（例："#aiButton"）
Target	string	コンポーネントコンテナーを追加する DOM セレクター（例："body"、"#app"）
Placeholder	string	入力フィールドのプレースホルダーテキスト（デフォルト："Enter prompt"）
ResponseMode	ResponseDisplayMode	表示モード：Inline（カーソル位置）または Popup（オーバーレイ）
PopupWidth	string	ResponseMode が Popup の場合のポップアップ幅（例："400px"）
PopupHeight	string	応答表示領域のポップアップの高さ（例："300px" または "auto"）
ZIndex	int	ポップアップの重なり順を指定する CSS z-index
EnableStreaming	bool	単語ごとのストリーミング応答を有効化（デフォルト：false）
CssClass	string	スタイル設定用のカスタム CSS クラス
PromptRequested	EventCallback<PromptRequestedEventArgs>	ユーザーがプロンプトを送信したときに呼び出されます
Created	EventCallback	コンポーネントが作成され、使用可能になったときに呼び出されます
Opened	EventCallback<OpenEventArgs>	ポップアップが開いたときに呼び出されます
Closed	EventCallback	ポップアップが閉じたときに呼び出されます
Prompts	IEnumerable<PromptRecord>	送信されたプロンプトとその応答の読み取り専用コレクション

プログラムによるメソッド

Inline AI Assist コンポーネントは、プログラムから制御するための非同期メソッドを提供します。

ShowPopupAsync()

関連する要素の位置に AI Assist ポップアップを開きます。

@ref="inlineAssist"

private SfInlineAIAssist inlineAssist;

private async Task OpenAIAssist()
{
    await inlineAssist.ShowPopupAsync();
}

HidePopupAsync()

AI Assist ポップアップを閉じます。

private async Task CloseAIAssist()
{
    await inlineAssist.HidePopupAsync();
}

UpdateResponseAsync(string response, bool isFinal)

AI の応答コンテンツを設定またはストリーミングします。

private async Task OnPromptRequested(PromptRequestedEventArgs args)
{
    // Non-streaming response
    await inlineAssist.UpdateResponseAsync("Generated response", true);
    
    // Streaming response (call multiple times)
    foreach (var chunk in streamedResponse)
    {
        await inlineAssist.UpdateResponseAsync(chunk, false);
    }
    // Final call with isFinal=true
    await inlineAssist.UpdateResponseAsync(lastChunk, true);
}

ExecutePromptAsync(string prompt)

ユーザー入力を使わずに、プログラムからプロンプトを実行します。

private async Task ExecuteSamplePrompt()
{
    await inlineAssist.ExecutePromptAsync("Summarize the selected text in 2 sentences");
}

ShowCommandPopupAsync()

プログラムからコマンドメニューポップアップを開きます。先にメインのポップアップを開いておく必要があります。

private async Task OpenCommands()
{
    await inlineAssist.ShowPopupAsync();
    await inlineAssist.ShowCommandPopupAsync();
}

HideCommandPopupAsync()

プログラムからコマンドメニューポップアップを閉じます。

private async Task CloseCommands()
{
    await inlineAssist.HideCommandPopupAsync();
}

よくあるユースケース

1. コンテンツの要約 - 選択したテキストを AI で要約します
2. 文法とトーンの調整 - コンテンツをプロフェッショナルなトーンに書き換えます
3. 翻訳 - 選択したテキストを別の言語に翻訳します
4. コード生成 - 説明からコードスニペットを生成します
5. メールの作成 - AI の支援を受けてメールの下書きを作成します
6. フォーム入力 - AI の提案でフォームフィールドを自動入力します