AI编程从开发到变现小白入门-鬼斧神工共学营

今天来给AI编程做第一个案例：就是用HTML网页连接Coze工作流，实现网页AI化的第一步。

这一节非常简单，先来看下图：

• 这是一个网页，没有后端，只有前端（HTML+CSS+JS）；

• 它连接了Coze的工作流。

只有这两点，就说明简单+牛逼。

只要用这个简单的案例，举一反三，小白也能做出超牛AI应用。

在线下载及测试地址：https://www.vicrocode.com/project-detail?id=86

以下只需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步：部署上线

最后，把网页部署到线上，让大家可以使用。

打开：https://www.vicrocode.com/

然后在trae中让它帮我们给这个程序写个500字的介绍：

给这个程序功能写500字左右的介绍，输出为markdown

写完后把它贴到项目描述，同时记得上传一张截图：

选好标签：

本次要开放源码，把文件夹压缩后上传：

同时也打开在线运行：

整个文件夹都上传：

设置好首页文件名（也即是默认访问的页面）：

将发布状态调整为公域：

这样大家都看得到了。

输入API和工作流ID即可使用了。

《AI编程从开发到变现小白入门》手册

https://drgphlxsfa.feishu.cn/wiki/LK9pwfT7piXZuhkMHE0cokT3nXd