web接入coze私有化智能体

一个不会重复的id
207 阅读7分钟

上一篇开源版扣子私有化部署，扣子已经部署到我们自己服务器上了，现在还有几个问题要解决。

  • 接入私有大模型（上一篇已解决）
  • 发布后能独立被其他Web嵌入,比如做个智能客服被嵌入其他网站，即chat sdk功能
  • 能使用其他官网插件
  • 能自己开发插件 和 MCP 功能，比如提供内部数据库查询
  • 能接入其他智能体
  • 原提供的会话API调用

这篇文章讲第二点自己的智能体如何被其他web直接调用，有两种方式直接后端api和前端嵌入web页面。

对应发布时的 API 和 Chat SDK

image.png

开发规范

原文 github.com/coze-dev/co…

image.png

Chat SDK

原文 github.com/coze-dev/co…

image.png

image.png

image.png

image.png

new CozeWebSDK.WebChatClient({
  /**
  * Agent or app settings
  * for agent
  * @param config.bot_id - Agent ID.
  * for app
  * @param config.type - To integrate a Coze app, you must set the value to app.
  * @param config.isIframe - Whether to use the iframe method to open the chat box
  * @param config.appInfo.appId - AI app ID.
  * @param config.appInfo.workflowId - Workflow or chatflow ID.
  */
  config: {
    type: 'bot',
    bot_id: 'xxxx',
    isIframe: false,
  },
  /**
  * The auth property is used to configure the authentication method.
  * @param type - Authentication method, default type is 'unauth', which means no authentication is required; it is recommended to set it to 'token', which means authentication is done through PAT (Personal Access Token) or OAuth.
  * @param token - When the type is set to 'token', you need to configure the PAT (Personal Access Token) or OAuth access key.
  * @param onRefreshToken - When the access key expires, a new key can be set as needed.
  */
  auth: {
    type: 'token',
    token: 'xxxx',
    onRefreshToken: async () => 'token'
  },
  /**
  * The userInfo parameter is used to set the display of agent user information in the chat box.
  * @param userInfo.id - ID of the agent user.
  * @param userInfo.url - URL address of the user's avatar.
  * @param userInfo.nickname - Nickname of the agent user.
  */
  userInfo: {
    id: 'user',
    url: 'https://lf-coze-web-cdn.coze.cn/obj/eden-cn/lm-lgvj/ljhwZthlaukjlkulzlp/coze/coze-logo.png',
    nickname: 'User',
  },
  ui: {
    /**
    * The ui.base parameter is used to add the overall UI effect of the chat window.
    * @param base.icon - Application icon URL.
    * @param base.layout - Layout style of the agent chat box window, which can be set as 'pc' or'mobile'.
    * @param base.lang - System language of the agent, which can be set as 'en' or 'zh-CN'.
    * @param base.zIndex - The z-index of the chat box.
    */
    base: {
      icon: 'https://lf-coze-web-cdn.coze.cn/obj/eden-cn/lm-lgvj/ljhwZthlaukjlkulzlp/coze/chatsdk-logo.png',
      layout: 'pc',
      lang: 'en',
      zIndex: 1000
    },
    /**
    * Controls whether to display the top title bar and the close button
    * @param header.isShow - Whether to display the top title bar.
    * @param header.isNeedClose - Whether to display the close button.
    */
    header: {
      isShow: true,
      isNeedClose: true,
    },
    /**
    * Controls whether to display the floating ball at the bottom right corner of the page.
    */
    asstBtn: {
      isNeed: true
    },
    /**
    * The ui.footer parameter is used to add the footer of the chat window.
    * @param footer.isShow - Whether to display the bottom copy module.
    * @param footer.expressionText - The text information displayed at the bottom.
    * @param footer.linkvars - The link copy and link address in the footer.
    */
    footer: {
      isShow: true,
      expressionText: 'Powered by ...',
    },
    /**
    * Control the UI and basic capabilities of the chat box.
    * @param chatBot.title - The title of the chatbox
    * @param chatBot.uploadable - Whether file uploading is supported.
    * @param chatBot.width - The width of the agent window on PC is measured in px, default is 460.
    * @param chatBot.el - Container for setting the placement of the chat box (Element).
    */
    chatBot: {
      title: 'Coze Bot',
      uploadable: true,
      width: 390,
    },
  },
});

开发环境

环境要求： docker、go（≥1.24）、make、node(>=22) 、npm、rush

我使用的环境是 Rocky Linux 9.6，建议初始化磁盘大点80G，4核8G

更新系统

安装更新后重启

