syncfusion-vue-ai-assistview

Syncfusion Vue AI AssistView コンポーネント

AI AssistView コンポーネントは、Vue で AI 搭載アプリケーションを構築するための、最新の会話型インターフェースを提供します。ユーザーはプロンプトを送信し、Markdown のレンダリング、カスタム候補、AI サービスとのシームレスな連携に対応した、チャット形式のすっきりしたインターフェースで AI の応答を受け取ることができます。

コンポーネントの概要

AI AssistView コンポーネントは、次の機能を提供します。

• カスタマイズ可能なプレースホルダーと初期テキストを設定できるプロンプト入力エリア
• 最新のメッセージまで自動スクロールする会話履歴
• ユーザーの操作をガイドする候補チップ
• ユーザーと AI の応答に設定できるカスタムアバター
• 書式設定された AI の応答を表示するMarkdown レンダリング
• プロンプトと応答を処理するイベントシステム
• バナーやレイアウトのデザインをカスタマイズできるテンプレートサポート
• AI とのやり取りに関する指標（所要時間、トークン、ツール呼び出し、モデル情報）を記録するテレメトリー追跡
• 設定済みの項目（エージェント、コマンドなど）を参照できるプロンプトエディターのメンション
• Syncfusion の material、bootstrap、tailwind テーマとのテーマ連携

ナビゲーションガイド

タスクに合ったリファレンスを選択してください。

はじめに

📄 参照: references/getting-started.md

• @syncfusion/ej2-vue-interactive-chat のインストール
• Vue-CLI を使った Vue 2 プロジェクトのセットアップ
• コンポーネントの登録
• CSS テーマのインポート
• 最初の AI AssistView アプリケーションの実行

プロンプトと応答の設定

📄 参照: references/prompt-configuration.md

• prompt プロパティを使った初期プロンプトテキストの設定
• promptPlaceholder を使ったプレースホルダーテキストのカスタマイズ
• prompts コレクションを使った会話履歴の管理
• ユーザーのクエリと AI の応答の保存
• 会話履歴のクリア

候補とガイダンスの追加

📄 参照: references/prompt-suggestions.md

• promptSuggestions を使った候補チップの設定
• promptSuggestionsHeader を使った候補のヘッダーのカスタマイズ
• コンテキストに応じた候補の動的な更新
• タスクに応じた候補フローの作成
• スマート候補によるユーザー体験の向上

外観のカスタマイズ

📄 参照: references/customizing-appearance.md

• promptIconCss を使ったユーザーアバターアイコンのカスタマイズ
• responseIconCss を使った AI 応答アバターの変更
• showClearButton を使ったクリアボタンの表示／非表示
• テーマ（material3、bootstrap、tailwind）を使ったコンポーネントのスタイル設定
• カスタム CSS クラスの適用

イベントの処理

📄 参照: references/events.md

• コンポーネントの全 9 イベント（created、promptRequest、promptChanged、beforeAttachmentUpload、attachmentUploadSuccess、attachmentUploadFailure、attachmentRemoving、attachmentRemoved、attachmentClick、mentionSelect）
• addPromptResponse を使った非同期でのプロンプト処理
• カスタムイベントハンドラーの実装
• イベント引数とプロパティの管理
• AI サービス呼び出しにおける async/await パターン
• イベントコールバックでのエラー処理

テンプレートの使用

📄 参照: references/templates.md

• カスタムバナーテンプレートの作成
• テンプレート構文の使用
• テンプレートのコンテキストと変数のカスタマイズ
• CSS を使ったテンプレートコンテンツのスタイル設定
• 状態に応じた動的なテンプレートのレンダリング
• テンプレートのベストプラクティスとパターン

テンプレートとカスタマイズ

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

• bannerTemplate を使用したカスタムバナーテンプレート
• footerTemplate を使用したカスタムフッターテンプレート
• promptItemTemplate を使用したプロンプト項目のカスタマイズ
• promptSuggestionItemTemplate を使用したプロンプト候補項目のスタイル設定
• responseItemTemplate を使用した応答項目のカスタマイズ
• responseAnimationTemplate を使用した応答ローダーのカスタマイズ
• promptToolbarSettings を使用したプロンプトツールバーの設定
• responseToolbarSettings を使用した応答ツールバーの設定
• views プロパティを使用した複数ビューの設定
• 高度なテンプレートパターンとベストプラクティス

