低代码 + AI = 对话方式生成UI

最近AI非常火,作者也一直想借助AI之力使低代码开发框架更上一层楼。恰逢作者过年前因皮下细菌感染住了半个月的医院,期间正好研究了下AI相关的知识,虽说AI目前生成一个完整的严谨的应用系统还有点牵强,但总可以辅助低代码生成相关的模型吧。

一、实现原理

目前的实现方式非常简单粗爆,低代码框架相当于一个Agent,根据需要生成的模型类型封装不同的提示词发送给大语言模型输出,有些模型可能直接输出代码,有些模型则会输出结构化json,框架内的模型设计器解析输出结果进行相应的转换即可。

二、操作演示

  • 新建一个View模型,类型选择"Code",然后打开预览界面,在底部的"AIGenerate"面板内输入提示词: "
    生成一个美观的用户登录界面,包含一张图片作为背景",框架将封装提示词及工具发送给大语言模型处理,处理完后的界面可能如下图所示:
  • 因为AI对话保持历史消息,所以如果需要对生成的内容作调整,可以继续发送请求,比如: "图片放在左侧",处理完后的界面可能如下图所示:
  • 当然可以进一步添加组件至当前界面,比如: "在登录按钮右侧添加一个重置按钮,点击时重置用户名及密码",处理完后的界面可能如下图所示:

以上操作作者简单录了个视频:演示视频

三、下一步计划

  • 进一步完善各模型的系统提示词,扩展可用的组件列表;
  • 开发更多的工具用于大语言模型感知低代码框架的能力;
  • 实现数据实体、业务服务、分析报表的AI生成能力;
  • 终极目标:根据需求分析,由AI生成完整的应用系统。

四、本篇小结

作者个人能力实在有限Bug在所难免,如有问题请邮件联系或Github Issue,欢迎感兴趣的小伙伴们加入共同完善,当然更欢迎赞助项目或给作者介绍工作。