image.png

image.png

或者命令更新并重启

dnf update -y
reboot

升级 python到3.11

默认是3.9，切换默认到3.11，否则后面会失败

python3 --version

dnf install -y python3.11

sudo alternatives --install /usr/bin/python3 python3 /usr/bin/python3.9 1
sudo alternatives --install /usr/bin/python3 python3 /usr/bin/python3.11 2

sudo alternatives --config python3
# 这里让输入号码，选3.11的，输入2

python3 --version
# 查看版本已经是模式3.11了

安装 go

dnf -y install golang
go version
go mod init pass
echo "export GOPROXY=https://goproxy.cn" >> ~/.bashrc
source ~/.bashrc

安装nvm和node22+

# 0.  安装nvm和git你的邮箱
dnf -y install git
git config --global user.email "123456789@qq.com"
curl -fsSL https://gitee.com/edazh/nvm/raw/master/install.sh | bash

# 1. 先删除可能冲突的镜像配置（若之前加过其他镜像）
sed -i '/NVM_NODEJS_ORG_MIRROR/d' ~/.bashrc

# 2. 重新添加淘宝镜像（更稳定，支持版本查询）
echo 'export NVM_NODEJS_ORG_MIRROR=https://mirrors.aliyun.com/nodejs-release/' >> ~/.bashrc

# 3. 激活配置（必须执行，让镜像生效）
source ~/.bashrc

# 4. 安装22的最新版
nvm install 22 
npm install -g nrm pnpm @microsoft/rush
nrm use taobao

安装docker

# 安装docker
systemctl stop firewalld 
systemctl disable firewalld
setenforce 0
sed -i s#SELINUX=enforcing#SELINUX=disabled#g /etc/sysconfig/selinux
dnf makecache
dnf install -y gcc gcc-c++ make yum-utils device-mapper-persistent-data lvm2 epel-release
dnf config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
dnf install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
systemctl enable docker
systemctl start docker
docker ps

修改 daemon.json

编辑或创建  /etc/docker/daemon.json 文件，添加国内镜像源以加速拉取镜像：

{
  "registry-mirrors": [
    "https://docker.1ms.run",
    "https://docker.hpcloud.cloud",
    "https://docker.m.daocloud.io",
    "https://docker.unsee.tech",
    "https://docker.chenby.cn",
    "https://mirrors.ustc.edu.cn",
    "https://mirrors.azure.cn",
    "https://dockerpull.org"
  ],
  "log-driver": "json-file",
  "log-opts": {
    "max-size": "100m",
    "max-file": "3"
  }
}

重载docker和测试nginx

systemctl daemon-reload
systemctl restart docker
docker run -d -p 32678:80 nginx
docker ps
curl 127.0.0.1:32678

下载coze-studio源码

# 我克隆到国内gitee方便下载
git clone https://gitee.com/rootegg/coze-studio.git

# 原版github
git clone https://github.com/coze-dev/coze-studio.git

原版下载注意修改前端 .npmrc 为淘宝 registry.npmmirror.com

image.png

调试步骤

  1. 首次在本地启动调试时，需要执行以下命令：

    # 确保 docker 是正常运行的
make debug

## 错误处理下面

### 如果上一步容器失败，可以删除容器和data目录重执行 make debug，官方说的
docker ps -a -q | xargs docker rm -f 
rm -rf docker/data
make debug

### 如果是按后面安装npm包报错，就直接再
make debug

github.com/coze-dev/co…

image.png

image.png

make debug 成功

image.png

  1. 后面修改代码保存，直接重新编译启动coze-server服务，执行以下命令即可：

    make server

  2. 除上述外，如果还需要调试前端代码，重新打开Terminal 程序，启动前端工程：

    bash scripts/setup_fe.sh
cd frontend/apps/coze-studio
npm run dev

发布私有化Chat Sdk页面

安装图上修改源码服务器地址，重新build chat sdk代码

image.png

部署sdkjs到nginx

我把上面重新编译的 chat sdk js 文件放到nginx中 /libs/cn/index.js

image.png

image.png

