使用coze api和vue实现一个免费的ai聊天助手教程

使用coze api和vue实现一个免费的ai聊天助手教程

现在coze api放开免费申请使用了,赶紧去撸羊毛,申请一个apikey结合我这个vue代码实现一个类似chatgpt的ai助手。


最终的效果,流式打字输出,支持markdown和代码高亮显示,支持中断请求


1、申请coze api

地址:https://www.coze.cn/open/api

点击右上角创建,创建好复制key保留,后面会用到


2、个人空间创建一个bot并提交审核



浏览器地址栏上复制bot后面的数字,这个是bot_id,后面接口会用到

3、创建好bot后点击发布,勾选bot as api


4、为了防止key在前端页面泄露,创建一个nginx的反向代理

 location /cozeapi {
        proxy_buffering off;
        proxy_pass https://api.coze.cn/open_api/v2/chat;
        proxy_set_header Authorization "Bearer 你申请的key";
        proxy_set_header Host "api.coze.cn";
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
}

5、假设你的域名是example.com,那么api就是http://example.com/cozeapi

6、最后附上完整用vue编写的完整html代码

{{collectdata}}

网友评论0