BlazorClient-JsonWebAssembly聊天应用程序
这是一个LISTWebAssembly应用程序，它将聊天UI和功能实现为客户端应用程序，该客户端应用程序调用API，而不是在同一应用程序中使用服务器端的DATABASE。这可以作为任何人使用和测试/连接LMM、LLM或MCP服务器的模板。
特性
- 现代聊天界面：干净、响应迅速的聊天界面，带有紫色/紫罗兰色主题
- 实时消息：带有加载指示器的交互式聊天界面
- 设置管理：API终结点、部署名称和API密钥的配置页面
- 工具集成：显示可用的MCP工具及其说明
- 模拟响应：目前包括用于演示目的的模拟聊天响应
- 响应式设计：适用于台式机和移动设备
入门指南
先决条件
- .NET 9.0 SDK（也可以与.NET 8一起使用）
- 现代网络浏览器
运行应用程序
- 导航到BlazorClient目录：
cd src/BlazorClient- 运行应用程序：
dotnet run- 打开浏览器并导航到
http://localhost:5200
项目结构
BlazorClient/
├── Models/
│ └── ChatMessage.cs # Data models for chat messages and settings
├── Services/
│ ├── ChatService.cs # Service for handling chat API calls
│ └── SettingsService.cs # Service for managing application settings
├── Pages/
│ ├── Home.razor # Main chat interface
│ └── Settings.razor # Configuration page
├── Layout/
│ ├── MainLayout.razor # Application layout
│ └── NavMenu.razor # Navigation menu
├── wwwroot/
│ └── css/
│ └── Home.css # Custom styles for chat interface
└── Program.cs # Application entry point配置
该应用程序包括一个设置页面，您可以在其中配置：
- 端点：聊天服务的API端点
- 部署名称：要使用的模型/部署名称
- API密钥：服务的身份验证密钥
预设配置
设置页面包括以下预设按钮：
- 奥拉马：本地AI模型托管(http://localhost:11434/)
- GitHub模型：GitHub人工智能模型API(https://models.inference.ai.azure.com)
与API集成
目前，该应用程序包括用于演示目的的模拟响应。要与您的实际API集成，请执行以下操作：
- 更新
ChatService.cs文件来调用真正的API端点 - 修改
SendMessageAsync对MCP服务器进行HTTP调用的方法 - 更新
GetToolsAsync从API获取可用工具的方法
API合同
应用程序需要以下API终结点：
POST /api/chat-发送聊天信息并接收回复GET /api/tools-获取可用的MCP工具
预期的请求/响应格式：
// ChatRequest
{
"messages": [...],
"settings": {
"endpoint": "...",
"apiKey": "...",
"deploymentName": "..."
}
}
// ChatResponse
{
"content": "...",
"toolCallId": "...",
"toolResponse": "...",
"isError": false,
"errorMessage": null
}样式
该应用程序使用与原始Aspire应用程序匹配的自定义CSS：
- 紫色/紫罗兰色方案（#6a1b9a初级，#4a148c次级）
- 现代聊天泡泡，对齐得当
- 加载动画
- 响应式设计
后续步骤
- API集成：将模拟响应替换为实际的API调用
- 认证：如果需要，添加适当的身份验证
- 实时更新：考虑添加ViewModel以进行实时通信
- 本地存储：使用浏览器存储实现适当的设置持久性
- 错误处理：增强错误处理和用户反馈
- 测试：添加单元测试和集成测试
使用的技术
- ArgumentWebAssembly （.NET 9）
- HTTP客户端 用于API通信
- 自定义CSS 用于造型
- 依赖注入 用于服务管理