建个index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ChatSDK</title>
    <script src="/libs/cn/index.js"></script>
    <style>
    .semi-avatar-circle {
        border-radius: 50%;
    }
    .semi-avatar-small {
        border-radius: 3px;
        width: 32px;
        height: 32px;
    }
    
    .semi-avatar {
        white-space: nowrap;
        text-align: center;
        vertical-align: middle;
        justify-content: center;
        align-items: center;
        display: inline-flex;
        position: relative;
        overflow: hidden;
    }
    .semi-avatar>img {
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: 100%;
        display: block;
    }
    .semi-upload-hidden-input, .semi-upload-hidden-input-replace {
        display: none;
    }
    </style>
  </head>
  <body>
    <script>
      new CozeWebSDK.WebChatClient({
        /**
         * Agent or app settings
         * for agent
         * @param config.bot_id - Agent ID.
         * for app
         * @param config.type - To integrate a Coze app, you must set the value to app.
         * @param config.isIframe - Whether to use the iframe method to open the chat box
         * @param config.appInfo.appId - AI app ID.
         * @param config.appInfo.workflowId - Workflow or chatflow ID.
         */
        config: {
          type: 'bot',
          bot_id: '7xxx426329496636620',
          isIframe: false,
        },
        /**
         * The auth property is used to configure the authentication method.
         * @param type - Authentication method, default type is 'unauth', which means no authentication is required; it is recommended to set it to 'token', which means authentication is done through PAT (Personal Access Token) or OAuth.
         * @param token - When the type is set to 'token', you need to configure the PAT (Personal Access Token) or OAuth access key.
         * @param onRefreshToken - When the access key expires, a new key can be set as needed.
         */
        auth: {
          type: 'token',
          token:
            'pat_30f25a6xxxxxxxxfb26c75378962219b19bad4775bd5da81c1138c4051efb929',
          onRefreshToken: async () => 'token',
        },
        /**
         * The userInfo parameter is used to set the display of agent user information in the chat box.
         * @param userInfo.id - ID of the agent user.
         * @param userInfo.url - URL address of the user's avatar.
         * @param userInfo.nickname - Nickname of the agent user.
         */
        userInfo: {
          id: 'user',
          url: 'https://lf-coze-web-cdn.coze.cn/obj/eden-cn/lm-lgvj/ljhwZthlaukjlkulzlp/coze/coze-logo.png',
          nickname: 'User',
        },
        ui: {
          /**
           * The ui.base parameter is used to add the overall UI effect of the chat window.
           * @param base.icon - Application icon URL.
           * @param base.layout - Layout style of the agent chat box window, which can be set as 'pc' or'mobile'.
           * @param base.lang - System language of the agent, which can be set as 'en' or 'zh-CN'.
           * @param base.zIndex - The z-index of the chat box.
           */
          base: {
            icon: 'https://lf-coze-web-cdn.coze.cn/obj/eden-cn/lm-lgvj/ljhwZthlaukjlkulzlp/coze/chatsdk-logo.png',
            layout: 'pc',
            lang: 'en',
            zIndex: 1000,
          },
          /**
           * Controls whether to display the top title bar and the close button
           * @param header.isShow - Whether to display the top title bar.
           * @param header.isNeedClose - Whether to display the close button.
           */
          header: {
            isShow: true,
            isNeedClose: true,
          },
          /**
           * Controls whether to display the floating ball at the bottom right corner of the page.
           */
          asstBtn: {
            isNeed: true,
          },
          /**
           * The ui.footer parameter is used to add the footer of the chat window.
           * @param footer.isShow - Whether to display the bottom copy module.
           * @param footer.expressionText - The text information displayed at the bottom.
           * @param footer.linkvars - The link copy and link address in the footer.
           */
          footer: {
            isShow: true,
            expressionText: 'Powered by ...',
          },
          /**
           * Control the UI and basic capabilities of the chat box.
           * @param chatBot.title - The title of the chatbox
           * @param chatBot.uploadable - Whether file uploading is supported.
           * @param chatBot.width - The width of the agent window on PC is measured in px, default is 460.
           * @param chatBot.el - Container for setting the placement of the chat box (Element).
           */
          chatBot: {
            title: 'Coze Bot',
            uploadable: true,
            width: 390,
          },
        },
      });
    </script>
  </body>
</html>

访问网页就有了

image.png

效果

样式有问题，错位了，自己在 index.html中手动增加点样式吧

.semi-avatar-circle {
        border-radius: 50%;
    }
    .semi-avatar-small {
        border-radius: 3px;
        width: 32px;
        height: 32px;
    }
    
    .semi-avatar {
        white-space: nowrap;
        text-align: center;
        vertical-align: middle;
        justify-content: center;
        align-items: center;
        display: inline-flex;
        position: relative;
        overflow: hidden;
    }
    .semi-avatar>img {
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: 100%;
        display: block;
    }
    .semi-upload-hidden-input, .semi-upload-hidden-input-replace {
        display: none;
    }

image.png

avatar
文章
阅读
粉丝