多AI提供商聊天应用

一个基于ASP.NET Core Razor Pages的网页聊天应用,支持多个AI提供商和模型上下文协议(MCP)服务器以扩展功能。

  • by iw1qlh
  • C#
  • 本地部署
  • 更新于
在 GitHub 查看 iw1qlh/Chat_MCP

使用说明

支持MCP的AI聊天应用程序

一个用ASP.NET构建的基于web的聊天应用程序。NET Core Razor Pages支持多个AI提供者和模型上下文协议(MCP)服务器,以实现扩展功能。

特性

  • 多AI提供商支持

    • OpenAI(GPT-4、GPT-4 Turbo、GPT-3.5)
    • Azure OpenAI
    • Ollama(当地模特:Llama、Mistral、Phi3、Gemma、Qwen)
  • 模型上下文协议(MCP)集成

    • 同时连接到多个MCP服务器
    • 查看连接服务器上的可用工具
    • 对话期间自动调用工具
  • 实时流媒体

    • 实时流式传输AI响应
    • 流畅的打字指示器
    • 响应式聊天界面
  • 会话管理

    • 跨会话的持久聊天历史记录
    • 清除对话历史记录
    • 通过Cookie实现配置持久化

先决条件

  • .NET 8.0或更高版本
  • Visual Studio 2022或VS代码
  • OpenAI/Azure OpenAI的API密钥(如果使用这些提供程序)
  • Ollama本地安装(如果使用Ollama型号)

配置

设置AI提供商

开放人工智能

  1. 点击配置按钮(齿轮图标)
  2. 从下拉列表中选择OpenAI模型
  3. 输入您的OpenAI API密钥
  4. 可选择添加系统提示

Azure OpenAI

  1. 选择Azure OpenAI模型
  2. 输入Azure OpenAI API密钥
  3. 提供您的Azure OpenAI端点URL
  4. 可选择添加系统提示

奥拉玛

  1. 确保Olama在本地运行(ollama serve)
  2. 从下拉列表中选择Ollama型号
  3. 验证/更新Ollama端点(默认值: http://localhost:11434)
  4. 可选择添加系统提示

添加MCP服务器

  1. 单击配置按钮
  2. 滚动到“MCP服务器”部分
  3. 输入MCP服务器的URL
  4. 点击“+”按钮添加
  5. 点击“加载MCP工具”查看可用工具

MCP服务器URL示例:

  • http://localhost:3000/mcp
  • http://localhost:5216/mcp
  • https://your-mcp-server.com/api

从下载最小MCP服务器 https://github.com/marcominerva/McpServerAspNetCore

建筑

后端(C#)

  • 索引模型cs:处理聊天操作的主页模型
    • OnPostChatAsync:处理流式聊天响应
    • OnPostSaveHistory:流媒体播放完成后保存聊天记录
    • OnGetMcpToolsAsync:从配置的MCP服务器检索工具
    • OnPostClearHistory:清除聊天会话

前端(JavaScript)

  • site.js:客户端逻辑
    • 配置管理(保存在Cookie中)
    • 聊天消息处理
    • 流媒体响应处理
    • MCP服务器管理
    • 通过单独的API调用实现历史持久性

关键技术细节

流媒体实现

该应用程序使用HTTP流实时传递AI响应:

  1. 客户端向发送POST请求 /Index?handler=Chat
  2. 服务器逐步流式传输响应正文
  3. 客户端使用Fetch API的ReadableStream读取块
  4. 流媒体播放完成后,单独的通话会保存历史记录

这种方法通过以下方式避免会话冲突:

  • 在流媒体开始之前读取会话数据
  • 流式传输完成后,通过单独的端点写入会话数据

MCP集成

应用程序使用以下方式连接到MCP服务器 ModelContextProtocol.Client 包裹:

工具在可用时会自动包含在聊天完成中。

项目结构

Chat_MCP/
├── Pages/
│   ├── Index.cshtml          # Main chat UI
│   └── Index.cshtml.cs       # Page model and handlers
├── wwwroot/
│   └── js/
│       └── site.js           # Client-side JavaScript
├── Program.cs                # Application configuration
└── README.md                 # This file

依赖项

  • 微软。扩展。人工智能:AI抽象层
  • Azure。好的:Azure OpenAI集成
  • 开放人工智能:OpenAI API客户端
  • 奥拉玛夏普:Ollama客户库
  • 模型上下文协议。客户端:MCP协议实施
  • Bootstrap 5.3.2:UI框架
  • jQuery 3.7.1:DOM操作和AJAX

贡献

欢迎投稿!请随时提交拉取请求。

许可证

此项目根据MIT许可证获得许可-有关详细信息,请参阅许可证文件。

致谢

  • 使用ASP构建。NET核心剃刀页面
  • 与OpenAI、Azure OpenAI和Ollama集成
  • 实现模型上下文协议(MCP)以实现可扩展性