hi, 大家好, 我是徐小夕, 最近在 Github 上看到一款非常有意思的開源項目, 定位是開箱即用的大模型對話前端解決方案, 我們使用它可以輕松構建聊天組件, 并且可以一鍵集成主流 AI 大模型, 比如 通義千問, ChatGpt 等。(讓前端再也不用從零寫聊天組件了~)2nl28資訊網——每日最新資訊28at.com

2nl28資訊網——每日最新資訊28at.com

組件Demo演示

2nl28資訊網——每日最新資訊28at.com

2nl28資訊網——每日最新資訊28at.com

功能亮點

我根據自己的使用和實踐, 總結一下這款開源聊天組件的亮點:2nl28資訊網——每日最新資訊28at.com

• 簡單易用, 設計語言統一

2nl28資訊網——每日最新資訊28at.com

它是基于 antd 組件庫進行的二次封裝, 所以我們可以輕松的在 antd 項目中使用, 保持 UI 視覺的統一。2nl28資訊網——每日最新資訊28at.com

使用啊安裝方式如下：2nl28資訊網——每日最新資訊28at.com

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

使用：2nl28資訊網——每日最新資訊28at.com

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>  );};

是不是使用非常簡單~2nl28資訊網——每日最新資訊28at.com

• 大模型對話能力集成

2nl28資訊網——每日最新資訊28at.com

它內置了對話模型常用的：數據編輯、重新發送、刪除對話等這些默認的基本操作。2nl28資訊網——每日最新資訊28at.com

• 對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"}]}`,];

參照 ChatGPT、GLM、通義千問等市面上主流的大模型入參出參，減少前端開發者對這些入參和出參的處理。2nl28資訊網——每日最新資訊28at.com

• 支持豐富的聊天場景, 并且可以根據業務靈活擴展

2nl28資訊網——每日最新資訊28at.com

• 組件化 & 完善的ts類型定義

2nl28資訊網——每日最新資訊28at.com

圖片2nl28資訊網——每日最新資訊28at.com

我們可以通過組件暴露的屬性輕松自定義, 并且代碼質量和代碼規范非常優質。2nl28資訊網——每日最新資訊28at.com

集成ChatGPT的簡單案例

1. 安裝依賴

npm install ai --savenpm install openai --save# or use yarn 、bun、pnpm any elsebun add aibun 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);};

3. 設計界面

"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聊天應用, 大家感興趣的可以嘗試使用一下。2nl28資訊網——每日最新資訊28at.com

Github 地址：https://github.com/ant-design/pro-chat2nl28資訊網——每日最新資訊28at.com

文檔地址：https://pro-chat.antdigital.dev/2nl28資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-63661-0.htmlPro-Chat：一款面向未來的開源智能聊天組件

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 如何優雅的實現前端國際化？

下一篇： 騰訊起訴迅雷公司不正當競爭，今年 3 月開庭