思考の連鎖と推論ブロック

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

• AssistThinking モジュールを使用した思考ブロックの有効化
• 思考ブロックを使用した AI の推論プロセスの可視化
• ステータスインジケーター（completed、inprogress、failed）を使用したステージの設定
• 編集可能なバッジを備えたインラインコンテキスト項目の追加
• テンプレートを使用した思考ブロックのカスタマイズ
• タイムラインステージ項目テンプレートの設定
• 推論ブロックのリアルタイムストリーミング

生成 UI と動的コンポーネント

📄 参照： references/generative-ui.md

• registerToolUI メソッドを使用したカスタムツールの登録
• AI の応答内にインタラクティブな UI コンポーネントを作成
• ツールテンプレートとハンドラー関数の設定
• addPromptResponse を介した応答へのツールブロックの追加
• 動的なゲージ、カード、カスタムツールの統合
• 構造化された JSON 応答のための AI サービスの設定
• ツールのプロパティとコンポーネントのインタラクションパターン

Markdown とリッチコンテンツのレンダリング

📄 参照： references/markdown-and-responses.md

• AI の応答内での Markdown のレンダリング
• サポートされている Markdown 構文（太字、斜体、見出し、リスト、コードブロック）
• Markdown コンテンツのストリーミング
• HTML 応答のレンダリング
• 読みやすさを高める書式設定のヒント
• エッジケースとトラブルシューティング

高度な機能と AI 統合

📄 参照： references/advanced-features.md

• enableScrollToBottom を使用した最下部へのスクロールインジケーターの有効化
• toolbarSettings を使用したツールバーの設定
• 高度なスタイル設定のテクニック
• RTL（右から左）への対応
• パフォーマンスの最適化
• 長い会話への対応

AI サービスへの接続

📄 参照： references/ai-integration.md

• OpenAI、Gemini、Claude、その他の AI API との統合
• API 認証情報の安全な管理
• リアルタイム応答とモック応答のパターン
• プログラムによる応答の追加
• エラー処理と再試行ロジック
• レート制限とタイムアウトの管理

コンポーネントのメソッド

📄 参照： references/methods.md

• addPromptResponse() - プロンプトに AI の応答を追加
• executePrompt() - プログラムからプロンプトを実行
• scrollToBottom() - 最新のメッセージまでスクロール
• メソッドのシグネチャとパラメーター
• isFinalUpdate を使用した応答のストリーミング
• ベストプラクティスと一般的なパターン

音声からテキストへの変換の統合

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

• speechToTextSettings を使用した音声入力の有効化
• マイクボタンとツールチップの設定
• 言語のサポートと中間結果
• 音声認識イベント（onStart、onStop、transcriptChanged、onError）
• ブラウザーの互換性と権限
• 文字起こしのリアルタイム表示

テキストから音声への変換

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

• e-assist-audio ツールバー項目を使用した音声再生の有効化
• Web Speech API を使用した組み込みのテキスト読み上げ機能
• textToSpeechSettings（言語、ピッチ、速度、音量）を使用した音声のカスタマイズ
• 音声の選択と言語サポートの設定
• ブラウザーの互換性と利用可能な音声
• 音声再生コントロールとステータスフィードバックの処理

ファイル添付

📄 参照： references/attachments.md

• enableAttachments プロパティでファイルアップロードを有効にします
• attachmentSettings（saveUrl、removeUrl、ファイル制限）を設定します
• ファイルの検証（allowedFileTypes、maxFileSize、maximumCount）
• 添付ファイルのイベント（beforeUpload、uploadSuccess、uploadFailure、removing、removed、click）- プロンプト内で添付ファイルを扱います
• カスタム添付ファイルテンプレート（attachmentTemplate）
• アップロード時のセキュリティとベストプラクティス

複数ビューのナビゲーション

📄 参照： references/views-and-navigation.md

• views プロパティで複数のビューを設定します
• activeView プロパティでアクティブなビューを切り替えます
• AssistViewModel の構造とプロパティ
• カスタムビューテンプレート
• 動的なビュー管理
• ビューの種類：Assist と Custom

ツールバーの設定

