React笔记-Ant Design X样本间对接智谱AI

目标

后端对接是智谱AI。

过程

先把Ant Design X样本间搭建好,通过此篇博文获得智谱AI的URL等

智谱AI开放平台

看下此篇博文的"使用API接入"

通义千问 - Ant Design X

将样本间代码的:

javascript 复制代码
  const [agent] = useXAgent({
    request: async ({ message }, { onSuccess }) => {
      onSuccess(`Mock success return. You said: ${message}`);
    },
  });

修改为:

javascript 复制代码
const { create } = XRequest({
    baseURL: 'https://open.bigmodel.cn/api/paas/v4/chat/completions',
    dangerouslyApiKey: 'xxxxx',
    model: 'glm-4-plus',
  });
  const [agent] = useXAgent({
    request: async ({ message }, { onSuccess, onUpdate }) => {
      try {
        let content: string = '';
        create(
          {
            messages: [{ role: 'user', content: message }],
            stream: true,
          },
          {
            onSuccess: (chunks) => {
              console.log('sse chunk list', chunks);
              onSuccess(content)
            },
            onError: (error) => {
              console.log('error', error);
            },
            onUpdate: (chunk) => {
              console.log('sse object', chunk);
              try{
                const data = JSON.parse(chunk.data);
                content +=  data?.choices[0].delta.content;
              }
              catch(error){
                console.log(error);
                //return;
              }
              console.log(content);
              onUpdate(content);
            },
          },
        );
      } catch (error) {}
    },
  });

即可完成套壳。

相关推荐
GIS之路5 分钟前
OpenLayers 调整标注样式
前端
爱吃肉的小鹿5 分钟前
Vue 动态处理多个作用域插槽与透传机制深度解析
前端
GIS之路5 分钟前
OpenLayers 要素标注
前端
前端付豪6 分钟前
美团 Flink 实时路况计算平台全链路架构揭秘
前端·后端·架构
sincere_iu6 分钟前
#前端重铸之路 Day7 🔥🔥🔥🔥🔥🔥🔥🔥
前端·面试
设计师也学前端7 分钟前
SVG数据可视化组件基础教程7:自定义柱状图
前端·svg
我想说一句10 分钟前
当JavaScript的new操作符开始内卷:手写实现背后的奇妙冒险
前端·javascript
chanalbert11 分钟前
AI大模型提示词工程研究报告:长度与效果的辩证分析
前端·后端·ai编程
爱吃肉的小鹿12 分钟前
UI 组件二次封装:方法与问题详解
前端