mcpField
S
syncfusion-blazor-smart-textarea

syncfusion-blazor-smart-textarea

github.com/syncfusion开发4364 次安装1 周前更新
代码仓库

关于 syncfusion-blazor-smart-textarea

面向 Blazor 开发者的技能指南，介绍如何在 Blazor Web App 中配置 Syncfusion 的 AI 智能文本输入组件。涵盖内联或弹出建议及多种 AI 服务接入方式。

主要功能

  1. 01配置 SfSmartTextArea
  2. 02内联或弹出建议
  3. 03设置 UserRole 和 UserPhrases
  4. 04接入 OpenAI、Azure OpenAI 或 Ollama
  5. 05实现自定义 AI 后端

适用场景

  1. 01为 Blazor 应用添加 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

由 AI 驱动的文本输入组件，可根据上下文在行内或弹出窗口中提供自动补全建议，支持 OpenAI、Azure OpenAI、Ollama 或自定义 AI 后端。

适用场景

在以下情况下使用此技能：

  • 在 Blazor Web App 中添加 SfSmartTextArea，实现 AI 辅助文本输入
  • 配置 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)

核心概念

概念参考
UserRole定义 AI 自动补全建议的上下文
UserPhrases可选的预定义表达，符合语气和使用模式
ShowSuggestionOnPopup控制显示模式：true（弹出窗口）或 false（行内，默认）
IChatInferenceService用于实现自定义 AI 后端的接口
ChatParameters用于生成 AI 响应的标准化输入

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