📄 参照： references/toolbar-configuration.md

• promptToolbarSettings でプロンプトツールバーを設定します
• responseToolbarSettings で応答ツールバーを設定します
• footerToolbarSettings でフッターツールバーを設定します
• ToolbarItemModel のプロパティ（text、icon、align、tooltip など）
• ツールバーの位置（Bottom、Inline）
• align（Left ／ Center ／ Right）でツールバー項目の配置を設定します
• 一般的なツールバー操作とパターン

ストリーミング応答

📄 参照： references/streaming-responses.md

• enableStreaming プロパティでストリーミングを有効にします
• 1文字ずつ、またはチャンク単位でのストリーミングを実装します
• 応答を段階的に表示します
• OpenAI やその他の API と統合します
• ストリームのエラー処理
• ユーザーがストリーミング速度を制御できるようにします

テレメトリと AI メトリクス

📄 参照： references/telemetry.md

• telemetrySettings.enable でテレメトリを有効にします
• telemetrySettings.metrics で収集するメトリクスを設定します
• telemetrySettings.beforeReport でレポートをインターセプトします
• addPromptResponse(response, isFinal, telemetryData) でモデルやトークンのデータを渡します
• customAttributes でカスタムのキーと値のペアを公開します
• テレメトリボタンの動作、所要時間の書式設定、再生成のフロー

プロンプトエディターでのメンション

📄 参照： references/mentions.md

• mentions プロパティを設定します（トリガー文字、データソース、フィールド、クエリ、フィルター、テンプレート、ポップアップのサイズ）
• mentionSelect イベントをフックしてカスタム操作を実行します
• displayTemplate ／ itemTemplate ／ noRecordsTemplate を使用して表示をカスタマイズします
• showMentionChar を切り替えて、@ 形式または / 形式のコマンドメンションを設定します

ヘッダー、ロケール、サイズ

📄 参照： references/header-locale-sizing.md

• showHeader プロパティでヘッダーの表示を制御します
• locale プロパティで国際化を設定します（13 以上の言語）
• height と width プロパティでレスポンシブなサイズを設定します
• enablePersistence で状態を永続化します
• レスポンシブレイアウトのパターン
• 全画面表示とダイアログの実装

クイックスタートの例

Composition API を使用した最小限のセットアップを以下に示します。

<template>
  <div id="container" style="height: 500px; width: 700px;">
    <ejs-aiassistview
      id="aiAssistView"
      ref="aiassist"
      prompt="How can I help you today?"
      :prompt-suggestions="suggestions"
      :prompt-request="onPromptRequest"
    />
  </div>
</template>

<script setup>
import { AIAssistViewComponent as EjsAiassistview } from "@syncfusion/ej2-vue-interactive-chat";
import { ref } from "vue";

const aiassist = ref(null);

const suggestions = [
  "What is AI?",
  "How do I get started?",
  "Tell me a joke"
];

const onPromptRequest = (args) => {
  setTimeout(() => {
    const response = `You asked: "${args.prompt}". 
    To connect real AI, use the OpenAI API or similar service with your API key.`;
    aiassist.value.addPromptResponse(response);
  }, 1000);
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/ai-assistview/index.css";
</style>

一般的なパターン

パターン 1：基本的な AI チャットボット

promptRequest イベントを使用してユーザー入力を処理し、AI API を呼び出します。

const onPromptRequest = async (args) => {
  try {
    const response = await fetch('https://api.openai.com/v1/completions', {
      method: 'POST',
      headers: { 'Authorization': `Bearer ${apiKey}` },
      body: JSON.stringify({ prompt: args.prompt, max_tokens: 150 })
    });
    const data = await response.json();
    aiassist.value.addPromptResponse(data.choices[0].text);
  } catch (error) {
    aiassist.value.addPromptResponse('Error: Could not process request');
  }
};

パターン 2：事前設定された候補

ユーザーを案内するために、ドメイン固有の候補フローを作成します。

const suggestions = [
  "Show me productivity tips",
  "How do I code in Vue?",
  "Best practices for debugging"
];

パターン 3：会話履歴

会話履歴にアクセスして管理します。

// Get all prompts and responses
const history = aiassist.value.ej2Instances.prompts;

// Clear conversation
aiassist.value.ej2Instances.prompts = [];