大家好，我是创业时长五年半的张总，喜欢唱、跳、rap、篮球。
最近一年我做了几款AI产品，主要是SD绘画和AI Chat类产品，所以对于各类AI产品开发略有些心得。接下来我会分享如何从0到1开发各种各样的AI产品，以及关于技术、产品、和运营的一些见解。
本文是 《开发ChatGPT聊天机器人的100种姿势》 系列文章的第一篇，我会用N种方式教你从一个简单对话框写到一个完整的应用，每个姿势都力求舒服。
最简AI聊天机器人
千里之行，始于足下
先freestyle一个最简18行代码的ChatGPT聊天机器人。
使用纯HTML、JavaScript实现，不使用任何第三方库。打开网页后会发送"你好"给ChatGPT，ChatGPT收到后会在控制台输出响应的结果。
html
<html>
<head>
<script>
const headers = new Headers();
headers.append("Content-Type", "application/json");
headers.append("Authorization", "Bearer sk-UgtZ6M4qw7Ycfzok0cC1E8C690A04b92B38e381c4c5661D5");
const body = JSON.stringify({
model: "gpt-3.5-turbo",
messages: [{ role: "user", content: "你好" }],
});
const requestOptions = { method: 'POST', headers, body };
fetch("https://ai98.vip/v1/chat/completions", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
</script>
</head>
</html>实操
- 复制上面的代码，保存为index.html，双击运行
- 打开浏览器控制台，如果能看到下面的数据，那么恭喜你，你的
第一个AI应用就写好了！
如果报错，去控制台看问题，比如apiKey失效（key是有额度限制的，具体看"注意"事项）
知识要点
- 设置HTTP请求中header的
Authorization属性，这是请求API的秘钥。扩展知识JWT - 使用原生Fetch API作为请求方法
- 调用OpenAI API ，model是请求的模型，messages是消息列表，其中role是消息的角色（system、user、assistant等），content是内容，本文代码中是user角色，表示是用户发送的消息 ``
注意：
- 因为一些原因，OpenAI官方的API可能无法访问，所以，代码中我使用了代理地址
- 代码中的sk-xxxx是访问API的key，key是真实的，我免费开放了$10的额度，用完可以再问我要
下期预告
-
📝 支持连续对话功能，具备
上下文记忆 -
📜 支持
Stream流式对话（打字机效果） -
🌀 新增加载中的css动效
效果预览：
Sige
文章有写的不好的地方，欢迎指正。
前几期可能没有一些"炫酷"的代码和界面，主打一个简洁、高效，快速上手。
系列代码可以在Github仓库中查看：GitHub - miaoihan/100way-to-build-ai: 开发AI应用的100种姿势
本文用到的工具
vscode、Chrome、Mac自带截图工具、GIF Brewery 3动图录制