AI导哈

聊天应用客户端

Blazor WebAssembly聊天应用客户端，提供实时消息交互、设置管理和工具集成功能，适用于需要快速搭建聊天界面的开发者。

  • by jjhb94
  • HTML
  • 本地部署
  • 更新于
在 GitHub 查看 jjhb94/blazorclient

使用说明

BlazorClient-JsonWebAssembly聊天应用程序

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

特性

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

入门指南

先决条件

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

运行应用程序

  1. 导航到BlazorClient目录：

    cd src/BlazorClient

  2. 运行应用程序：

    dotnet run

  3. 打开浏览器并导航到 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 用于造型
  • 依赖注入 用于服务管理

相关 MCP