今天来给AI编程做第一个案例：就是用HTML网页连接Coze工作流，实现网页AI化的第一步。
这一节非常简单，先来看下图：
- 这是一个网页，没有后端，只有前端（HTML+CSS+JS）；
- 它连接了Coze的工作流。
只有这两点，就说明简单+牛逼。
只要用这个简单的案例，举一反三，小白也能做出超牛AI应用。
在线下载及测试地址：www.vicrocode.com/project-det…
以下只需3步，就能完成从Coze工作流到网页（或应用）的开发。
第1步：提取工作流ID和Coze API
假设，你已经做好了一个工作流，你先取得它的ID号：
每个工作流都有一个workflow_id，工作流的网址中可以看到。
取得工作流ID后，来到Coze API拿key：
添加一个，过期时间设置“长期有效”，权限看你自己的需要：
如果不想分享给其它工作空间的成员，就选择指定工作空间。
添加后，这一处就是你的APIkey：
这个令牌只显示一次，保存起来。若丢了，只能再重新生成一个。
然后来到Playground中的工作流：
进入到请求配置的地方，输入你的API和工作流ID，因为你是前端，所以在右侧点JavaScript
试运行一下看能不能成功，返回200，有内容即是成功。
第2步：让AI生成网页
然后复制这段JavaScript代码，写一段提示词：
// Our official coze sdk for JavaScript [coze-js](https://github.com/coze-dev/coze-js)
import { CozeAPI } from '@coze/api';
const apiClient = new CozeAPI({
token: '【apikey】',
baseURL: 'https://api.coze.cn'
});
const res = await apiClient.workflows.runs.create({
workflow_id: '【工作流ID】',
});
---
上面是coze工作流前端API链接。
帮我做一个网页：
技术栈：HTML+CSS+JS
设计：参考微信聊天界面设计；
交互：AI与我的对话，AI是coze工作流；
网页在打开时弹出要求用户输入Coze API和工作流ID，这些信息保存在用户浏览器中。
对话时连接Coze API和工作流ID后以AI身份回答用户。
将以上提示词输入到Trae对话中，让它执行即可：
执行过程中会有一些不满意的地方，直接让它调整，可能要很多次，下面是我的调整过程：
在经过多次修改之后，总算成功了：
只有三个文件，就是HTML+CSS+JS：
第3步：部署上线
最后，把网页部署到线上，让大家可以使用。
然后在trae中让它帮我们给这个程序写个500字的介绍：
给这个程序功能写500字左右的介绍，输出为markdown
写完后把它贴到项目描述，同时记得上传一张截图：
选好标签：
本次要开放源码，把文件夹压缩后上传：
同时也打开在线运行：
整个文件夹都上传：
设置好首页文件名（也即是默认访问的页面）：
将发布状态调整为公域：
这样大家都看得到了。
输入API和工作流ID即可使用了。
《AI编程从开发到变现小白入门》手册
drgphlxsfa.feishu.cn/wiki/LK9pwf…
