mcpField
S
syncfusion-blazor-smart-textarea

syncfusion-blazor-smart-textarea

github.com/syncfusion開発4364 回インストール1 週間前に更新
リポジトリ

syncfusion-blazor-smart-textarea について

Blazor Web App に Syncfusion の AI テキスト入力コンポーネントを追加するためのガイドです。インライン・ポップアップ表示や、標準およびカスタム AI サービスの設定を扱います。

主な機能

  1. 01SfSmartTextArea の設定
  2. 02インライン・ポップアップ表示
  3. 03UserRole と UserPhrases の設定
  4. 04OpenAI、Azure OpenAI、Ollama の接続
  5. 05カスタム AI バックエンドの実装

活用シーン

  1. 01Blazor アプリへの AI テキスト補完の追加
  2. 02コンテキストや定型句による候補の調整
  3. 03カスタム AI サービスのコンポーネント接続

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-smart-textarea

インストール後、Claude Code で/syncfusion-blazor-smart-textareaを入力して読み込まれたか確認します。

同梱ファイルreferences/customization-features.mdreferences/getting-started.md

詳細

Syncfusion Blazor Smart TextArea

OpenAI、Azure OpenAI、Ollama、またはカスタム AI バックエンドを利用し、コンテキストに応じた入力補完候補をインラインまたはポップアップで表示する、AI 搭載のテキスト入力コンポーネントです。

使用する場面

次のような場合に、このスキルを使用してください。

  • AI による入力支援を実現するため、Blazor Web App に SfSmartTextArea を追加する
  • OpenAI、Azure OpenAI、Ollama、またはカスタムの IChatInferenceService を設定する
  • インライン表示とポップアップ表示を切り替える
  • UserRole と UserPhrases のコンテキストを使って候補を調整する
  • Claude、DeepSeek、Groq、Gemini などに対応するカスタム AI バックエンドを実装する
  • 候補が表示されない問題や AI 接続の問題をトラブルシューティングする

前提条件

  • Interactive Server レンダーモードの Blazor Web App（.NET 8.0 以降）
  • Visual Studio 2022 または Visual Studio Code
  • 有効な OpenAI／Azure OpenAI アカウント、Ollama インスタンス、またはカスタム AI バックエンド
  • Blazor と C# の基本的な知識

主なドキュメント

1. Smart TextArea を使い始める

前提条件、NuGet パッケージのインストール、サービスの登録、コンポーネントの実装を含む、セットアップの完全なガイドです。

→ 使い始めるための完全ガイド

主なトピック：

  • 新しい Blazor Web App の作成
  • Syncfusion サービスの登録
  • AI サービス（OpenAI、Azure OpenAI、Ollama）の設定
  • スタイルシートとスクリプトの追加
  • 最初の Smart TextArea コンポーネントの実装
2. カスタマイズと機能

候補の表示をカスタマイズし、継承された TextArea の機能を活用するためのガイドです。

→ カスタマイズと機能の完全ガイド

主なトピック：

  • ポップアップとインラインの候補表示モード
  • UserRole と UserPhrases の設定
  • 継承された TextArea の機能（フォーム、フローティングラベル、イベント、メソッド、スタイル設定）
  • ベストプラクティスと完全なサンプル
3. カスタム AI サービスの統合

既定のプロバイダー以外のカスタム AI バックエンドを実装するための詳しい手順です。

→ カスタム AI 統合の完全ガイド

主なトピック：

  • IChatInferenceService インターフェイスの概要
  • モック AI サービスのサンプル
  • Claude、DeepSeek、Groq、Gemini との統合
  • サービス登録のパターン
  • カスタムサービスのテストとトラブルシューティング

クイックスタートチェックリスト

□ Ensure Blazor Web App is created with Server Interactivity mode
□ Install required NuGet packages (SmartComponents, Themes)
□ Register Syncfusion Blazor service in Program.cs
□ Register and configure AI service (OpenAI/Azure/Ollama/Custom)
□ Add stylesheet and script references to App.razor
□ Add SfSmartTextArea component with UserRole
□ Test with Ctrl+F5 (Windows) or ⌘+F5 (macOS)

主な概念

概念参照先
UserRoleAI 入力補完候補のコンテキストを定義します
UserPhrasesトーンや使用パターンに合わせた、任意の定義済み表現です
ShowSuggestionOnPopup表示モードを制御します。true はポップアップ、false はインライン（既定）です
IChatInferenceServiceカスタム AI バックエンドを実装するためのインターフェイスです
ChatParametersAI の応答生成に使用する標準化された入力です

NuGet パッケージ

コアパッケージ：

  • Syncfusion.Blazor.SmartComponents（v33.1.44 以降）
  • Syncfusion.Blazor.Themes（v33.1.44 以降）

AI サービスのパッケージ（プロバイダーに応じて選択）：

  • OpenAI：Microsoft.Extensions.AI、Microsoft.Extensions.AI.OpenAI
  • Azure OpenAI：Microsoft.Extensions.AI、Microsoft.Extensions.AI.OpenAI、Azure.AI.OpenAI
  • Ollama：Microsoft.Extensions.AI、OllamaSharp

コメント

Markdown 対応