我开源了自己实现的 gpt-engineer，简单得让你不敢相信

老码小张
1,319 阅读4分钟

在开发过程中，是否经常遇到老板临时要看某个交互效果的情况？gpt-frontend-code-gen 是一个前端页面生成神器，今天我把他开源了，你可以在这里找到：github.com/bravekingzh…

image.png

一句话说，该项目支持实时预览和对话式修改交互效果,支持恢复之前的版本。这不仅大大提高了开发效率，还能让你在极短时间内做出令人满意的前端效果。

效果预览

step1: 一句话生成一个前端页面，让你的前端开发效率提升数倍。

step2：持续迭代，告诉他，修改下风格为 iOS 风格。

step3：继续让他在修改下布局，完美了。

这一切，你只需要告诉他，我要一个什么样的页面，他就会给你生成出来，然后你可以不断的和他对话，让他帮你修改，直到你满意为止。

项目简介

gpt-frontend-code-gen 是一个利用 React 和 Vite 构建的前端项目，结合 Koa 框架的后端服务，支持一键生成和预览前端页面，并且可以通过对话不断调整页面效果。

项目特点

  • 高效生成：通过一句话生成前端页面，快速构建页面结构。
  • 实时预览：生成的页面可以即时预览，方便快速迭代。
  • 对话式修改：通过持续对话不断修改和更新页面，直到满意为止。
  • 配置灵活：支持自定义 APIKey 和 BaseUrl，兼容多种大模型，建议使用 one-api 的方式。
  • 超级简单：项目实现原理超级简单，对于你来说，定制起来也会非常简单。
  • 一键启动：使用 Docker 和 Docker Compose 实现傻瓜式启动。

实现原理

项目前端使用 React 和 Vite，配合 Chakra UI 实现页面生成和 UI 展示。后端采用 Koa 框架，处理生成请求并与 AI 进行交互。用户可以通过对话不断向 AI 提出需求，后台根据需求生成相应的 React 组件，并在前端展示出来。

解决的问题

  1. 提升开发效率：在需要快速原型或演示的场合，可以通过一句话生成页面，大幅缩短开发时间。
  2. 灵活应对需求变更：通过对话实时修改页面，不需要修改代码，直接与 GPT-4 交互即可满足变更需求。
  3. 支持多模型：可以配置不同的大模型，大大提高生成效果的准确性和多样性。
  4. 拒绝次数忧虑：无论是 gpt-engineer 还是 claude，都是有次数限制的，而通过这个项目，嘿嘿，结合我之前安利的如何拿到 coze 的免费 gpt-4o 的 apikey，你就可以无限次数的使用了。

快速上手

最直接的方式是通过 Docker 启动项目，只需执行以下命令即可：

docker-compose up -d --build

如果你想手动启动项目，可以按照以下步骤操作：

  1. 确保环境中已安装 Node.js（18以上） 和 Docker（可选）。
  2. 在项目根目录下分别为前端和后端安装依赖并启动：
  3. # 安装前端依赖
cd frontend
npm install
npm run dev

# 安装后端依赖
cd ../server
npm install
npm run dev

打开浏览器访问 http://localhost:9000，配置 APIKey 和 BaseUrl，需要是 openai 的结构标准的 api，建议使用 one-api 来做代码，这样，理论上所有的模型都支持，当然包括你本地部署的。

核心原理

前端项目中，src/components/Preview.tsx 文件中，实际上是一个占位文件，通过大模型生成的代码会写入到这个文件种，然后通过 vite 的热更新，实时预览。

后端项目中，src/routes/index.ts 文件中，通过 koa 的路由，接收前端的请求，然后调用大模型生成代码，然后将生成的代码写入到前端项目中。

Docker 的方式，因为前后端项目会打不同的镜像，因此，使用了共享 volume 的方式，将前端项目的代码挂载到后端项目中，这样，后端项目就可以直接写入到前端项目中。

avatar
文章
阅读
粉丝