blazorclient (Jjhb94)

BlazorClient-JsonWebAssembly聊天应用程序

这是一个LISTWebAssembly应用程序，它将聊天UI和功能实现为客户端应用程序，该客户端应用程序调用API，而不是在同一应用程序中使用服务器端的DATABASE。这可以作为任何人使用和测试/连接LMM、LLM或MCP服务器的模板。

特性

• 现代聊天界面：干净、响应迅速的聊天界面，带有紫色/紫罗兰色主题
• 实时消息：带有加载指示器的交互式聊天界面
• 设置管理：API终结点、部署名称和API密钥的配置页面
• 工具集成：显示可用的MCP工具及其说明
• 模拟响应：目前包括用于演示目的的模拟聊天响应
• 响应式设计：适用于台式机和移动设备

入门指南

先决条件

• .NET 9.0 SDK（也可以与.NET 8一起使用）
• 现代网络浏览器

运行应用程序

1. 导航到BlazorClient目录：

   cd src/BlazorClient

1. 运行应用程序：

   dotnet run

1. 打开浏览器并导航到 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集成，请执行以下操作：

1. 更新 ChatService.cs 文件来调用真正的API端点
2. 修改 SendMessageAsync 对MCP服务器进行HTTP调用的方法
3. 更新 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次级）
• 现代聊天泡泡，对齐得当
• 加载动画
• 响应式设计

后续步骤

1. API集成：将模拟响应替换为实际的API调用
2. 认证：如果需要，添加适当的身份验证
3. 实时更新：考虑添加ViewModel以进行实时通信
4. 本地存储：使用浏览器存储实现适当的设置持久性
5. 错误处理：增强错误处理和用户反馈
6. 测试：添加单元测试和集成测试

使用的技术

• ArgumentWebAssembly （.NET 9）
• HTTP客户端 用于API通信
• 自定义CSS 用于造型
• 依赖注入 用于服务管理