网页接入 Coze Chat-SDK

1. 配置智能体或者应用
2. 配置个人令牌，第一次创建时一定要保存令牌；以后就看不到了
3. 将发布的 SDK 代码复制到 根HTML 文件

<script src="https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.1.0-beta.3/libs/cn/index.js"></script>

4. 页面代码

import { useEffect, useRef } from 'react'

const PAT_TOKEN = '****自己的个人令牌****'

const AiDemo = () => {
  const cozeWebSDKRef = useRef<any>(null)

  useEffect(() => {
    initCoze({
      ui: {
        base: {
          layout: 'mobile',
          lang: 'zh-CN',
          zIndex: 1000,
        },
        header: {
          isShow: false,
          isNeedClose: false,
        },
        asstBtn: {
          isNeed: false,
        },
      },
    })
    cozeWebSDKRef.current?.showChatBot()
  }, [])

  const initCoze = (config?: any) => {
    const baseConfig = {
      config: {
        bot_id: '复制安装代码里的ID',
      },
      componentProps: {
        title: 'Coze',
      },
      auth: {
        type: 'token',
        token: PAT_TOKEN,
        onRefreshToken: () => PAT_TOKEN,
      },
      userInfo: {
        id: '12345',
        url: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
        nickname: '房老师',
      },
    }
    cozeWebSDKRef.current = new CozeWebSDK.WebChatClient({
      ...baseConfig,
      ...config,
    })
  }

  return <div>AiDemo</div>
}

export default AiDemo

页面就能看到了

关键参考文档：

了解项目发布

安装并使用 Chat SDK