Pro-Chat: 一款面向未来的开源智能聊天组件

简介: Pro-Chat: 一款面向未来的开源智能聊天组件

往期精彩: 基于数据源驱动的跨组件通信最佳实践(低码篇)

hi, 大家好, 我是徐小夕, 最近在 github 上看到一款非常有意思的开源项目, 定位是开箱即用的大模型对话前端解决方案, 我们使用它可以轻松构建聊天组件, 并且可以一键集成主流 AI 大模型, 比如 通义千问, ChatGpt 等. (让前端再也不用从零写聊天组件了~)

image.png

我会在文末贴上这款 开源聊天组件 的文档地址和 github 地址.

组件demo演示

image.png

功能亮点

我根据自己的使用和实践, 总结一下这款开源聊天组件的亮点:

  • 简单易用, 设计语言统一

image.png

它是基于 antd 组件库进行的二次封装, 所以我们可以轻松的在 antd 项目中使用, 保持 UI 视觉的统一.

使用啊安装方式如下:

# @ant-design/pro-editor 基于 antd 和 antd-style,需要在项目中安装
$ npm install antd antd-style -S
$ npm install @ant-design/pro-chat -S

使用:

import { ProChat } from '@ant-design/pro-chat';
import { useTheme } from 'antd-style';
export default () => {
  const theme = useTheme();
  return (
    <div style={{ background: theme.colorBgLayout }}>
      <ProChat
        helloMessage={
          '欢迎使用 ProChat ,我是你的专属机器人,这是我们的 Github:[ProChat](https://github.com/ant-design/pro-chat)'
        }
        request={async (messages) => {
          const mockedData: string = `这是一段模拟的对话数据。本次会话传入了${messages.length}条消息`;
          return new Response(mockedData);
        }}
      />
    </div>
  );
};

是不是使用非常简单~

  • 大模型对话能力集成

image.png

它内置了对话模型常用的:数据编辑、重新发送、删除对话等这些默认的基本操作.

  • 对AI模型友好的数据结构
const dataArray = [  `data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "苹"}, "index": 0, "finish_reason": null}]}`,
  `data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "果"}, "index": 0, "finish_reason": null}]}`,
  `data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "公司"}, "index": 0, "finish_reason": null}]}`,
  `data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "是"}, "index": 0, "finish_reason": null}]}`,
  `data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "一"}, "index": 0, "finish_reason": null}]}`,
  `data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "家"}, "index": 0, "finish_reason": null}]}`,
  `data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "科技"}, "index": 0, "finish_reason": null}]}`,
  `data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "公司"}, "index": 0, "finish_reason": "complete"}]}`,
];

参照 ChatGPTGLM通义千问等市面上主流的大模型入参出参,减少前端开发者对这些入参和出参的处理.

  • 支持丰富的聊天场景, 并且可以根据业务灵活扩展

image.png

  • 组件化 & 完善的ts类型定义

image.png

我们可以通过组件暴露的属性轻松自定义, 并且代码质量和代码规范非常优质.

集成ChatGPT的简单案例

  1. 安装依赖
npm install ai --save
npm install openai --save
# or use yarn 、bun、pnpm any else
bun add ai
bun add openai

2. 业务代码

import OpenAI from 'openai';
import { OpenAIStream, StreamingTextResponse } from 'ai';
export const POST = async (request: Request) => {
  const { messages = [] }: Partial<{ messages: Array<any> }> = await request.json();
  const openai = new OpenAI({
    apiKey: 'OpenAI Key',
    baseURL: 'base url',
  });
  const response = await openai.chat.completions.create({
    model: 'gpt-3.5-turbo',
    messages: [...messages],
    stream: true,
  });
  const stream = OpenAIStream(response);
  return new StreamingTextResponse(stream);
};
  1. 设计界面
"use client";
import { ProChat } from "@ant-design/pro-chat";
import { useTheme } from "antd-style";
export default function Home() {
  const theme = useTheme();
  return (
    <div
      style={{
        backgroundColor: theme.colorBgLayout,
      }}
    >
      <ProChat
        style={{
          height: "100vh",
          width: "100vw",
        }}
        request={async (messages: Array<any>) => {
          const response = await fetch("/api/openai", {
            method: "POST",
            body: JSON.stringify({ messages: messages }),
          });
          return response;
        }}
      />
    </div>
  );
}

是不是很简单, 3步就能帮你搭建一个AI聊天应用, 大家感兴趣的可以尝试使用一下.

github 地址: github.com/ant-design/…

文档地址: pro-chat.antdigital.dev/

目录
相关文章
|
5月前
|
人工智能 自然语言处理 安全
90.9K star!一键部署AI聊天界面,这个开源项目让大模型交互更简单!
"像使用微信一样操作大模型!Open WebUI 让AI对话从未如此简单"
337 0
|
移动开发 前端开发 JavaScript
js 简单图片取色器
基于 JavaScript(js) 的简单的图片颜色识别
1536 0
js 简单图片取色器
|
Oracle Java 关系型数据库
Oracle jdk 的国内下载镜像
Oracle jdk 的国内下载镜像
50513 0
|
人工智能 资源调度 前端开发
Hello~ ProChat 1.0 : 会话组件中 的“亿” 点点细节
Hello~ ProChat 1.0 : 会话组件中 的“亿” 点点细节
256 0
|
10月前
|
机器学习/深度学习 人工智能 计算机视觉
YOLOv11 正式发布!你需要知道什么? 另附:YOLOv8 与YOLOv11 各模型性能比较
YOLOv11是Ultralytics团队推出的最新版本,相比YOLOv10带来了多项改进。主要特点包括:模型架构优化、GPU训练加速、速度提升、参数减少以及更强的适应性和更多任务支持。YOLOv11支持目标检测、图像分割、姿态估计、旋转边界框和图像分类等多种任务,并提供不同尺寸的模型版本,以满足不同应用场景的需求。
YOLOv11 正式发布!你需要知道什么? 另附:YOLOv8 与YOLOv11 各模型性能比较
|
7月前
|
人工智能 运维 数据可视化
1分钟集成DeepSeek满血版!搭建智能运维助手
1分钟集成DeepSeek满血版!搭建智能运维助手
|
安全 API 开发者
智能体-Agent能力升级!新增Assistant API & Tools API服务接口
ModelScope-Agent是一个交互式创作空间,它支持LLM(Language Model)的扩展能力,例如工具调用(function calling)和知识检索(knowledge retrieval)。它已经对相关接口进行了开源,以提供更原子化的应用LLM能力。用户可以通过Modelscope-Agent上的不同代理(agent),结合自定义的LLM配置和消息,调用这些能力。
|
安全 物联网 网络安全
智能家居安全:物联网设备的风险与防护措施
随着物联网技术的飞速发展,智能家居已成为现代生活的一部分。然而,智能设备的便利性背后隐藏着安全隐患。本文将深入探讨物联网设备面临的主要风险,并提供有效的防护措施,帮助用户构建一个更安全的智能家居环境。
395 7
|
人工智能 前端开发 API
借助chat-web前端开源项目搭建属于自己的ChatGPT镜像站
借助chat-web前端开源项目搭建属于自己的ChatGPT镜像站
1391 0
|
JavaScript 前端开发
报错:Cannot read properties of undefined (reading ‘$message‘)解决方法
以上就是解决"Cannot read properties of undefined (reading ‘$message‘)"错误的几种方法,希望对你有所帮助。
6234 0